Why are we loading so many font formats?

Question

A typical @font-face setup:

@font-face {
  font-family: 'myFont';
  src: url('/fonts/myFont.woff') format('woff'),
    url('/fonts/myFont.ttf') format('ttf'),
    url('/fonts/myFont.svg') format('svg'),
    url('/fonts/myFont.eot') format('eot')
}

Now, we have this definition of IE 9+, which translates to "modern browsers". Looking at font type support it is a big mess, though eot seems to be for IE8. Looking at the site "can I use" both woff and svg format is supported by all modern browsers.

So why do we add all these three formats, we only need one as all modern browsers support either woff or svg? What I do not understand either is that the order matters. So in the example above all modern browsers will download the "woff" format. There is no need to add svg. So why do we do that?

The background for this question is inline optimization. If I want to include my fonts as a Base64 string it is not very "optimizely" to inline all three font formats, it will only make the CSS unnecessary large.

So if your target is "modern browsers", just choose a format that the font supports and stick with that. Forget about this fallback that "every single example" on the web uses.

Maybe some formats looks better in some browsers than others, but it does not matter because the browsers will only download the first supported format anyways which in "modern browsers" will always be the first woff or svg on your font face list, or ttf if you do not care about IE.

So, I have just made a bunch of assumptions here. Is there really any reason to add all of them? You mostly get away with using either woff or svg?

Answer 1

You almost answered all your question yourself. :)

Here's a good read that might help:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en

Re SVG fonts, I think Safari on older versions of iOS only supported SVG webfonts. That's why it became popular in recipes. EOT was old IE. TTF is pre-woff non-IE. There's also woff2 around these days which is supported in Chrome, Opera, and non-release builds of Firefox.

For inlining font data, you need to detect your browser and send down the best supported version.