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.
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.