Streaming live at 10am (PST)

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

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).
open%20sans%20issue
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

@Ryan_Cole

Thank you so much for this information! This is definitely helpful :bowing_man:

Another avenue to explore for the webflow team

I’ve passed along your findings to our engineers so we can do just that — thanks!

Please fix this asap!!

Can we somehow remove this from the project manually? Ubuntu font I once used is being loaded all the time!

Hi @cheechee

Thank you so much for posting about this.

I wanted to give a quick update that the team is looking into this issue and, we’ll update this thread as soon as we have an update.

Thanks in advance for your patience!

2 Likes

Hello,

anything new here?

Thanks

1 Like

C’mon guys. The whole point of webflow is so that we designers can build our own sites and not depend on engineers to tell us when we can use differently weighted fonts. If you’re not going to support weighted fonts, then PLEASE give us a workaround so we can use the fonts we desire (Open Sans Thin).

And as much as you engineers would like to think LATO is the same as Open Sans-- it’s not. :slight_smile:

Is there any news or updates for this ongoing font issue? As you can see from the attached image our font content is over 590 KB / 67% in size!
In my original post, Open Sans was the culprit, but it is no longer showing. Now it is Exo and Droid Sans (neither used on our site), as well as unused styles and weights of Montserrat.

1 Like

This is a critical Web performance issue that needs to be resolved by the Webflow team.

It looks like Webflow includes all variations of an available Google Font (like Montserrat) when a site is published, even if the site only uses one variation (e.g. weight 400 - Normal). Variations of these available fonts can’t even be individually selected and excluded from font settings.

It results in multiple downloads of all font variations, which are not even used for the site, causing extra size and load time.

Here’s a performance report, which shows all variations of Montserrat font being included (see under Waterfall > Fonts): https://gtmetrix.com/reports/nav-test-business-starter.webflow.io/i9npgfQm

@vicnick - If your situation is critical, and you can’t wait for font-weight and language options when choosing Google fonts, you have two alternate options.

  1. Use Adobe Fonts and build a unique kit for your project.
  2. Load Google Fonts in your sites Custom Code and add a simple stylesheet to handle the defaults.

Example with #2

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700&display=swap" rel="stylesheet">
<style>
  body {font-family: 'Open Sans', sans-serif;}
  h1,h2,h3,h4,h5,h6,.msfont {font-family: 'Montserrat', sans-serif;}

</style>

Hope that helps you get through your current issue.

1 Like

You can head into project settings, fonts, and make granular selections for your needs.

CloudApp