How to load (and preload) fonts

🙋Get Help
34

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
35

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
36

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

1 Like
37

First, make sure you have the font files (usually in formats like .woff, .woff2, .ttf, or .otf) that you want to use on your website Century Gothic Font Family. You may obtain these files from the font’s official website or other reliable sources.