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

Question

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 1

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.