Bitmap SVG font - browser preview

Glyphs
1

I’m still trying to figure out what would be the proper way to create opentype svg (transparent png based) fonts.
As of today - the fonts I’m creating work perfectly fine in Photoshop/Illustrator, even MSWord displays it correctly.
But - preview in browser gives this result:

What I have in the glyphs file is:
Regular layer with two small paths to set the image boundaries
iColor 1000 layer with xxxx.png image

What am I doing wrong? The rest of the svg fonts on the market either show nothing in browser or display the path that is placed on the Regular layer.

SOS :exploding_head:

Update: I’ve checked fonts in OTMaster and it looks like both sbix and svg tables are being exported. Can this cause browser confusion? If so, why all apps display the fonts correctly?

2

You might add a Export sbix Table custom parameter in the instance and uncheck it. If that doesn’t help, can you send me the files?

3

Yes, see my “update” in the initial post :slight_smile:
I’ve added this parameter and testing if it’s going to help browser at all. Will report the result :slight_smile:

4

It worked! Thank you, Georg!
Now the browser displays the path that is placed on the Regular layer. Any chance to display the svg layer?

5

There is a parameter like ‘sbix to svg’ that takes a number (1000 in your case). (I’m not at my Mac right now)

6

Yes, it’s there.
The font works fine everywhere (Photoshop etc) but not in browser. Browser displays Regular layer content, not the svg layer.

7

Side note: Not every browser supports SVG. And if they do, browsers (and browser versions) have different preferences if both an sbix and SVG table are present in the font. So unfortunately I cannot spare you from testing/experimenting with configs.

8

Thanks Rainer, I’ll keep this in mind!