PageSpeed Insights complains that I should preload important assets, which I already do for CSS (http header Link: </assets/css/myfile.css>; rel=preload; as=style). However, the complaints are specifically about web fonts. Indeed, these can currently download only after the (preloaded) CSS has been downloaded. The problem is that these fonts come in various variants (myfont.eot, myfont.svg, myfont.woff, myfont.woff2) and it is up to the client t decide which to download:

 src:url(/assets/font/myfont.eot) format('embedded-opentype'),
     url(/assets/font/myfont.woff) format('woff'),
     url(/assets/font/myfont.woff2) format('woff2'),
     url(/assets/font/myfont.svg) format('svg');

So if I specifically preload the variant PageSpped Insights complains about, I make them happy but cause superfluous download for any client with a different font format preference.

Q: Is there any way to make a "variant-aware preload", i.e., instead of "download this file, you will probably need it in a moment, trust me" something like "download one of these files, whichever has the format you'd prefer for a font in case you need it later"?

  • 1
    I'm not sure you need to provide so many formats for your fonts these days. It looks the woff format is universally supported caniuse.com/?search=woff Only Opera Mini doesn't support it, and that browser doesn't appear to support any web font formats. If you drop support for IE 11, you could use woff2. Commented Jan 30, 2021 at 10:10


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.