Streaming live at 10am (PST)

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

@daxliniere = Actually It is not Webflow that loaded that insecure font. It is the initaudioplayer-1.css file that is.

Line 1 -> `@import “http://fonts.googleapis.com/css?family=Open+Sans|Noto+Sans”;

So this is an issue with your custom code - not webflow.

Thanks Jeff @webdev , I discovered and clarified my post a few hours before your post.

Thank you for checking this out for me and letting me know. This is what is so great about the WF forum community.

All the best,
Dax.

Any progress on this bug? We only need 8 font files; Webflow is somehow calling 12.

On our site, Webflow requests 4 extra fonts (100 + 100i + 300 + 300i Lato), even though they do not exist in any classes (confirmed directly in the CSS).

This bug is why fonts represent nearly ~25% of our total site size and why fonts have the highest number of requests.

I’m hopeful Webflow’s research is going well and we’ll see fonts called properly (especially for smaller websites who serve low-bandwidth users, where every 100 KB counts).

Sad to see this bug is 12+ months old.

Hi @TG2 - if you look at my response in this topic on July 20th, you will see how to limit what is loaded on a font. See if that resolves your issue. Go to project settings -> fonts.

Thank you for the reply, @webdev , and appreciate the suggestion. Do see the July 22 post by @Siton_Systems :

The menu you mentioned on July 20th is only available for user-added Google Fonts. We’re using Webflow’s Designer default Google Fonts.


This bug, to my understanding (and what we’re experiencing), only affects fonts are already in the Designer: Webflow incorrectly calls every single style.

For example

  • Open Sans - 10 styles (as seen in the OP title)

  • Montserrat - 18 styles

  • Lato - 10 styles

  • Merriweather - 8 styles

If you use even one style each of the above fonts, instead of Webflow downloading those 4 font styles, Webflow will download the total combination of 46 styles. That’s a worst-case example, but it adds up. :pensive:

Right. By selecting them manually you end up overriding the default kitchen sink Webflow implementation in the designer. At least that is what I have used to stop the behavior in the past.

I think we’re having a bit of a miscommunication. Or are you using a Webflow beta perhaps? The default Designer fonts are not in the dropdown.

You can see Webflow’s default Designer fonts in this dropdown? Montserrat, Lato, Merriweather, etc?

Your July 20th post is about IBM Plex Sans–not a default Designer font. That’s a user-added Google Font, which can be freely customized. Default Designer font styles (like Lato), as far as I can tell on the Webflow I’m using, cannot be managed in the dropdown.

//

Adding a bit of fat to the fire: even after you remove the fonts, Webflow still calls them, which baffles me the most. See the original post at the top for a quick test:

There could be a lingering class in this baffling example, but, still: using one font style of Montserrat shouldn’t cause 17+ unneeded font style requests. The underlying bug (i.e., not intended result) remains.

You are correct. I was under the impression on a blank load that I could start with my selection in project settings and provide the selection and overrides. I just went back to look at the project I had tested with and noticed I overrode the Webflow designer font with a custom code embed (google font load).

The default behavior from Webflow should be to allow full overrides of ALL fonts in the designer.

Sorry for the mistake and the time waste. It happens. :slight_smile:

1 Like

Oh, no worries. It does happen! Webflow font management is actually pretty good, so this bug comes as an unexpected (and unwanted?) surprise.

And, I agree! I don’t mind searching the CSS, but if we could just deselect them right from Settings, that’d save some time definitely.

No, no need to apologize. I know others had the same train of thought, so it made me double-check that I’d done my due diligence, too. :smiley:

Unfortunately for the Webflow customers who reported this over a year ago, Webflow now states this “bug” is a feature and is working as intended. Consequently, the bloated font loader will not be fixed any time soon. From my email chain, here’s the direct quote from Webflow Technical Support (emphasis original):

  • Currently, it is intended for the built-in Google Fonts within the Designer to upload the full font family whenever the specific font is chosen. This doesn’t apply for the Google Fonts applied through the Font tab in your Webflow project settings; where you have control over what is loaded.

  • There are some plans on providing more control over Font styles in the Designer in the future. But for now, this is intended as it gives the Webflow Designer flexible and quick use of the desired pre-loaded font without having to configure.

Which is a startling and discouraging conclusion, particularly when the same company claimed in a 2015 blog post “Web typography 101”,

For web design, you’ll want to pick which weights you use carefully: loading all nine weights of Exo 2 could seriously slow down your pages.

For anyone building a website in 2019 2020 2021 in Webflow and you use the default Designer fonts, I’d highly recommend completely avoiding Webflow’s default, bloated font loader in Designer, especially on light and/or high performance sites.

Using the Lato font in Designer via Webflow’s 2019 2020 2021 Default (Bloated) Font Loader:
image

Using “Leto”, a manually uploaded font with only the weights we use, on the exact same site:
image

By avoiding Webflow’s bloated font loader, our very light site now is now 20% smaller with 30% fewer HTTP requests. Likewise, the font payload is now 73% smaller and we’ve dropped total external font requests by 71%. Turns out 2015-era Webflow was onto something! :wink:

These improvements are not paper gains: Webflow was downloading 8+ extranneous font weights that we never used. I’ll be writing up a Tips & Tricks tutorial for this soon, but here’s the Spark Notes version:

  1. Download only the needed font weights of your Google Font from here. Ideally, only use woff2 files (+ woff for IE compatibility: will only be called on IE clients).

  2. Critically, rename the fonts so there are no conflicts later on.

  3. Upload them in the Fonts tab of your Project Settings, ensure you chose a different name so Webflow can recognize it’s a separate font, and then go to your project & switch any classes / elements using “Lato” (or whatever default designer font you were using) and instead select “my-renamed-version-of-Lato”. You may need to trawl through your CSS with CTRL/CMD+F and double-check any lingering/unused classes still using the “Lato” (original spelling) font. Unminifying the CSS will help readability and let you find unexpected combo classes…ask me how I know, heh.

  4. Enjoy ~5 to ~40 fewer HTTP requests on your live Webflow site.

For most content-heavy sites (a large number of images, external scripts, videos, etc.), don’t expect any miracles. But, until Webflow gets their Font Loader to something more responsive and modern, I wouldn’t hesitate to do this on any light websites.

6 Likes

Any updates on this thread? Still no fix…

1 Like

Any updates on this thread??? Also coming across this issue and feel pretty stuck… Webflow is loading multiple different typefaces with multiple different weights into my project and none of them are even being used anymore. I also cleaned up all of my styles to make sure none of the Google Fonts were referenced.

3 Likes

Yes. Problem still exists. Monster - rat font is a plague right now…

3 Likes

I’m sorry to say this “bug” (i.e., Webflow remains wishy-washy whether this is actually going to be fixed) remains open: Webflow’s very-bad-design baggage is painful to see.

If you’re needing to push to production soon, my workaround above is incredibly time-consuming, but it does become a permanent solution.

I lost a lot of good will about Webflow after this insane saga and their hypocritical stances.

Simply put, I do not think Webflow has anywhere near the QA & testers needed to support their bloated codebase. Or, they do and they just don’t know how to manage them.

5 Likes

Any updates on this? I’m still seeing

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic%7CManrope:regular" media="all">

My site loads and only needs Manrope.

1 Like

Holy shit I just had a peek at my site after discovering this issue. Fonts being downloaded are well over a third of my initial page load. I’m literally using two font types / weights and it’s fetching 38.

2020-04-16 17_24_40-

This needs to be addressed yesterday, Webflow. You’ve known about this for almost two years. Your entire business is made on letting people design fast, easy websites - then you pretty much crunch most of it by bloating them with fonts. What are you doing?

7 Likes

So it’s been over two years…

Any update to this? Seems to be taking a while…

2 Likes

Also have the same problem. I get 22 font requests which is a third of all my requests. They are really negilent in this case. it should have been already fixed a year ago …

1 Like

Any movement on this, I have 1.2 MB of font files that I don’t use on the site. I have even looked through the code and have changed or removed the font families that ant being used and they still show in the code.

2 Likes

Webflow should genuinely prioritize this issue–it’s got a 100% hit rate. Every Webflow site is affected, as long as it uses Webflow’s default fonts.

I’m sure, in 3-5 weeks / months / years, we’ll get Webflow’s curt and wholly unsatisfying “answer” that hides 95% how this bug has lasted this long. “See, this API here and that backlog there and this team here and that team there.”

At this point, a warning in Designer is warranted.

//

If you’re looking for a workaround for your specific site, have you manually checked the Webflow CSS file?

How to get there, if you haven’t checked already: Go to a page on your site, press CTRL+U, and look for (CTRL+F works great) for .css (with the period). It should find this, at the very top:

<link href="https://uploads-ssl.webflow.com/blah-blah-blah/css/blah-blah-blah.min.css" rel="stylesheet" type="text/css"/>

Open that *.css file, copy all the text, unminify it, and then CTRL+F for the fonts you’re trying to remove. It should give you the class name (or combo class); then, make a new div, give it that offending class, and remove the problematic Google font.

There may be an easier way, but this is the old-fashioned way and it helped me completely remove Google Fonts.

2 Likes