r/web_design • u/Neloou • 6h ago

Loading custom fonts faster

Hello fellow designers,

I'm currently making an ecommerce website on wordpress.

Let's say I have 2 custom fonts, one I added in my site files and called it through CSS, and one google font I added in my function.php.

Problem is, they "flash" (from serif / sansserif basic font, to the fonts I want) for a split second before showing the right fonts.

Do you guys have any tips to make it so the fonts are loaded first and my text doesn't use normal serif / sansserif fonts ?

Thanks in advance.

3 Upvotes

100% Upvoted

10 comments sorted by

9

u/cmdr_drygin 6h ago

Yep. Add a link rel preload in your head before your CSS. Only works with woff2. Try to self host your font as well.

<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin>

1

u/Neloou 3h ago

The font that's not a googlefont is an otf, so I feel like it's not gonna work, unfortunately. I'm also using the .otf since I use font-variation-settings css rule. Thanks a lot for your time though.

3

u/CreeDorofl 1h ago

There are free online converters for OTF and ttf into woff/woff2. You should give it a try and compare the results.

1

u/cmdr_drygin 8m ago

Yeah check font squirrel or something like that.

2

u/570n3d 6h ago

Do you use font-display: swap; ?

2

u/metalbox69 4h ago

That can cause the fallback font showing while the custom font loads on slower connections leading to the flash. OP would need to use a preconnect (as mentioned elsewhere) and font-display:block so it doesn't flash. There is a tradeoff in that it will affect page speed performance but that is up to OP to decide.

1

u/Neloou 3h ago

font-display: block removes the wrong font, and lets everything blank until the proper font is removed. Which is not ideal, but maybe I can work around it, I still have to optimize images so maybe it will speed up the font enough afterward, also need to work on cache but I have to deploy the website on my client's host before doing anything silly. Thanks for your time, I'm sure it'll be much better afterward.

2

u/LouieValkhof 4h ago

On 570n3d's question: swap is actually what causes the flash you're seeing. It tells the browser to show the fallback right away and switch once the font arrives. And if your functions.php enqueues the usual fonts.googleapis.com URL, it most likely ends in &display=swap, so the Google font does this by default.

If you'd rather have no visible switch at all, use font-display: optional together with the preload cmdr_drygin posted. The browser waits a very short moment (around 100ms), and if the font isn't there yet it keeps the fallback for that page view instead of swapping mid-read. With a preloaded woff2 it's usually there in time, and from the second page on it's cached. Easiest is to download the Google font as well and self-host both, so you write the @font-face for each one yourself.

2

u/kemalios 3h ago

Timing is half of it. Fallback fonts have different metrics, so even a fast swap shifts the layout and you see it. Add an @font-face for your fallback with size-adjust and the ascent-override and descent-override values matched to your custom font, and the switch stops jumping. Pick a metrically close fallback too, Arial for most grotesques.