How to load (and preload) fonts

Hi
I guess when working with Google Fonts you can just drop the &display=swap that comes on the end of the served URL. The font will behavior as a font-display: block;

ex. <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue" rel="stylesheet" />

For me, it worked pretty fine, without real notice of the delay, and giving - in my opinion - an experience way better than with FOUT.

More info on font-display property

2 Likes

I felt this post needed a clarification. Although, as of January, you cannot load otf files, loading other font files (ttf, woff, woff2, eot) is possible using the pattern on the following thread:

This seems to be an efficient way to load Google fonts as of now. Hopefully this will save someone the couple of hours worth of confusion I had when thinking a direct file import would not work.

2 Likes

Quick note . I found this simple method for resolving FOUT (Flash of Unstyled Text) in React

useEffect(() => {
  document.fonts.load("12px Merriweather").then(() => setIsReady(true));
}, [])

And then check isReady before showing your page content