Webfont creation

Glyphs
1

Making webfonts with interface— without some terminal-tools— is not easy (outside Glyphs)
— TransType messes up the vertical metrics
— OTMaster can’t export EOT
— FontPrep creates enormous big files

My questions:

  1. importing hinted TTFs in Glyphs for webfont-export is keeping the hinting?
  2. are the WOFFs from Glyphs zopfli compressed?
    (2-5% better compression than standard WOFF, can be done by some terminal-tools)
2
  1. No.
    For that, you could do a bash script like what I did for the (deprecated) Webfontmaker. You can still find it on my Github page.
3

No. That is not possible.

Just updated the library to do so.

4

Thanks for the answers. And great to have zopfli in the next version.

5

@mekkablue: you told me that EOT can have problems when using not exactly the same font-family-name in css as it is inside the file, right?
I tested both “myFont” and “my Font” as font-family in IE8 on win7 and had no problems.
Or did you mean something else to take care of?

6

Sometimes it works, sometimes it doesn’t. (Cf. this problem on Stackexchange) In any event, I did run into problems with EOTs that I could fix by changing the names in CSS. I once got an EOT to work eventually with this CSS line:

@font-face { font-family: 'FamilyName'; src: url(FamilyName.eot); }

or, if you have the style name set to “Bold”, it should be:

@font-face { font-family: 'FamilyName-Bold'; src: url(FamilyName-Bold.eot); }
font-weight: bold;

…and other font-related CSS settings, you can do all of them in one go:

font: normal normal bold 1em "FamilyName-Bold", serif;

I believe it has to do with certain family name and style name combos. Every other EOT in my Webfont Test HTML will not work in IE.

Other things that may help with EOTs:

  • avoid style linking (“this is the bold of …”)
  • avoid the Webfont Only setting for EOTs (turn it off)
  • check IE’s developer mode (F12, or gear menu in top right > Dev Mode) to find out the exact error code. I usually get CSS3111
1 Like