4

Paul Irish suggests that the 'bullet proof' way to load fonts is to render EOT first, followed by WOFF, TTF, and lastly SVG.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('☺'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Source: http://www.html5rocks.com/en/tutorials/webfonts/quick/

However, he doesn't explain why this is the correct order (I assume performance). Can anyone elaborate? Also, what are the quality differences? E.g. SVG appears to produce better scaling/antialiasing in Chrome.

alias51
  • 8,178
  • 22
  • 94
  • 166
  • not sure why eot has to be first, maybe old IEs can only read first `src` statement. for the rest i think its the order of most common usage (FF,Chrome and IE9+ are used most often by users followed by Opera and Safari then iOS) – bbuecherl Dec 30 '13 at 13:06
  • Actualy webkit browsers complains very often if the svg file is last. There was an article that was advising that the svg file should be put before the woff file. – drip Dec 30 '13 at 13:14
  • I experienced fatal errors with font rendering in webkit browsers when putting the svg in front.. Sometimes the font worked, sometimes not. – damian Dec 30 '13 at 13:24
  • This: http://icomoon.io/#post/318 is a great blog post; essentially Chrome has a bug that means it doesn't fully support `ttf` or `woff`. If you render `svg` then it works well, however other browsers don't support this. The answer is a webkit media query. – alias51 Dec 30 '13 at 13:34

1 Answers1

0

There is no “correct order”, and it’s not a loading order but a list from which each browser is expected to pick up one font resource to load – namely this first one they support (and it works that way).

EOT comes first because it is the only one that old versions of IE support, but its position is really not important.

WOFF is generally said to the optimal for web fonts. Whether that is true may depend on opinions, rendering routines, and fonts, but it’s anyway the conventional wisdom behind the order

TTF and SVG are listed last because some browsers support only such formats. If they were placed earlier, those formats might get used by some browsers that support WOFF as well.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks, are other font types loaded after the first is found? I assume not. – alias51 Dec 30 '13 at 13:32
  • 2
    Other font resources are not loaded. CSS Fonts Module Level 3 says: “[The `src`] descriptor specifies the resource containing font data. [...] Its value is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate.” – Jukka K. Korpela Dec 30 '13 at 13:49