The state of font-face

Embedding fonts on a web page can be a chore, and getting all the little bits just right can take quite a while to iron out.

The advice so far has been to convert your font and serve four different file types, an EOT, a WOFF, a TTF and a SVG. So I decided to actually check if that really is necessary.

To make this mission I just went to caniuse.com and made some screenshots, so let’s compare those screenshots.

The support for TTF/OTF

Supported by almost all browsers, except IE and Opera Mini

The support for WOFF

IE supports this a bit better, but just for IE 9 & 10.

The support for EOT

Excellent support by IE, but only IE, but all the way back from IE 6!

The support for SVG

Supported by all browsers, except IE lower than 9, and I (and others) have experienced that the SVG looks wonky sometimes. Especially on Chrome on Windows.

So my advice would be to ditch the WOFF, and due to IE’s partial support for TTF it’s best to serve the EOT before the TTF. So, serve the font files in this order:

  1. EOT (IE)
  2. TTF (Chrome, Firefox and others)
  3. SVG (Opera Mini)

And there you should have covered all bases and your site should look fine and dandy (hopefully;-).

Any thoughts or comments, please write a comment =)

comments powered by Disqus