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

system · December 17, 2018, 7:39pm

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

Rowananye · December 20, 2018, 7:59pm

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)

Brando · December 21, 2018, 12:21am

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.

Ryan_Cole · January 15, 2019, 1:06pm

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.

Ryan_Cole · January 15, 2019, 1:17pm

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…

Brando · January 15, 2019, 4:45pm

@Ryan_Cole

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

Another avenue to explore for the webflow team

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

cheechee · January 27, 2019, 4:56pm

Please fix this asap!!

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

Nita · January 30, 2019, 5:48pm

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!

cheechee · February 18, 2019, 2:00pm

Hello,

anything new here?

Thanks

chippwalters · February 25, 2019, 3:15am

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.

Rowananye · July 1, 2019, 3:41pm

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.

vicnick · July 11, 2019, 7:06am

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

webdev · July 11, 2019, 8:12pm

@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.

Use Adobe Fonts and build a unique kit for your project.
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.

webdev · July 20, 2019, 10:38am

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

Rowananye · July 22, 2019, 2:39pm

I created an Adobe Font kit with the three weights of Montserrat that we use on our site (connected via API). Even after the switch, Google Fonts is still downloading unused weights and fonts that have never been used on our site.

Siton_Systems · July 22, 2019, 2:46pm

The issue in my opinion related to the “build-in // famous” google fonts come with webflow (Like open-sans, Montserrat and so on). This is not related to fonts you added under site-setting.

webdev · July 22, 2019, 2:51pm

Often while designing, a font is selected and a new class is created. That class will persist, even when you deleted the element. If the class is not deleted, the font specified in that class, will cause the font to load.

This is also very common when copying projects, or elements from other projects.

I normally review the source CSS to find unexpected font usage. I then go back to the designer and update those elements settings.

daxliniere · August 25, 2019, 10:28am

EDIT: I incorrectly stated that Webflow was loading fonts that weren’t used on the site, but it turns out that a third-party script was loading it in this case.
My original post kept for context for my following post.

Original post: You know what’s even worse? Webflow loads Open Sans from a non secure (http vs https) source, which means that Chrome will display the warning to users “This site is attempting to load scripts from unauthenticated sources”

daxliniere · August 25, 2019, 10:38am

Okay! I found a workaround for this, assuming you don’t use Open Sans font.
(javascript - HTTPS. Solution for "This page is trying to load scripts from unauthenticated sources" from third-party sources - Webmasters Stack Exchange)

Add this code to your < head > to block loading of those fonts and get rid of Chrome’s ugly “this page is trying to load scripts from unauthenticated sources” warning.

<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content" />

EDIT: I believe this is actually a Google Fonts bug since the Webflow code never explicitly calls Open Sans. WF calls a Google Fonts API which must in-turn call the individual fonts, some of which are being served from insecure locations.

Checking my site’s Waterfall graph on WebPageTest Test - WebPageTest Details , I could see that unsecured content was being loaded, specifically Open Sans on lines 16 and 121.

This is now gone using the code above: