2

I want to prioritze the download of the webfont and tried this, according to https://leerob.io/blog/fonts

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />        
        <link rel="preload" href="https://leerob.io/fonts/inter-var-latin.woff2" as="font" type="font/woff2" />
        <style type="text/css">
            @font-face {
                font-family: Inter;
                font-display: optional;
                src: url(https://leerob.io/fonts/inter-var-latin.woff2) format('woff2');
            }
            body {
                font-size: 300%;
                font-family: Inter;
            }
        </style>
    </head>
    <body>
        lorem ipsum.
    </body>
</html>

The problem is that the browser downloads the font twice. codepen is here: https://codepen.io/snuup/pen/poPBBLg if you refresh it, and filter the downloads to fonts (since codepen has so many files itself) you see the 2 downloads.

How can I preload the font and avoid 2 downloads?

1 Answer 1

5

Weirdly enough, it turns out you need to add the crossorigin property to the link, even when it's on the same site. It doesn't make sense to me either, but it works.

So your tag should be

<link rel="preload" href="https://leerob.io/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin />
2
  • 1
    This doesn't fix the issue in Firefox for what I can see
    – tomyo
    Oct 20, 2022 at 12:34
  • Strange, it works in Firefox here: hyperborea.org/les-mis
    – Kelson
    Oct 21, 2022 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.