Typography seems to be an emerging frontier in the online publishing business and Google Web Fonts is docked comfortably. While it opens up design options, such custom fonts can drag down performance. Let us see why and how to use web safe fonts for site speed.

Enhancing user experience means every millisecond counts. In the previous years, among other things, we have been working to improve site-performance. There are many ways to improve speed such as optimizing images and using static maps. Today, let’s focus on web fonts.

If you are a regular reader here or of our other blogs, you might have noticed that we often curate long reads using text, images, and maps. Each one of these components is a potential resource hog. The text is benign, you say?

7 Challenges with Google Web Fonts

Let’s begin on a positive note: beautiful typography that we have come to adore in print magazines and newspapers is now available for blogs or websites – free of cost. Companies like Fonticons, Google and Typekit, with their free web or icon fonts, promise to make your site stand out.

Their popularity means an increasing number of theme and plugin authors are using such fonts in their code, making it an integral part of your website. But, isn’t that a good thing? What’s the big problem? Site speed. Especially if you are using a shared host.

1. How many HTTP requests do fonts make?

While your site is busy painting a browser, you might have noticed status bar messages such as ‘connecting to fonts.gstatic.com’ or ‘waiting for fonts.googleapis.com’. That’s a browser downloading the typography your site relies on from servers that host these fonts.

To see it all in action, just swing by popular speed sites such as GTmetrix or Pingdom and test your URL. Chances are you’d be surprised by the number of requests your site requires to download font files. But, aren’t these fonts delivered from a fast Google cloud?

2. Is there a Content Delivery Network for fonts?

Yes, Web Fonts are delivered from Google’s CDN. Google has been and continues to optimize these files for faster delivery. Nonetheless, these are additional requests for additional data that most blogs can do without. Beginners in the blogosphere often start with shared hosting, and often with an array of redundant plugins. In most cases, web font files are simply adding to the bloat.

3. What is the web font bloat?

A typical font file size is 35k-50k. However, depending upon how your site is developed, it may require multiple font files or sometimes, even a single font file can be as large as few mega bytes.

This is because a site may use more than one language, require multiple file formats, or need to be available in an offline mode. Sometimes, themes and plugins that use Google Web Fonts make multiple requests for the same resource. Worse yet, your site may be forcing a visitor to download stuff that is never used at all.

Most times, your readers or site visitors can do without any of this. But, what about caching? Won’t a browser store such fonts for future use? The short answer – not everything.

4. What are the limitations of caching web fonts?

Browser caching only helps to speed up repeat visits not your first time readers. For repeat visitors, a site owner has the power to define how long a browser should cache an asset locally. You can set a far-expiry (of a month or more) for static assets such as images, etc. Umm . . but not for everything. For assets delivered by third-parties such as Facebook or Google, a site owner has no control. Their expiry is set by companies who deliver them.

While core font files themselves might have a far-expiry date, the font-related style assets have an expiry of something like a mere 24 hours. Thus, when a font file has changed, and a subscriber clicks on a newsletter link to read your latest post, that repeat visitor will need to download all the required typography once again. Needless to say, if your subscriber is on a frugal data plan, you are not helping her. So, why not just deliver fonts from your site instead and control the browser cache expiry?

5. Is there a way to load Google fonts locally?

Since Web Fonts are OpenSource, you can host these locally on your site, reduce the number of HTTP requests, and control cache expiry. There are free plugins to help you achieve this. However, Google recommends against such a practice. It makes me wonder: why would Google follow such a resource-hogging practice in the first place and then recommend against a possible solution?

The official reason they do so is in order to deliver the most up-to-date and device-optimized fonts for your website. While that may be true, any software that requires an update with such high-frequency should be considered ‘under active development’ and only folks involved in the development life-cycle should be testing them. So, what explains? Perhaps, only Google knows. However, the problems are a plenty.

6. Do Google fonts impinge privacy?

Few countries, such as China, block access to such servers – which means sites using Google Web Fonts wont look the same across the globe. Many others have raised concerns about data privacy with Google Fonts, especially in the wake of recent EU’s GDPR policy implementation. For a bird’s-eye view of the staggering amount of data collected, gloss over the statistics at Google Font Analytics website.

7. Will Google web fonts always be free?

Fonts seem to be the new frontier in the publishing business. The large scale capture of usage data can potentially help Google create a freemium model categorizing free and premium fonts, pitch to browser companies (such as Firefox, Safari, or Internet Explorer) to include some of these fonts as a native option in their future versions, and/or Google Web Fonts API may go the way of Google Maps’ API, that now require site owners / developers to provide credit card information before resuming usage, that too on a Fair Use Policy.

Too many questions, too few answers

Whatever it is, such under-the-hood integration of custom fonts with themes and plugins is leaving many site owners clueless as to why, despite taking a number of optimization steps, site speed sucks. Until we start to investigate, that is.

Your site wants to load faster but Google wont allow and then penalize it in speed tests. Avoid the double whammy. Avoid Google Web Fonts. Is it all easier said than done? Not really. Here are two practical options.

Why switching to web safe font is the solution?

Wouldn’t it be nice that your site-visitors or readers already have the fonts your site uses on their browsers? After all, it seems only logical that browsers might be smart too. Well, it turns out that they are. Most browsers use a default set of fonts known as Web Safe Fonts, also known as fall-back fonts.

Consider a scenario when your site’s fully functional but a site-visitor cannot access Google’s servers (for whatever reason) to download the requested font files. In such cases, a browser falls back to use Web Safe Fonts to paint the site’s requested page. Some browsers, while waiting for fonts.googleapis.com to deliver the assets, may initially display your site’s content using such default fonts (derived from the operating system it is running on, such as Ubuntu). But wouldn’t removing Google Fonts break my site?

Will disabling Google Web Fonts break my site?

It should not. On our site, the only problem I noticed after disabling Google Web Fonts was that the navigation menu’s font-size went smaller than before – nothing that a simple CSS snippet cannot fix.

That said, software conflicts are not uncommon. As a safe practice, I’d recommend to test the change before rolling it out on a production site. Before you begin making system-wide changes, please read the caution notes.

General Caution Notes

• The following sections apply to WordPress platforms only. Review the steps completely and backup your site before starting the operation.
• The recommended practice to add custom code to your site is using a child theme or a site-specific plugin.
• Do not modify theme files directly. For one, you may break your site. Secondly, every time your theme is updated, changes will be overwritten and you will need to apply these again.
• If you do not know how to install and configure a plugin or access your site’s functions.php file, or if you are not sure what you are up to, it is recommended to consult a specialist.

With that out the way, it’s time to roll up our sleeves.

How to disable Google Web Font on your site?

1. Recommended method: Disable Google Web Fonts using a plugin

Thankfully, many smart developers have dealt with the problem and there are free plugins that can help you achieve it. Since few of our older sites already use the AutOptimize plugin, with a configurable option to disable Google Web Fonts, we did not need to install any other.

But if you do not want to use AutOptimize, worry not. There are popular plugins such as Disable Google Fonts (by Milan Dinić) – I have not tried but, at the time of this writing, it has over 100K active installations.

Any of these plugins should remove the HTTP requests to fonts.googleapis.com or fonts.gstatic.com. If you want to disable additional custom fonts on your site, you may try the following code (or a variation of it). This method should also be helpful, If you don’t want to install yet another plugin to disable Google Web Fonts.

2. Remove Google Web Fonts from WordPress without a plugin

This example cleans Automattic’s Gazette Theme of Google Web Fonts. Though your theme may use other font-families and while specifics could be different, you may follow along to understand how it can be achieved.

• Open WordPress Dashboard
• Navigate to Appearance -> Editor and on the list of files click on functions.php
• Look for a section titled somewhat like “Enqueue scripts and styles”
• Note the ones corresponding to Google Web Fonts and copy the font names (shown here in bold)

wp_enqueue_style( 'gazette-lora', gazette_lora_font_url() );
wp_enqueue_style( 'gazette-lato-inconsolata', gazette_lato_inconsolata_fonts_url() );

• Next, paste to replace the font names in the code snippet below (bold as shown) and then place the entire snippet into functions.php file of your child theme or your site-specific plugin.

// Disable Google Web Fonts Lora (Serif) and Lato-Inconsolata (Sans-Serif)

function site_remove_googlewebfonts()

{

wp_dequeue_style( 'gazette-lora' );
wp_deregister_style( 'gazette-lora' );
wp_dequeue_style( 'gazette-lato-inconsolata' );
wp_deregister_style( 'gazette-lato-inconsolata' );

}

add_action( 'wp_enqueue_scripts', 'site_remove_googlewebfonts', 100 );

• Click update / save the functions.php file or upload the revised site-specific plugin. That’s it.

Head over to Pingdom or GTmetrix and run a test to verify whether requests to font.googleapis.com have disappeared from the waterfall model. If you want to disable more fonts (fontawesome, etc.), try adding wp_dequeue_style( 'font name' ); statements to the stack above for the desired ones and re-test.

How to configure WordPress to use web safe fonts?

You are in for some mighty luck here! The way most themes are coded, their stylesheets (style.css) carry a comma-separated set of fonts listed left-to-right in the order of preference. For instance:

p { font-family: ‘Times New Roman’, Times, serif; }

The last few or the very last name on this list invariably corresponds to a Web Safe Font. So, once you have disabled Google Web Fonts or any other custom fonts, your site should automatically fall back to a Web Safe Font such as Serif and Sans Serif.

Be font-aware for faster website speeds

User experience is prime and, with Google Speed Update, site speed has gained a higher prominence. So, remember what Oliver said!

If you are on cheap infrastructure, the number of options to speed up your site may be constrained by what the host allows. Luckily, choosing what kind of content to display in a post, especially which font to use, is not one of them. So, before adding new content, would it help to assess switching to Web Safe Fonts? Better yet, switch to Cloudkriti and leave such worries behind.