How to fix "Ensure text remains visible during webfont load" issue from Google speed insight?

Publishing help SEO
1

Hi all,

I am trying to fix one of the issues from my Google PageSpeed Insights result - “Ensure text remains visible during webfont load”.

image
image760×719 72.4 KB

Those URLs on the list is about Google Font, but I didn’t choose any in my Webflow setting page:

image
image1181×340 25.5 KB

Looks like there are a lot of class added to tag, then cause this issue🤔
37

Does anyone know how to fix this issue?

1 Like
2

If you copied any elements from another template, or used a template that has Open Sans and Montserrat fonts used anywhere, the fonts will be loaded and included as they are on your project.

If you shared a public link to your published project, I could tell you exactly where those fonts are being used. You can always look at your classes in the designer.

3

Hello @webdev i’m facing the same problem.

I started with a template for the first time and then gradually customized it until absolutely nothing remains of the template.

I have deleted all my fonts and imported only the one I use.

However, all these fonts still seem to download when the site is loaded.

Is it possible to solve this problem in another way than by copying and pasting the site into a “blank website”?

I have a lot of interactions that can’t be duplicated and it would take me a monster time to do it all over again.

According to Google page speed insight, the time only due to writing fonts takes almost 2 seconds to load, which is huge.

My website : www.poptribe.co
My read only link : Webflow - Poptribe

Best regards

4

You did not indicate which fonts belong and which ones don’t that you wish to remove.

5

hello @webdev !

I want to remove all fonts and only keep the “Muli font” I upload in the “custom font section” (bold, extrabold, regular…).

6

So you still are loading open sans and montserrat in your design. Here are a couple places I found quickly.

.demo-p.bottom {
    margin-top: 11px;
    margin-bottom: 11px;
    font-family: Montserrat,sans-serif;
    font-size: 12px;
    text-align: left
}

.demo-p.main {
    display: block;
    margin-right: 60px;
    max-width: 560px;
    padding-right: 60px;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    line-height: 20px;
    text-align: left
}

Maybe that will help you locate usage.

7

I encountered the same problem.

We uploaded the Lato font locally and changed all the fonts in Webflow Designer. Page Speed Insights tells me that I need to use font-display to Google Fonts even though I’m not using one anymore.

webfont
webfont1423×635 42 KB

I checked our CSS file but can’t see https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHh30AXC-qNiXg7Q.woff2 and other web fonts.

Our website is https://www.serphead.com

Can you help us?

1 Like