Hello,
I have a few small WOFF2 font files, each around 15-20 KB, and I would prefer to preload them to avoid the font swap issue. When loading the page, I sometimes see a blank space or a glitch where the heading briefly shows the old font before swapping to the new one. It’s annoying, and since I only have 3 tiny font files, I think preloading them would be a better solution.
My question is, if I preload these fonts, do I still need to define them in the CSS @font-face rule? Or does preloading handle everything?
However it doesn’t seem to work locally, and I’m wondering if it could be related to the crossorigin attribute. Also, I’m unsure if I’m using the correct font name. I’ve been using “Inter” in my CSS, but the font might be available under a different name? Any way to found out the name in the woff2 file?
Preloading only helps the browser prioritize the loading of the font file earlier in the page load process, reducing render-blocking issues. However, @font-face is necessary to specify the font’s properties, such as its name, weight, style, and file location, so the browser knows how to apply it to text.
I would try without the font-display: swap. The swap here tells the browser to use a “fall-back” font until the font you want to use is ready. Since you don’t want to see the fall back font, don’t tell the browser to use it. See how that works for you.
These are small font files from https://gwfh.mranftl.com/fonts, 20 KB each file. They only include Latin characters and all other characters have been stripped out.
I haven’t noticed any performance hit so far. In fact, everything feels snappier. I’m curious about when the preloading occurs, does it happen before the browser starts rendering anything on the page? Also, I assume it only happens once when the root domain name is accessed, and not each time I access a blog post on the website, correct?
