Search code examples
csswebfonts

Why is the WebFont downloaded twice then using preload and font-face?

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?

Solution

  • 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 />