SVG Export Simple Color Font

I’m new to SVG fonts and I’m having trouble getting it to export as an OTF. Can you let me know what step I’m missing on it? So far I’ve created the ‘z’ glyph to test on my file. Thanks for any help you can give.

New Font-Color.glyphs (8.6 KB)

tried following the SVG tutorial?

Thanks ghost, I’ve looked at it yes but I must be confused as it only shows how to export woff files but I’m needing a desktop installable version. Any thoughts?

Just export it as OTF instead of Webfont.

Thanks Georg, I tried that but not sure if the file is set up correctly as the glyph is not visible in the font file.SVG (192.9 KB)

The file looks empty.
There’s a broken reference to an external image.


  1. Paste the SVG as in the tutorial:
  2. And remember to fill the Regular Layer with a fallback font.
    Example: animated font (pasted animated SVG inside).glyphs (8.7 KB)

Also try checking other color fonts and study how they were made:
one, another

Thank you Ghost! This is very informative and this should do the trick : )

1 Like

I do have one more question @ghost , is there a way that this svg font can be exported using Glyphs app? If so what steps would need to be taken? Please see uploaded font

I had a look at all the files posted in this thread. And none have all needed files.

@dathanboardman can you send me the .glyphs and the .svg file?

Thank you Georg, any insight will be greatly appreciated!
Please see the following URL.

Where did you get the .svg. They seem that they came from a .otf font. But as the font has a sbix table, too you also get the plain images. If you plan to work on that font, I would suggest you remove all the svg layers and onlywork with the sbix setup. Then you add a custom parameter SBIX to SVG with a value of the SBIX size (1181 in this case). You can add different image sizes to control file size. More details in the Color font tutorials.

(The problem with the import of the svg data is that in the font, all image data has to be above Y=0 but normal svgs, have their content below y=0. On export Glyphs shifts stuff up but revering that in import is tricky).

1 Like

Brilliant thank you Georg, deleting the svg layer fixed it!