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 File.zip (192.9 KB)

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

Solution:

  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. https://www.dropbox.com/s/ek3p2eturo0nf0z/Bodoni%20Lt.zip?dl=0

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!

Is there any reason why this SVG font wouldn’t be showing up in Photoshop 2021 now? It works fine in Pages.

you are exporting sbix font, not a SVG. You need to add this two custom parameters in the instance:

"SBIX to SVG" = 636
"Export sbix Table" = 0

Adobe apps support sbix fonts only, if they are installed in the system, not from the Adobe Font s folder.

Ah I see yes, thank you Georg!

I have 2 more unexpected issues with my Glyphs SVG Export. These 2 files are identical as far as I can tell but the ‘Light’ Version is missing the lowercase ‘k-z’ glyphs and ‘0-9’ glyphs. The baseline shifts slightly from the regular version as well. Can you advise what the culprit is in this instance? Here is the link.

As far as I can see, the fonts are fine. How did you test this. The files are quite big and it seems that app and the system have problems with this.

But you exporting a sbix table too and that makes the fonts unnecessarily big. Uncheck that box at the “Export sbix Table”.

And you might like to convert the .tif to .png and run them through an optimizer. That will make the files much smaller (glyphs will convert the files to .png but the resulting images will be bigger as needed.

@GeorgSeifert I tested the OTFs in Illustrator which is where I was getting the problems. I will try to optimize the pngs to see if this fixes the issue, thank you.

@GeorgSeifert is there a way to batch replace my .tiff files with .png files in Glyphs a script or something? The filenames are the same with the exception of the extension, naturally.