Using Font Stacks instead of Webfonts

ohiocannabis · August 21, 2020, 6:51am

So I’m running a gtmetrix test to optimize my site the best that it’s able to.

But my PageSpeed & Yslow scores are a bit low because of a bunch of google font api errors.

Yslow:

Add Expires Headers
There are 7 static components without a far-future expiration date:

 https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&subset=latin,latin-ext&display=auto
https://fonts.googleapis.com/css?family=Roboto:400%2C500%7COpen+Sans:400%2C800
https://ohiocannabis.com/_Incapsula_Resource?SWJIYLWA=719d34d31c8e3a6e6fffd425f7e032f3&ns=2&cb=1094289361
https://www.google-analytics.com/analytics.js
https://fonts.googleapis.com/css?family=http://Bitter|Lato|Libre+Baskerville|Montserrat|Neuton|Open+Sans|Pacifico|Raleway|Roboto|Sacramento|Varela+Round|ABeeZee|Abel|Abril+Fatface|Alegreya+Sans|Alex+Brush|Alfa+Slab+One|Amarante|Amatic+SC|Amita|Architects+Daughter|Arizonia|Arvo|Average+Sans|Bad+Script|Berkshire+Swash|Bigshot+One|Bowlby+One|Cabin|Cabin+Condensed|Cabin+Sketch|Cherry+Cream+Soda|Codystar|Coming+Soon|Cookie|Cutive+Mono|Fjalla+One|Freckle+Face|Fredericka+the+Great|Gabriela|Grand+Hotel|Great+Vibes|Habibi|Happy+Monkey|Julius+Sans+One|Just+Another+Hand|Kaushan+Script|Lobster|Lobster+Two|Maven+Pro|Oregano|Plaster|Playball|Pontano+Sans|Quicksand|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Tenor+Sans|Lato|Open%20Sans|Libre%20Baskerville|Montserrat|Neuton|Raleway|Roboto|Sacramento|Varela%20Round|Pacifico|Bitter
https://chimpstatic.com/mcjs-connected/js/users/76380418c772a8e678a78354a/7856ee1f49d82d4e3591519ef.js
https://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCwqawdhXEUkljXlngrbSeB_8YEW-ab7_c&callback=w2dc_load_maps_api

And under PageSpeed:

Minify CSS:

I was told that Using a webfont will always lower your score, the font is an additional thing for the visitor to download.

I was told I could instead use font stacks that are pre-installed on most devices and it won’t slow the load speed: https://www.cssfontstack.com/

So how do I enable these font stacks site-wide and also then disable all of the webfonts slowing the site down?

I was also told that this needs to be done within the Theme itself.

I assume these are attached to various plugins, so do I need to target the individual plugins font file?

tristup · August 21, 2020, 11:46am

Hi @ohiocannabis

Web-safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web-safe font stack to choose several fonts that look similar and are installed on the various systems that you want to support.
So you need to choose the fonts that are already mentioned in the stack, if you want to use fonts other than ones pre-installed, as of CSS3, you need to Web Fonts as previous.

The article will help on the use of Font Stack and Web Fonts you want to use. And this artcile on issues of Google Font in GTmatrix.

Thanks

system · August 31, 2020, 11:46am

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