This is the wrong use of prefetch . See Resource: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
<link rel="prefetch"> is a directive that tells the browser to select the resource that is likely to be needed for next navigation.
...
Originally planned to use current navigation<link rel="subresource"> , but this could not be done in any spectacular way.
...
The main way to use preload is to load lagging resources early . [...] Some resources are hidden in CSS and JavaScript
So preload is what we want to use here. But it is not supported, hardly at all.
The article also has a few words about downloading fonts:
Sort of:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
One thing worth moving on to: you need to add the crossorigin attribute when choosing fonts, as they are extracted using the anonymous CORS mode. Yes, even if your fonts are on par with the page. Unfortunately.
Putting it all together, the updated reproducible code looks like this:
style.css:
@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 look forward to better browser support.
Chrome:
Canary: