Open sans - Webflow adds unused fonts file requests - entire site

Hi @cyberdave, thanks, much appreciated. Any idea what sort of timeframe we’re looking at?

Cheers, Graham

Hi @GrahamCox, thanks, well I do not have a timeline yet, we are investigating why the style which was changed in the designer is still having a style with open sans being used.

One thing I can tell you though, is that even once this is fixed, this will buy you a small performance boost, but the majority of the issues with the site load time is not due to the fonts, those are pretty small anyway and take up only a small percentage of the requests on the page.

In my testing, I was able to get the site down from 101 to 39 requests and that is including the font variants which are being downloaded.

The site speed without the custom code and the quicksand fonts loaded:

Came out to a page load of 882ms, but that varied in my tests from 662ms to 1.2s depending on from what region in the world you are in:

Without the custom code, there was also passing grade on performance insights:

Again, that test included those open sans font downloads.

Now when I test on the actual published site, the results are far different with the custom code, the number of requests are high and there is script that could be optimized as shown in performance insights:

Performance Insights on the published site:

The combine external javascript points to the custom code that is being used on the site that should be looked at:

It does not appear that any of those scripts are being loaded from Webflow.

Once we help resolve the issue why the Open Sans font cannot be removed from the site, that will help reduce total requests by 11 and will reduce page download by 180k, so you can expect about a 10% performance improvement once the font issue is resolved.

Let me know if any questions, I am here to help.

2 Likes

Agree. The fonts issue is “small” part her. A lot of JS custom code - calls.

Hi @cyberdave

Thanks very much for taking the time to provide such a detailed reply. That’s very useful. I’ll have a look at all the external scripts being pulled in and see what we can reduce/merge.

If you can let me know as soon as the Open Sans bug is fixed, I’d really appreciate it.

Cheers, Graham

Thanks Siton_Systems for all your help, it’s much appreciated.

Do you know any developer who could expertly merge some of our code snippets for typeform, trustpilot etc? Obviously will pay. Thanks

Hi @cyberdave, two questions please:

1 - In your detailed reply, your screenshot shows the performance insights (with the 8 trustpilot files, 3 typeform files etc) . Which tool is that please?

2 - Can we download a google font from the google fonts page, and upload it to webflow, rather than the default method of selecting it inside Webflow’s settings panel? If yes, will that help with site speed by reducing the server requests?

Thanks

Hi @GrahamCox

1 - I believe Dave used https://tools.pingdom.com/

2 - Yes you can definitely take this route and it may give you a speed bump :slight_smile:

1 Like

Great, thanks @Brando

2 Likes

Hi @cyberdave @Brando

Can you tell me if there is any ETA from your developers on the Open Sans font issue bug yet? Appreciate it’s not the biggest issue with our page speed, but nevertheless a 10% improvement is not to be sniffed at and and would really appreciate an early fix if possible. Thanks.

Graham

It will take some time to look into those and find a proper fix, so we don’t have an ETA.

(I’m a webflow dev, working support today.)

1 Like

A quick way to find all classes using a specific font is to open the CSS file generated by webflow. Just open your website in the browser, open the inspector, go to network, and look for the css file. Open it in a new tab and search for the font. Then restyle all the classes that you found to not use the font anymore.

Painful, but that’s how we did it when we changed fonts in the past.

2 Likes

Great idea but not for a big site + Anyway if I use “open-sans normal” webflow adds the entire family.

I think this is specific open-sans issue (Other fonts under designer font list are system-fonts). Its easy to manage custom fonts (Remove/add for the entire site by one click).

1 Like

Just wanted to check in on this, our site is also showing Opens Sans, but it is not being used anywhere on the site.
https://preview.webflow.com/preview/pivotal-it?utm_source=pivotal-it&preview=06cc96718c14c579fb7089680bf9ba91

Same issue with Montserrat google font (Use once get the entire family):

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

Hello,
This thread on the topic has been closed - but I did not see an update, ETA or solution posted.
While waiting for a fix/ETA from the previous thread, I went through he CSS and found/restyled the single class I found using Open Sans - but I’m still having issues… the image below from PageSpeed Insights shows Open Sans (as well as some weights and styles of Montserrat that are not actually used on our site).


Any insight into this would be greatly appreciated!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Thanks for pinging us on this @Rowananye. I’ve gone ahead and merged this topic with the existing one, and reopened it.

Just for a quick update — we don’t yet have a fix for this, and I’m not able to provide an exact timeframe for when this will be resolved.

​Thanks in advance for your patience here.

This is the real issue. I would wager than webflow have opted for a “make sure it works everywhere” approach here. They load the full family to get around having to build tons of additional logic to sniff out what weights to pull in.

1 Like

You know this might actually be a Google Fonts bug… I’m playing with trying to replace the webflow fonts with a custom import, and it looks like the link that google fonts creates to select the font familes and weights also includes a lot of crap that’s not selected in the UI tool.
For example this include link ::
https://fonts.googleapis.com/css?family=Montserrat:300,300i,500,700|Vollkorn&subset=latin-ext
also includes Cyrillic and Vietnamese… Another avenue to explore for the webflow team…

2 Likes