Question

@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;

}

Answer 1

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.