Preloading font issues

[limber marlin]

Hi,

I am trying to preload fonts on my portfolio site, but I keep getting a couple of errors/warnings:

1. When I load the site, an incorrect font is displayed and only when I refresh the site the correct one is applied.
2. I keep getting this warning in Firefox:

downloadable font: font-display timeout, webfont not used (font-family: "Inter" style:normal weight:700 stretch:100 src index:0) source: https://andrijan-dev.vercel.app/fonts/Inter-Bold.woff

3. And this one (also in Firefox):

The resource at “https://andrijan-dev.vercel.app/fonts/Inter-Light.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

I use the property font-display: optional and I also preload the fonts in the head tag.

The link to by website is: https://andrijan-dev.vercel.app/

A link to the GitHub repo: https://github.com/andrijantasevski/andrijan-dev/tree/dev

Thank you!

[dawn crypt]

looks to me like your homepage only uses Light and Regular

I'd recommend using the variable variation of Inter: https://caniuse.com/variable-fonts

variable fonts w/ the weight variable are well supported now

an easy way to set that up could be npm add @fontsource/inter && import "@fontsource/inter/variable.css" in your files

https://docs.astro.build/en/guides/fonts/#using-fontsource