Optimizing Google Font Performance

Good website designs are graced by stunning images and fonts. Unfortunately, these two web elements heavily contribute to the reasons why many websites exhibit annoying latency. Of course, only web fonts can deliver something refreshing, unexpected, and new.

However, there are ways of containing this horrid phenomenon. SVG is helping developers to manage some of the challenges of image rendering. And for Google Fonts, which is the most popularly used web font, improving a page’s rendering time is just about deploying the several available tricks for optimizing Google Font performance.

What are Google fonts?

Google fonts are specially tuned collection of glyphs that make up fonts for use on websites. They are specifically designed to be used over the internet, hence, the name web fonts.

Launched as Google Web Fonts in 2010 with just about 30 fonts, Google Fonts now has about 17 billion fonts and currently powers around 57% of all websites. Google Fonts, which is completely free, records about 500,000 views every second as of the time of this writing and has accumulated over 37 trillion views since 2010.

The use of Google fonts on your website allows you to break away from being limited to system fonts or ‘web-safe fonts’, such as Arial and Georgia, which are mostly pre-installed across all operating systems.

How to implement Google fonts

Google Fonts implementation on a website is done using the application programming interface (API), referencing the user’s choice of font(s). This API offered by Google could be embedded into your HTML document using the standard CSS link tag or the syntax for import. Below is an example of the APIs for implementing Baloo Chettan 2.

Using the standard CSS link tag

Using the import syntax
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

With any of the above APIs in your HTML document, you can use the font-family in your CSS document by referencing it, as seen in the example below.

font-family: ‘Baloo Chettan 2’, cursive;

Importance of optimizing Google Font performance

Implementing and using Google Fonts, like other web fonts, are no big deals but delivering the fonts to your website visitors. Remember, the users do not have these fonts on their devices. In other words, their browsers must download them before they can see your website content.

Font weight

Each font comes with a weight poised to negatively affect your website’s latency. For instance, Google’s Baloo Chettan 2 font has a total size of 720 KB. That means you need to factor in approximately 9MB into your website loading if you must use the entire Baloo font family (19), with all the available languages and variants on your website. Of course, that’s unideal and not anything close to web font optimization. However, getting it wrong means keeping your website visitors waiting for a few seconds before they could see any text on your website.

Font format

Unfortunately, none of these formats is considered a universal format that works across all browsers.

EOT is supported by IE only. Chrome and Opera have the most support for most of the formats, while about 86 percent of all browsers support the WOFF format. This may require you to include all font formats for each font you want to use. The idea is to provide a consistent experience by ensuring that all browsers can display every font.

These issues are part of the many reasons why there’s a crucial need to optimize Google font performance.

Optimizing Google Font performance

Google Font optimization begins with your Font API placement and request format, down to the rendering. Here are simple tricks on how to optimize Google fonts.

Preload Google Font resources

It’s highly recommended that you use the new web platform feature: <link rel="preload"> which lets you load your web fonts in advance. This feature allows you to by-pass the default browser behavior, which usually delays text rendering by first constructing the render tree to know which font resources it needs before accessing the resource link.

<link rel="preload"> is usually included in the <head> tag of your HTML to trigger a request for your fonts early enough, without waiting for the creation of the CSSOM. The feature only gives the browser a pre-information that your web fonts would be needed soon, without providing any information about how they would be used.

Also, you are advised to use a suitable CSS @font-face definition alongside the preload feature to inform the browser on how to use the resource URL. See an example in the next point.

Use one request for multiple fonts

Another good measure for Google font optimization is to combine multiple font requests into one tag. Not to include a separate <link> tag for each font, thereby sending multiple requests in different batches. To combine font requests, simply separate the fonts in the API with the | character. However, this could also be achieved by simply selecting all the fonts you would need at once on the Google Font page.

Bad font requests format:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" 

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Recommended font requests format:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap" 

rel="stylesheet">

By combining multiple font requests into a single tag, we save the browser from several trips to the server and as well help older browsers with a maximum of 2 connections at a time per domain.

Optimized font formats to all browsers

Browsers with no support for a specific font format simply ignore it and jump to the next step on the rendering tree. And to provide a consistent experience, you are to include all font formats in your CSS @font-face declaration.

However, the weight could be reduced. The individual graphs that describe a font are made up of similar information that can be compressed using a compatible compressor such as GZIP. While TTF and EOT formats are compressed by default, you need to ensure that your servers are configured to apply the compression when delivering both font formats.

Use optimal compression setting for WOFF, which has built-in compression and resort to custom preprocessing and compression algorithms for delivering WOFF2 with ~30% file-size reduction.

CSS @font-face declaration example
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Give precedence to local() in your src list

Though this Google font optimization idea may not really apply to mobile phone users unless you’re referencing default system fonts, it remains an effective trick for optimizing web fonts.

If you look at the CSS @font-face declaration example above, you’ll notice that the local() tops the comma-separated list of resource variants in the src: descriptor. This prioritization is on purpose, and the idea is to send the user browser to the first source for the font locally before opting to download them if it’s not available locally.

This ensures that the browser doesn’t go on to download fonts already installed locally on the user’s computer, thereby ensuring a better website performance.

Customize font rendering: CSS font-display

Controlling font performance with font-display descriptor for @font-face lets you decide how your Google Fonts should be rendered, based on how long it takes to download. Originally, web browsers have default settings on what to do when the fonts are taking too long to load. Most of them set a timeout after which they use the fallback font, but unfortunately, their timeout period differs.

The newly introduced font-display property currently supports five range of values: auto | block | swap | fallback | optional

You should set the property to block value if rendering the text in a particular typeface is very important. This is because it lets the browser to use invincible text in place of the preferred font face when they are not ready and swaps them in as soon as they finish downloading. Most browsers use this value as their default (auto) value.

The swap could be used in cases where you can afford to render a temporary font face until the preferred font-face is ready. Swap is similar to block but renders the fallback font immediately the page begins to load and will replace them with the preferred typeface as soon as they are ready. This value has an infinite swap period and a zero second block period.

The swap value is not ideal for body text so as not to disrupt the reader experience halfway by shifting text around. You can use this for logo text where you need to display the company’s name or slogan quickly using a fallback but eventually require the official typeface for branding purposes.

Example: font-display property set to swap
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
font-display: swap
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

The swap value can be seen implemented in the very first lines of code (Google Font API) used in demonstrating how to link Google fonts in your HTML document.

Fallback is similar to swap but has a limited swap period. If the preferred font face doesn’t load within a set period, usually a zero second, the text will maintain the fallback font for the rest of the page’s lifetime. This is a good candidate for body text; it renders the text as quickly as possible and won’t shift it around by the time anyone starts reading.

The optional value is a replica of fallback but allows the browser to decide whether to initiate the web font download or not, considering the users’ network speed. In a situation where the connection is too weak, the browser would have to limit requests and prioritize the most needed resources by not sending any requests to download the web font.

Limit font-family and variants

Because each font-family and variant contribute to page weight, part of your Google Font optimization process must include limiting these two elements.

The availability of several variants such as italic, regular, bold, etc. doesn’t necessarily mean you have the ‘choice’ to include them in your download. Trim down your download to the exact variant required and avoid including too many. It’d be wasteful to download a complete variant because you only want to use one word from it. This is where the next optimization trick for Google Fonts comes handy.

Use the text parameter

The text parameter is one of the best Google font optimization tricks you need to know, and surprisingly, most developers don’t use it. The parameter allows you to load only the characters you need.

Assuming you wish to use only two letters of a font face in your company name as in the example below. I used different fonts for letters C and N:

Company Name

You can request to load only those two letters, instead of the entire font face. The Font URL will include extra parameters like this:

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

In conclusion

Google Font optimization is a crucial strategy for improving a website’s overall performance.

Accessibility and readability are always the major factors to focus on, aside from good design in typography. The above-mentioned methods for improving font performance are all focused on scaling down the font-weight, accessing the web fonts as quickly as possible, and rendering valid format/alternatives when the user network is flaky.

Please let us know if you have tried any of these methods, and about any web font optimization process not mentioned in this article.