Streaming live at 10am (PST)

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


#1

I do the test on an empty site.

Live URL:

http://new-landing-page-94e5db.webflow.io/

Whats happen?

step-1: Arial

image

Add heading “hello world” with Arial font. Go to speed test:

Looks great (HTML file - jquery - webflow custom js - webflow custom css):

Step 2 - Change arial font to open-sans extra bold

Now do speed test - the file req jump from 4 to 16 (extra 12 calls - entire family for the entire site)

Sub-problem - Webflow load the entire family, although I used only open-sans 800.

http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic

Step 3 - Change the font again to system font - back to Arial

Change the heading to ARIAL - Do speed test - webflow call to open-sans (But i don’t use this font anywhere):

Related:

I find this issue when i try to solve this Forum Q:


Need help with page speed
#2

Hi @webflow @pixelgreek

Thanks @Siton_Systems for reproducing this, I really appreciate your help.

This seems to be quite a major bug and hurting site speed significantly. I can no longer find any page using open sans yet all 12 fonts are being downloaded. Please can you prioritise a fix for this.

Thank you

Graham


#3

Hi @GrahamCox, thanks for your post. I can see at least one font style using Open Sans, it is the class .funnelsectioncookiemsgpara

I would create a new element, then add that class, then update the font, then delete the element. The fonts will get downloaded if those are used in classes.

I am continuing to check on the site speed and multiple font download and will provide an update once I have checked that out.


#4

Hi Dave,

Thanks for getting back to me. Where do you see open sans for that class? In webflow it’s showing as Quicksand. See screenshot:


#5

Hi Dave

Further info. So regardless of the fact that class showed as quicksand for me, I changed it to verdana, created a new paragraph, applied the class, published and Opensans and quicksand were still showing in the html source. I deleted cache, tried again still Opensans and Quicksand. After that I just deleted that element, checked the class no longer existed in the styles panel, published, deleted browser cache in chrome, visited site and Open Sans still showing. See links below.

The class was on this page:

Here it is in webflow.
https://www.dropbox.com/s/go2aqfa5r7q7k43/Screenshot%202018-09-17%2006.46.59.png?dl=0

The site only uses Quicksand though quite possible there’s a class using Open sans somewhere. But why wasn’t Verdana showing in the html? And in any event, doesn’t Siton_Systems bug report prove there is a bug?

Thanks for your help.


#7

Hi @GrahamCox, thanks for your info. Yes, I was checking into this further and can see that the Open Sans font is still loading, there seems to be a ghost font style still being applied on the published css only.

I have reached out to our team to get their help to get to remove the ghost opens sans font styling from the project.

@Siton_Systems, I am also checking to see why all font variants are getting loaded when only one variant is used in the design.

Thanks in advance.


#8

Hi @cyberdave, thanks, much appreciated. Any idea what sort of timeframe we’re looking at?

Cheers, Graham


#9

Hi @GrahamCox, thanks, well I do not have a timeline yet, we are investigating why the style which was changed in the designer is still having a style with open sans being used.

One thing I can tell you though, is that even once this is fixed, this will buy you a small performance boost, but the majority of the issues with the site load time is not due to the fonts, those are pretty small anyway and take up only a small percentage of the requests on the page.

In my testing, I was able to get the site down from 101 to 39 requests and that is including the font variants which are being downloaded.

The site speed without the custom code and the quicksand fonts loaded:

Came out to a page load of 882ms, but that varied in my tests from 662ms to 1.2s depending on from what region in the world you are in:

Without the custom code, there was also passing grade on performance insights:

Again, that test included those open sans font downloads.

Now when I test on the actual published site, the results are far different with the custom code, the number of requests are high and there is script that could be optimized as shown in performance insights:

Performance Insights on the published site:

The combine external javascript points to the custom code that is being used on the site that should be looked at:

It does not appear that any of those scripts are being loaded from Webflow.

Once we help resolve the issue why the Open Sans font cannot be removed from the site, that will help reduce total requests by 11 and will reduce page download by 180k, so you can expect about a 10% performance improvement once the font issue is resolved.

Let me know if any questions, I am here to help.


#10

Agree. The fonts issue is “small” part her. A lot of JS custom code - calls.


#11

Hi @cyberdave

Thanks very much for taking the time to provide such a detailed reply. That’s very useful. I’ll have a look at all the external scripts being pulled in and see what we can reduce/merge.

If you can let me know as soon as the Open Sans bug is fixed, I’d really appreciate it.

Cheers, Graham


#12

Thanks Siton_Systems for all your help, it’s much appreciated.

Do you know any developer who could expertly merge some of our code snippets for typeform, trustpilot etc? Obviously will pay. Thanks


#13

Hi @cyberdave, two questions please:

1 - In your detailed reply, your screenshot shows the performance insights (with the 8 trustpilot files, 3 typeform files etc) . Which tool is that please?

2 - Can we download a google font from the google fonts page, and upload it to webflow, rather than the default method of selecting it inside Webflow’s settings panel? If yes, will that help with site speed by reducing the server requests?

Thanks


#14

Hi @GrahamCox

1 - I believe Dave used https://tools.pingdom.com/

2 - Yes you can definitely take this route and it may give you a speed bump :slight_smile:


#15

Great, thanks @Brando


#16

Hi @cyberdave @Brando

Can you tell me if there is any ETA from your developers on the Open Sans font issue bug yet? Appreciate it’s not the biggest issue with our page speed, but nevertheless a 10% improvement is not to be sniffed at and and would really appreciate an early fix if possible. Thanks.

Graham


#18

It will take some time to look into those and find a proper fix, so we don’t have an ETA.

(I’m a webflow dev, working support today.)


#19

A quick way to find all classes using a specific font is to open the CSS file generated by webflow. Just open your website in the browser, open the inspector, go to network, and look for the css file. Open it in a new tab and search for the font. Then restyle all the classes that you found to not use the font anymore.

Painful, but that’s how we did it when we changed fonts in the past.


#20

Great idea but not for a big site + Anyway if I use “open-sans normal” webflow adds the entire family.

I think this is specific open-sans issue (Other fonts under designer font list are system-fonts). Its easy to manage custom fonts (Remove/add for the entire site by one click).


#21

Just wanted to check in on this, our site is also showing Opens Sans, but it is not being used anywhere on the site.
https://preview.webflow.com/preview/pivotal-it?utm_source=pivotal-it&preview=06cc96718c14c579fb7089680bf9ba91


#22

Same issue with Montserrat google font (Use once get the entire family):