Fallback fonts for Google Fonts

Community resources General
1

Is there a way to set fallback fonts for Google fonts, so for example if someone from mainland China accesses the site and Google Fonts are unreachable?

2

Download the Google fonts you are using then upload them to your project. After they are uploaded you can set fallbacks. The uploaded fonts load from the WF CDN.

You may need to set the font-family if missing in the designer. Should work.

3

Thanks, will try. Any idea if the jquery etc would work in Mainland China?

4

I believe that’s a no on jQuery.

5

@webdev what about letting the font on Google and overriding the declaration?

For example, I add a google font, the declaration in Webflow is set to the body:

body {
  font-family: 'Maven Pro', sans-serif;
}

Then add that custom code that will address the fallback:

body {
  font-family: 'Maven Pro', fallback-font-name!important;
}
6

We were trying to avoid Google fonts in this case (loading them from Google). If you do it this way you get a big score improvement in lighthouse as well.

7

Gotcha thanks.

8

@webdev Slow process but it seems to be working. Any idea if there’s a way to minimise the jump to the manually installed font when the page loads? I’ve got it set to swap at the moment.