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?