What fonts do browsers download when using @font-face

@font-face is kind of confusing as all the browsers cannot decide on a single file format to use. Below is what I am currently using to add 1 new font to a site, you can see there is 4 separate font files, I know that each one is because some browsers support different formats but does the browser download all the files or just the 1 that it needs?

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

}

2012-04-04 21:15
by JasonDavis

You can always look at your server's access logs and see exactly what the browser DID download, or use a websniffer like HTTPFox or Firebug's Net tab, if you're on Firefox - Marc B 2012-04-04 21:18

Google Chrome also has something to see what you downloar or not - David Bélanger 2012-04-04 21:39

I believe it downloads the first compatible format for the browser. Everything after that is ignored - Scott 2012-04-04 22:16

I would expect for a browser to download all fonts that it supports and than apply the latest only, just like with other css properties.

My expectation seems to be wrong though. On a site that embedded fonts with markup identical to what you've provided above, FF only downloaded the .woff file even though it supports .ttf/.otf as well.

FYI, the support matrix; individual formats are linked to at the bottom.

2012-04-04 22:07
by o.v.