Google Fonts Questions

Design help General
1

Hi

In my webflow website exported code, google is downloading all these fonts…

Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic",“Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic”,“Roboto Condensed:regular,700”]

My Q’s are:

1 - Does that list the fonts that are actually being used by my site or are they what I originally selected on the Fonts tab within webflow?

2 - If the latter, what’s the best way to work out which are being used and which aren’t?

3 - Is the list of google fonts above a lot for a site would you say? How much load time impact could this be having? My site currently loads at 3.5 seconds in gtmetrix.com.

Thanks for your time.

Graham

2

Hi @GrahamCox

1.) The code you see is the list of fonts you picked in the Fonts tab through the Webflow dashboard. This happens even if you haven’t used them in your design.

2.) The best way is to keep track of what fonts you are using as you design the site. Don’t use to many fonts. Using two is usually enough, one for headings and one for body copy.

3.) It depends what you are using the fonts to do (if they are necessary for the design). Seeing three fonts isn’t unusual however I don’t know why you would need that many different versions of italic.

Three fonts shouldn’t be a problem for performance, but it is always a good idea not to have any unnecessary dependencies being loaded. So If you aren’t using the fonts don’t load them. In the gtmetrix.com test they have a tab for your load timeline. It will show you what is taking the longest to load.

The fonts should be taking milliseconds.

3

Hi @GrahamCox, in addition to what @Davidn has mentioned (thanks @Davidn), I would check that you have removed all Styles which are unused, but yet exist, from the Style Manager panel. Click the Clean Up Styles button and remove all styles not in use. If a style exists, even not used, and that style is having a font definition, then the font will be included, even if you do not use the font.

I hope that helps. The less Google Fonts you use, the better performance you will have, but three fonts should not be a super huge performance hit. What is the published link? I can check a load time per content type analysis to see where the bottleneck is.

gtMetrix, Google PageSpeed, Pingdom etc all report performance indicators differently. I find Pingdom to be a pretty good indicator for real-world performance for site visitors, and it provides a lot of info in the page analysis to help you quickly reduce the bottleneck where possible.

Cheers, Dave

4

Hi Dave

Sorry for the late reply, I’ve been away. Thanks so much for the advice. The site is mortgagebrokerglasgow.co.uk

5

Hi @GrahamCox, here is some stats I pulled up, hopefully this will help you to understand where the bottlenecks are:

Overall site weight: 1.2mb (not bad, well within normal)

While loading page I took notice of the following:

Time spent per content type

40.83% images – suggestion to compress images on site (although it is only taking 353kb now, so not much)
32.69% scripts – Higher than average, should be around 15% max for better site performance, suggestions:

a. try to reduce the number of scripts executing on the page from third party services

Of the scripts that run, 28.3% are run for third party services. The page has to load different scripts such as AddThis, Hotjar.com, Aweber. The remaining 7.23 percent are for other scripts (modernizer.js, webflow.js, google adwords conversion, google tag manager, jquery)

b. There is a total of 429kb out of 1.2mb of google fonts downloading, so reducing the number of fonts will help. Also reducing the number of fonts, will reduce the number of requests the page is making to Google.

css and html are not really an issue in terms of speed, with the total size around 37.5kb. If you are hosting this site on an external server, you can minify your css and html to further reduce the size. Currently your site is NOT minified.

Lastly, I did not see the Webflow site that your main site is based on, as published. One other factor could be actual server performance. If you were to publish your internal webflow domain, I can run a quick overall speed comparison.

I hope this helps :slight_smile: Cheers, Dave

1 Like
6

Hi Dave

Thanks so much for taking the trouble to look at this. Re b and only 429kb out of 1.2mb etc, how do I remove the fonts that I’m not actually using on the site. That looks like it could be a big win there.

Also, how do I minify the css and html please? Are there online tools to do this?

I’ll also look at the scripts issue.

Many thanks again

Graham

7

I also need to know how to remove fonts that are not in use. I am also getting slow page load times because it is telling me I am using loads of fonts and weights. But I am only using 2. How do I remove unused fonts,

8

Hi @GrahamCox and @simonosb1, sorry for the delayed response. You can remove the google fonts from the Fonts tab in site settings. You should also go in and clean styles that are not in use in the Style Manager tab: http://help.webflow.com/general/designer-user-interface#style-manager-tab

Try that first, I hope it helps, let me know how it goes. Cheers, Dave

9

@cyberdave , where in the Font tab site settings can you remove google fonts? Also somewhere is there a list of what fonts come in the designer- i can’t remember what I added?
Thanks

10

Hi @octane, thanks for your followup. See my screenshot below, click the delete icon in the Fonts tab of site settings:

2472×990 129 KB

After that, go to the style manager and clean your unused styles. If a style exists with some font, the font will be downloaded if it exists in the CSS: Intro to Webflow | Webflow University

We do not yet have a Fonts “Where Used” but that is a great idea :slight_smile: Add this to our Wishlist, we’ll let you know if we add this ! http://forum.webflow.com/category/feedback/wish-list

​I hope this helps. If not, please let me know, cheers, Dave

11

Hi @cyberdave

Many thanks for all your help. I’ve cleaned up styles and that seems to have speeded up things.

1 Like