Font takes a noticeable split second to load. Is there any way around this?

user_5606498 0
Viewed 663

I'm using a google font in my react project, and whenever I open up my site, there is a very noticeable split second where my text that uses the font initially loads with a seemingly different font, then changes to the correct font right after.

What is happening here? And how do I prevent this from happening?

Loading font in public/index.html

<link
    href="https://fonts.googleapis.com/css2family=Bebas+Neue&display=swap"
    rel="stylesheet"
/>

adding the font to a class in src/index.css

.bg-header {
  font-family: "Bebas Neue", sans-serif;
  color: darkorange;
  text-decoration: underline;
  position: absolute;
  bottom: 10%;
  left: 5%;
  font-size: 75px;
}

html tag in react component

<h5 className="bg-header">{getHeader()}</h5>
google-fonts reactjs css html
2 Answers

We can use the ‘Preload’ resource hint to tell the browser that we want our font files to start downloading right away, not after the CSS is parsed. This helps loading the font faster.

Most major browsers support preload and other resource hints (Firefox is also currently in development to add this). Adding this to your HTML would look like this:

<link rel="preload" as="font" type="font/woff2" 
  href="<FONT LOCATION>" crossorigin>

Machmetrics

user_142512210

CSS: font-display

If you really don't want the font to swap you can use:

body { 
  font-display: block;
}

Or probably a more user-friendly way is:

body { 
  font-display: fallback;
}

However, this can hurt your rankings in search engines and you should read up on why the fonts are set to swap by default. The default setting for the font-display property is auto.

You can read about the CSS font-display property here https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display.

Google Fonts display property

In your google fonts import, you can actually specify the font-display setting in the font URL:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

Notice the display=swap part of the URL.

Other resources

These articles will also be very helpful:

user_3646990
Related