Menu
I want to use html prefetch to prefetch a font file. I followed the recommendations here: https://css-tricks.com/prefetching-preloading-prebrowsing/
<!doctype html>
<html>
<head>
<link rel="prefetch" href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2">
<style>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html, body {
font-family: 'Open Sans';
}
</style>
</head>
<body>
Hello world
</body>
</html>
However, the font file is actually loading twice on Chrome. I haven't tried other browsers.
Am I doing something incorrectly?
774
This is an incorrect usage of prefetch. See the resource: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
<link rel="prefetch">is a directive that tells a browser to fetch a resource that will probably be needed for the next navigation.
...
<link rel="subresource">was originally planned to tackle the current navigation, but it failed to do that in some spectacular ways.
...
The basic way you could use
preloadis to load late-discovered resources early. [...] Some of the resources are hidden in CSS and in JavaScript
So, preload is what we want to use here. But, it is not supported, hardly at all.
The article also has some words about loading fonts specifically:
Something like:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>One point worth going over: You have to add a crossorigin attribute when fetching fonts, as they are fetched using anonymous mode CORS. Yes, even if your fonts are on the same origin as the page. Sorry.
Putting that all together, the updated reproducible code looks like:
style.css:
/* 2MB of random character comment fluff */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html, body {
font-family: 'Open Sans';
}
index.html:
<!doctype html>
<html>
<head>
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2">
<link rel="stylesheet" href="style.css">
</head>
<body>
Hello world
</body>
</html>
Now, it works but only in Chrome Canary. I'm counting on better browser support upcoming.
Chrome:
Canary:
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With