The Pixel Experience

@Font-Face CSS Technique

Despite being available in Microsoft Internet Explorer for some time now, and with the preview of CSS3 coming out, embedding fonts in websites is set to become a lot easier. In this guide I hope to demonstrate how to get font embedding to work with Firefox 3.5, Internet Exporer 6-8 and Safari. As of yet I have not tested it with Opera 10 or Google Chrome.

---

The Ever Incompatible Internet Explorer

Microsoft only allows embedding of fonts that have been encumbered in some sort of deficient proprietary DRM, or something. Thankfully, we don't have to use their WEFT tool to create the .eot file from .ttf font files - use the ttf2eot tool instead.

The CSS code

/* Internet Explorer - Must be first */
@font-face {
    font-family: non-standard-font;
    src: url(/css/fonts/non-standard-font.eot);
}

/* FFx3.5/Safari */
@font-face {
    font-family: non-standard-font;
    src: url(/css/fonts/non-standard-font.ttf) format("truetype");
}

/* THEN use like you would any other font */
.yourFontName {
    font-family: non-standard-font, Helvetica, Arial, Verdana, sans-serif;
}

Warnings!

Please check your licenses carefully when embedding fonts. Not all authors/distributors of typefaces allow them to be embedded in websites. I tend to start with open-source fonts and www.fontsquirrel.com.

Just because you are embedding your fonts that is no excuse not to include a decent font stack as well. Remember - not everyone may have access to one of the latest @font-face supported browsers.