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
image.png760×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
image.png1181×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 : https://preview.webflow.com/preview/yacines-stunning-project?utm_medium=preview_link&utm_source=dashboard&utm_content=yacines-stunning-project&preview=688c4a2b572bbffbd15aacb8da5e1610&mode=preview

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.