Embedding Web Fonts: A cautionary tale

So for work, the designer says “Hey, can we use this font in the webpage” and like an idiot, I say “sure, why not?”. Well, FF and Safari don’t support .otf files (for whatever reason) So I download FontForge, open it in X11 (on my mac) and convert it to .ttf, which works great.

Then I messed around in IE, trying to make it work, even downloading this tool:

Microsoft WEFT

Worst thing EVER. Don’t do this. Don’t get this. Don’t even look at this. You will feel violated if you use it.

So…how to embed an OTF font in a website (make sure you have a license to do so kids):

  1. Convert OTF file to .ttf (use fontForge)
  2. Embed with @font-face
  3. When adding the font to a style, in IE you CAN NOT call it by the name you gave it with the @font-face declaration. You have to call it by it’s name. So if the font’s name is myfontLTSTDBOLDITALICROMAN you have to do: body{ font-family: myfontLTSTDBOLDITALICROMAN; } Sucky? Very. Works? yes.

Have a nice day


8,389 Responses to “Embedding Web Fonts: A cautionary tale”

Leave a Reply