Your Font has Too Many Faces and Woff Not

It's October 2014. You're a chilled out developer, who likes to keep it simple.

When you think about how the @font-face rule has transformed web design, you smile an inner smile.

Let's make some assumptions about the fonts on your project:

- You're using custom fonts courtesy the font-face rule and linking to these fonts via your stylesheet.

- You've heard horror stories over the years about browser compatibility and font-face. This one from 2009 made grown men cry.

- These fonts are used for typographical reasons and not as icon fonts.

- Browser support is IE9+/iOS 5+/Android 4.4+/Everything Else (which is reasonable nowadays, except for Android 4.4+), and it would be super if your site still works on older browsers.

- You're using a font-face generator like the one on Font Squirrel to generate your fonts and styles.

- You may be using a CSS preprocessor to take the edge off, via a custom font-face mixin that eventually spits out all these cross-browser declarations you're trying to forget.

Online font generators usually provide most or all of the following in the generated files:

- woff: Web Open Font Format

- ttf: TrueType and or otf/ttf: OpenType

- svg: Scalable Vector Graphics Font

- eot: Embedded OpenType

Look at that list! And you thought vendor prefixing for box-shadow was hard in 2011?

The last two list items, in particular, need some explanation.

EOT, initially created by Microsoft (to deal with the issue of copyrighted fonts on the web), works only in IE browsers.

SVG fonts work on old desktop Safari and iOS browsers. Actually, only webkit (and then blink) browsers supported them and Chrome (version 38 onwards) and Opera (version 25 onwards) are phasing out support.

Here's what a typical @font-face rule would look like in your stylesheet from an online font generator.

Let's look at Open Sans, one of the most popular custom fonts, generated from Font Squirrel:

@font-face {
    font-family: 'OpenSansRegular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('OpenSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}