Top of page

Optimize Google Fonts by loading only Characters you need

Varmapublished on February 20, 2020 & last updated on October 27, 2020

There is always a situation where you're web designer friend designed a web page with a logo or certain unique title/heading in an entirely different font than the one used for the body. In such a case, you end up loading two or more different Google Fonts in different size and weights. Thus adding up bigger payload from Google Fonts and eventually increasing your website loading time.

Thanks to Addy Osmani and his tweet that I discovered one of the hidden features in Google Fonts (it was always available in Google Fonts docs). You could cut down 90 per cent off the size of Google Fonts request by declaring 'text' parameter and then specifying in it the only characters you need.

Optimize Google Fonts by using Text Parameters

For example, take this site logo 'tutorialforest' and I need to use Montserrat font for it (which is not used anywhere else in the site). In the normal scenario, I would load up the entire Montserrat font (with the required font-weight) from Google Fonts, even when there is no further use of the font in my site. This would add a few extra KBs for the user's browser to download from my site.

With the 'text' feature, I could just add all characters of the logo as the value for the parameter 'text=' and then send a request to Google Fonts API. This allows Google Fonts to return the font file that's optimized specifically to the request. Thus cutting down up to 90% off the size of Google Fonts request.

https://fonts.googleapis.com/css?family=Montserrat&display=swap&text=tutorialforest

Note that, as with all query strings, you should URL-encode the value before passing it to the Google Fonts API requests.

https://fonts.googleapis.com/css?family=Montserrat&display=swap&text=Hello%20World

Also, when using 'text=' parameter, there's no need to specify the 'subset=' parameter as it allows you to refer to any character in the original font.

The same technique would also work for international fonts, thus allowing you to specify UTF-8 characters.

https://fonts.googleapis.com/css?family=Montserrat&display=swap&text=%c2%a1Hola!

Optimizing Web Font Loader with text Parameter

What about using this in Web Font Loader? Well, you could even apply this small BIG optimization to Google Fonts when using Web Font Loader. For that, you just need to add the 'text=' parameter and the characters you would need to the request.

WebFont.load({
    google: {
      families: ['Montserrat&display=swap&text=tutorialforest']
    }
 });

It's sort of micro-optimization for Google Fonts, and there are some cons in using this technique.

If you're using Google Fonts like Montserrat, Open Sans etc, which is used in millions of website, then most probably these fonts are already in cached by your browser. When visiting a site with these fonts, you are downloading nothing (0B) from Google Fonts.

But, if you're micro optimizing with the above technique, then your browser need to do a separate request to Google Fonts for the unique fonts+character combination. Thus it would defeat your original purpose of optimization.

So, I would recommend using this technique only when using a unique font from Google Fonts. Otherwise, keep loading the full font stack to better utilize the CDN cache.

In DigitalOcean

Free $100 DigitalOcean credit for Cloud Hosting

Exclusive - Get free $100 DigitalOcean credit on your new account which is good for 60 days usage to spin up a Droplets, Cloud Servers, Managed Databases, Kubernetes, Block Storage, Load Balancers and much more.

$100 FREE Deal
NO CODE NEEDEDGet this deal

In Jetpack

Flat 40% OFF on WordPress Jetpack Backup & Security plans

Get flat 40 per cent discount on WordPress Jetpack automated real-time backups and security scan plans. Jetpack Security pack provides easy-to-use, comprehensive WordPress site security including automated backups, malware scanning, and spam protection.

40% OFF Coupon
GhostlyJetpack CopyGet this deal

Related Articles

Fetching coffee...

{}