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

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.

7 Likes