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?
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.
To answer this question, I have cited relevant passages from the following W3C document:
CSS Fonts Module Level 3
W3C Candidate Recommendation 3 October 2013
(In the cited material, note that I have emphasized those sentences that are most pertinent to the question.)
4.1 The @font-face
rule
The @font-face
rule allows for linking to fonts that are automatically fetched and activated when needed. This allows authors
to select a font that closely matches the design goals for a given
page rather than limiting the font choice to a set of fonts available
on a given platform. A set of font descriptors define the location of
a font resource, either locally or externally, along with the style
characteristics of an individual face. Multiple @font-face
rules can be used to construct font families with a variety of faces.
Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text.
4.3 Font reference: the src
descriptor
This descriptor specifies the resource containing font data. It is
required for the @font-face
rule to be valid. Its value is a
prioritized, comma-separated list of external references or
locally-installed font face names. When a font is needed the user
agent iterates over the set of references listed, using the first one
it can successfully activate. Fonts containing invalid data or local
font faces that are not found are ignored and the user agent loads the
next font in the list.
...
External references consist of a URL, followed by an optional hint
describing the format of the font resource referenced by that URL. The
format hint contains a comma-separated list of format strings that
denote well-known font formats. Conformant user agents must skip
downloading a font resource if the format hints indicate only
unsupported or unknown font formats. If no format hints are supplied,
the user agent should download the font resource.
/* load WOFF font if possible, otherwise use OpenType font */
@font-face {
font-family: bodytext;
src: url(ideal-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("opentype");
}