Your Font has Too Many Faces and Woff Not
Karen Menezes on October 13, 2014It'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;
}
;Isn't that amazing? It works on all browsers down to IE6! Such bulletproof, much smile.
Isn't that verbose? Such impure, much skin crawl.
Well, you can avoid it:
Just using the woff font packaging format is enough... almost.
Woff is supported on EVERYTHING except for:
IE < 9, Safari/iOS < 5.1, Android < 4.4
- For Android < 4.4, you can use the TTF format.
- For Safari/iOS < 5.1, you'll have to use the SVG font format.
- For IE8 and below, you'll have to use the EOT format.
I think it's time to go ahead with just woff:
- It's the standard.
- It was specifically created for using custom fonts via the @font-face rule.
- Every single modern browser has adopted it.
- It's extremely lightweight. Woff has the smallest file size of all the font formats, due to its compression algorithm.
- It allows metadata to be attached to the file, pertaining to licensing, vendor, credits, etc.
- It's not the end of the world to have a system font fallback for really old browsers (I would beg to differ for icon fonts)
Do remember that woff is not a new font format, but a wrapper format for any properly licensed TrueType/OpenType/Open Font Format.
If you're getting weird MIME type warnings, it implies your web server is serving the font with the wrong MIME type. You can use the W3 approved MIME type: application/font-woff.
It's October 2014. You're a chilled out dev and you like to keep it simple.
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSans-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Credits
Thumbnail: Image by Alexander Andrews on Unsplash
Banner: Image by Brett Jordan on Unsplash