If multiple sources are listed in an @font-face, are all of them loaded on the client side?

css font-face
Hopstream picture Hopstream · Nov 28, 2012 · Viewed 13.5k times · Source

I'm seeking to optimize the speed of my site and want to know of browers would only load the file they need from the following code or all font files:

@font-face {
    font-family: 'Proxima Nova';
    src: url('proximanova-regitalic-webfont.eot');
    src: url('proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('proximanova-regitalic-webfont.woff') format('woff'),
         url('proximanova-regitalic-webfont.ttf') format('truetype'),
         url('proximanova-regitalic-webfont.svg#proxima_nova_rgitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

Also, is this the most optimal way of doing @font-face? Are there any other strategies to reduce load time for the users?

Answer

BoltClock picture BoltClock · Nov 28, 2012

A typical browser should attempt to load the fonts in the list one by one, depending on what format it supports, starting from the first in the list. Once it obtains a font file that it can use, it doesn't attempt to load any of the rest of the files in the list. If a browser doesn't support a particular format, it should never attempt to load that font; it should move straight on to the next source and looks at that.

This is similar to how a browser uses a font stack in the font-family property.

Of course, not all browsers behave conformingly to the spec. Some browsers like IE will try to download as many fonts as they can or parse the rule in unexpected ways; see the comments for more info and research.

CSS is already designed to help minimize the load time and number of requests through this sequential approach. If your fonts are taking too long to arrive from your own server, consider using a fast CDN instead like Google Web Fonts, Typekit or Adobe Edge.

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
Using .otf fonts on web browsers

I'm working on a website that requires font trials online, the fonts I have are all .otf Is there a way to embed the fonts and get them working on all browsers? If not, what other alternatives do I have ?

Read More
Using custom fonts using CSS?

I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.). And they support a nice amount of browsers. How does one do that? While also preventing people from having free …

Read More