Is my site loading a huge number of fonts?

You can view the site here (I haven’t yet pushed to our domain)
https://hamsapay-1c-0035030efde48-2e815e0d6844c.webflow.io/

When I use lighthouse in a chrome browser to look at performance on desktop, there is a section that appears to list a about 40 woff2 font files with strange names:

So I originally was using Adobe fonts, and so I thought this might be the problem, so I deselected my Adobe font web project and uploaded two fonts from the Degular typeface, Thin and semi-bold.

My questions are: Is my site indeed loading all these fonts, and can I get rid of them? Are they maybe still coming from Adobe even though I have them set to none?


Here is my site Read-Only:

https://preview.webflow.com/preview/hamsapay-1c-0035030efde48-2e815e0d6844c?utm_medium=preview_link&utm_source=dashboard&utm_content=hamsapay-1c-0035030efde48-2e815e0d6844c&preview=65cf738ea0e47bb552b97d2d5c6c128c&mode=preview

1 Like

You have 18 woff files loading on your page for the “Montserrat” font which looks like a Google font.

If you look at the font specimen page below for the Montserrat font there are indeed 18 files associated with the Montserrat font which means you are loading all of them. I am guessing that you don’t actually need to use all of them.

You are also loading 10 “Opensans” fonts.

One way to reduce this is to only load the fonts you are using. For example you could just load Montserrat regular 400 and Montserrat bold 700 if you don’t intend to use any italic or “light” versions of the fonts etc. Analyze which fonts you need on your website and then just load those particular fonts.

I think the strange names are added by the Webflow publishing system - it does the same for images when it automatically creates images of different sizes from a single user uploaded image which are then served up responsively depending on the screen size of the device being used.

You should be able to delete fonts in the fonts area of the project settings. If they are still being loaded after you delete them, I would assume this would be a question for Webflow support.

@britishchap this is what is so perplexing, I’m not using google fonts. I’m only using two fonts from one typeface in the whole design. It seems webflow is loading these google fonts. And in the source, I see one super long class that I can’t see in the Designer:
class=“w-mod-js w-mod-ix wf-opensans-n3-active wf-opensans-i3-active wf-opensans-n4-active wf-opensans-i4-active wf-opensans-n6-active wf-opensans-i6-active wf-opensans-n7-active wf-opensans-i7-active wf-opensans-n8-active wf-opensans-i8-active wf-montserrat-n1-active wf-montserrat-i1-active wf-montserrat-n2-active wf-montserrat-i2-active wf-montserrat-n3-active wf-montserrat-i3-active wf-montserrat-n4-active wf-montserrat-i4-active wf-montserrat-n5-active wf-montserrat-i5-active wf-montserrat-n6-active wf-montserrat-i6-active wf-montserrat-n7-active wf-montserrat-i7-active wf-montserrat-n8-active wf-montserrat-i8-active wf-montserrat-n9-active wf-montserrat-i9-active wf-active js-focus-visible” data-js-focus-visible=“”>

Here is my font settings for google fonts

hi @superreggie my suggestion will be to change your fonts global setting. You can do that on any page but I will recommend to do that on your Style Guide page. Your setting for RT element is set correctly to your uploaded font but I still can see some elements that have globally set Sans Serif or doesn’t have selected any font family. This mean that Sans Serif is loaded because is set in global settings and you just overwriting this font setting on your element later with your custom fonts. When you set fon family on each Global element (pink) your fonts load should be fine.

@Stan How do you do I get to that global setting on a page? You just change the body tag settings?

hi @superreggie here is how to but there are informations on Webflow University feel free to read/watch these as WU is great resource of basic informations about how to work with this platform.

https://cln.sh/ywRTiT

Hi. You said you were not using the Montserrat font on your website but actually you are. If Webflow finds this font being used anywhere on your site it will include it in the published build.

I found this on your 404 page. Hopefully if you change the font in this place it should solve your issue however if you continue to have the issue after removing it from your 404 page you may need to go through your other pages carefully to make sure it is not included anywhere else on your website.

2 Likes

Hi @britishchap,

How did you locate where that font was being used? I assume you didn’t go into every page and check every element… I’m having the exact same issue (with the Bitter font in use as well apparently, somewhere) and I haven’t got a clue where it’s in use…
Is there a way this can be done easily?

Thanks in advance…

I’d love an answer to this too. There must be a “find” feature chrome extension or something?

You can search your CSS on the published site using dev tools. A search for the font name would show styles where that font is assigned.

1 Like

I have the same problem.


When I click the initiator:

I don’t use Google Font, only a font custom uploaded.
Why it is happening?

hi @Adriano_Azos the best way to get help is to follow basic forum Guide rules (pinned on top) and share read-only as I have doubt that anyone owns crystal bowl. :slight_smile: