CODEWITHSUNDEEP
htmlbrowser
Coli
Coli

Reputation: 1031

Preloading multiple font formats

I want to preloading fonts with <link rel="preload" href="..fontfile.type" as="font" type="font/type">. But in my @font-face I am offering multiple formats.
Is it best practice to add a preload link for every font format? Example:

<link rel="preload" as="font" href="...eot" type="font/eot">
<link rel="preload" as="font" href="...woff2" type="font/woff2">
<link rel="preload" as="font" href="...ttf" type="font/ttf">

Does the browser now load all specified files or does the browser recognize that they are the same files (with different formats)?

Is it better to offer only one file (woff2 should cover most Browsers)?

Upvotes: 3

Views: 1777

Answers (1)

Coli
Coli

Reputation: 1031

Quoted from yoav-weiss on GitHub:

The type attribute works with preloads, but it does not enable you to exclude older, supported formats. That means you currently can preload the woff2 variant only in supporting browsers, but you won't be able to preload the woff variant only in browsers that don't support woff2 (since that variant is supported in newer browsers as well).

My advice is to use preload only for the latest format, which should probably cover most users by now. Older browsers will not get this optimization, but are likely to not support preload either, so that's most probably fine.

Upvotes: 5

Related Questions