Apple Color PNG Font problems: sbix not showing in Photoshop

I am trying to make a PNG based font following the tutorial here:
https://glyphsapp.com/tutorials/creating-an-apple-color-font

When I export the font, the png images for the letters I’ve prepared appear in Fontbook, but not in Photoshop. In Photoshop, the png glyphs I have added in just appear blank in the glyph menu and when typed. I have followed the instructions, and triple checked everything. I am using the latest version of PS.

I don’t know if it’s not working due to lack of PS support, or if my font file is incorrect. I have loaded SVG Opentype fonts just fine, but perhaps PNG is a different beast. Perhaps it would be nice if the end file generated from the tutorial was made available. I am happy to supply the font files or dev files.

This has been resolved:

Edit: I updated the tutorial.

Thanks, adding tiny paths did the trick. The font now works in PS on Mac. I cannot get it to work on PS in Windows platform, which I assume is due to lack of sbix support. Is there something I can add to the font to ensure Windows compatibility or is that a dead end? Ultimately I am trying to create a font using PNG images. Through my research the Opentype-SVG approach seemed like the best bet, but while SVGs can contain PNG images, I could not get the graphics to display through Glyphs. Is it possible, or are my efforts futile going that route?

I did make a OT-SVG font with image data. So that should work. You need to embed the image into the SVG. Referencing them will not work.

That would be a good question to ask Adobe.

Is there a trick to getting svg (containing a png) images to align correctly? I’ve managed to get png images to align perfectly by adding points to the main layer as suggested, but when I try the same process with svg, the images will appear way off of were they should appear, if they appear at all.

The positioning of the SVGs is mostly controlled by the viewport setting in the SVG. And did you try the latest cutting edge version? If that doesn’t help, could you send me the .glyphs file and the SVGs?

I’m creating the svg files using Illustrator, which automatically adds in the viewport settings from what I can tell.

I’ve upgraded to the latest version of Glyphs, and am testing using the latest version of Photoshop on both Mac and Windows. Windows is upgraded to the latest version of 10 (they recently added some more support for sbix and the like).

I’m sending you the requested test files. Thanks for your help.

I had a look at your file.

The SVG format is a bit tricky. It can do a lot of things, and to accommodate all cases is very difficult. In your case, there are two things you need to do. First, put the image in a group in Illustrator (or add a <g> tag around the image tag in xml if you are familiar with that). And you need to make the artboard square. Photoshop has a bug that distorts the SVG to be square.

To fine tune the positioning and the size of the image, move the image preview around in Glyphs and scale it. The size of the preview will not match the size in the final font (again SVG is complicated, I’ll try to improve that).

For SVG, the paths in the main glyph have no effect, that is only for SBIX.

Thanks, that helps a lot! I appreciate you looking at the file.

Hi

Is it possible to control spacing in Open Type SVG Fonts with embedded bitmap? I tried to create a font with letters but I see it doesn’t work so well and I wanted to know if I’m missing something.

Sbix fonts only work in photoshop when installed in the systems font folder.

There’s more to it, even. The requirements are listed in the sbix tutorial

Yes, I know it.
I asked about the SVG with embedded PNG. I tried to create a font with SBIX but for some reason it doesn’t work in Photoshop cc 2017. I wanted to create a font with SVG because it has larger support and I can also use bitmaps in it, but I don’t know how to solve the spacing problem — in SBIX I could scale everything with UPM. I also tried do SVG correctly in Illustrator and PNG in Photoshop. Is there other possibility to control SVG with PNG in fonts without changing the xml?

And CC 2018?

Also :worried:

I know that currently there are more important things in developing Glyphs 2.5 but I think it would be great to use bitmap images in SBIX and SVG table in one font. It could work in Mac, Microsoft, Adobe and Google apps. I don’t know if it is possible to unify the images in Glyphs.

Should work. You are using the most recent beta, right? There were some changes in the SVG export recently.

Currently only color layer to SVG are supported. I have a look.

I just added sbix to SVG.

1 Like

A year later, same(?) trouble. I’m working on a sbix project and everything was working fine, export working, adobe working and everything ok. Suddenly, doesn’t work on Adobes anymore. On TextEdit keeps working, and one thing is not working fine – the Ccedilla. On Glyphs the position is ok, but as I export, the cedilla goes to baseline, so the glyph goes up. Any Idea what’s happening @GeorgSeifert @mekkablue?