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:
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):
- Convert OTF file to .ttf (use fontForge)
- Embed with @font-face
- 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
July 8th, 2009 at 10:25 pm
Have a look at Cufon, it worked really well in my tests.
http://cufon.shoqolate.com/generate/
July 16th, 2009 at 9:38 pm
Looks like an awesome piece of software! Thanks for the tip! :)
August 24th, 2009 at 11:28 pm
Hey, dumbwad, you used the wrong “its”. As in, “you have to call it by it’s name.” ENNNHHHH. Wrong. Please try again.