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