22 different font classes is loading!

Community resources Bugs
1

Hi,

I know there have been discussions in the past about this. At the moment my site is loading 22 different font classes, thats 29 % of all requests. It makes up 414,5kb when using Pingdom speed tool

Is there a workaround for this now?

Read-only link: https://preview.webflow.com/preview/elitept?utm_medium=preview_link&utm_source=designer&utm_content=elitept&preview=e0373a118a581e3be522005245930324&mode=preview

Thanks in advance

2

mines only 127k, I have added 2 extra fonts but only specific weights.
Have you added any other google fonts and have you checked the project settings to see if you have in the past but need to remove them?

3

Looks like this: Dropbox - Skjermbilde 2020-08-07 kl. 15.59.16.png - Simplify your life

I only use Roboto and Font Awesome.

The fonts that is loading is probably from the styles panel. Haven’t uploaded them earlier.

4

Your picture shows installed fonts as AWS
I am not sure if mix/matching is an issue, probably isnt.
I wonder if not styling some text (leaving as default) as more fonts to the bundle.
You could change the body font so anything not styled has a default font that you use.

5

Hi @robertfit,

The line below, which I pulled from what I believe is your production page’s head section, shows the following fonts being loaded:

  • Oswald (6 weights/styles)
  • Open Sans (10 weights/styles)
  • Roboto (5 weights/styles)

<script type="text/javascript">WebFont.load({ google: { families: ["Oswald:200,300,400,500,600,700","Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Roboto:300,regular,500,700,900"] }});</script>

That could have something to do with not setting a font for the Body tag as @iDATUS mentioned, but I’m not 100% sure.

It looks like Webflow will load all of the weights/styles for any of the default Google Fonts you use from the Designer, so I would assume you’re using Open Sans and Oswald somewhere on the site too. This is an issue that’s been brought up in the forums and hopefully one Webflow will address soon.

I have a couple of sites that only use fonts from Adobe, and there are far fewer requests.

If reducing those requests is a priority for you, I’d recommend downloading and uploading the specific fonts you want to use, as mentioned in the thread below.

I hope that’s helpful.

6

Try remove unused classes too, as they might contain fonts you are not actively using anymore. I’m not sure but these might still result in those fonts/ font weights being loaded.

7

Hi @blakelam

I know I have used oswald and open sans before but the classes should be deleted.

I have now set roboto as font for the body tag without any effect

16 unnecessary requests and the additional 260-270 kb sucks.

I have uploaded the fonts I want to use in project settings → fonts. Are you talking about something else? Thanks in advance.

@ChrisT Have tried that but still no change

Know this his been an issue since 2017~, so I find it very unfortunate that this BUG still isnt fixed.

8

In the forum post I linked, @TG2 recommended uploading the fonts you want to use as Custom Fonts in Project Settings (even the Google fonts). They also recommended renaming the fonts you upload to be sure there’s no confusion that you’re using the uploaded fonts vs. the hosted versions.

This tool may be helpful with self-hosting Google Fonts.

Also, it looks like you assigned Roboto as the default font for a class called ‘Body 2’ rather than the pink ‘Body (All Pages)’ tag that will show up when you click ‘Inheriting x selectors’ above the class field.

1 Like
9

@blakelam

Thanks for the quick answer

So do you think that if I delete the google fonts and instead upload them as custom fonts that also will remove oswaldo and open sans? I dont see the logic but I can of course try. It wont hurt.

10

@iDATUS

AWS is just Font Awesome. Just renamed it :slight_smile:

Changed body font to roboto now.

11

So looks like the consensus on this top is the same.
What’s the new size if you run pingdom now?

12

I’m not sure of how to get rid of Open Sans and Oswald if they’re not being used and still showing up.

You could look through the source code on your published site to see if they show up in the CSS. I’m doubtful that removing Roboto from the Project Settings and uploading the font files will solve the issue with those other fonts.

1 Like
13

Thanks for the shout-out and link, @blakelam!

Agreed: Webflow’s font loader is a mess. It’s genuinely sad to see it still in this state, years later.

The fix for extra fonts that you aren’t seemingly using is, yep, as blakelam suggests, opening your Webflow CSS & using CTRL/CMD +F to find any lingering classes that still call the font. There are ways to expose CSS in Webflow’s designer, but it’s a bit of a pain.

I just use View Page Source and directly download the CSS file. You can unminify to make it more readable, especially for combo classes. Once you find errant classes, head back to the Designer and create a blank div, assign that errant class, and then switch its font.

image
image1660×713 73.2 KB

It took me 2-3 tries to find all the lingering classes, especially because of combo classes. Until Webflow fixes this, it’s unfortunately the only workaround I know.

2 Likes
14

@TG2

Thanks! It took me 3 minutes to reduce the number of font classes from 22 to 6 :slight_smile:

2 Likes
15

That’s great to hear, @robertfit. I’m so glad to hear the method still works. It’s a no-brainer change and Webflow must integrate a leaner font loader (as we discussed in the original thread here).

16

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