How to Speed-Up Your Website with the Right Font?

How to Speed-Up Your Website with the Right Font?

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. Abhijeet Deshpande, shares this experience from the picturesque Kangra Valley to show how to speed-up your website with the right font.

Map of Himachal Pradesh, India

Enhancing user XP means every millisecond counts. For the past few months, among other things, I have been working to improve site-performance on our shared hosting plan. Yet, how I wish we did better. Much better. There are many ways to improve speed (such as using static maps) and today, let’s focus on one important aspect that has helped us.

Share Your Story or Review Our Book!

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

The Google Web Font Problem

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.

Web Design is 95% TypographyOliver Reichenstein, IA.net, 2006

Spiraling HTTP Requests

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?

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.

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

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?

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

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.

Fonts – A 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.

The Web Safe Font 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 Fonts on Your Site?

Disable Google Web Fonts Using a Plugin – Recommended Method

Thankfully, many smart developers have dealt with the problem and there are free plugins that can help you achieve it. Since our site already uses 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.

Remove Google Web Fonts from WordPress Theme 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 Site Speeds

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

Web Design is 95% TypographyOliver Reichenstein, IA.net, 2006

If you are on a budget infrastructure, like us, 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?

 Pin this for later! 

What kind of fonts do you use on your site? Have you tried disabling custom fonts? How is your experience? Are there any performance optimization tips you might want to share with us?

Get new stories in your inbox

Disclaimers: (1) Maps, wherever used on this site, serve a representational purpose only. Backpacking Series does not endorse or accept the boundaries shown, names, or designations used by map providers. (2) This story / article is based on personal opinions of the author. Backpacking Series is not responsible for the accuracy, completeness, suitability, or validity and it does not assume any responsibility or liability arising out of use of any information provided herein.

30 thoughts on “How to Speed-Up Your Website with the Right Font?

  1. Wow, you nailed the post. A lot of information in such a small post. I am going to pin it so I can read later as well. Thanks for sharing with us.

    1. Yes Vivian. This was a discovery for us as well when we were working on performance enhancement of this website! Fonts came to have a connection with website speed! Happy to share these insights 🙂

    1. Thank you Monidipa for your kind words 🙂 If you are interested in other blogging hacks, you could also look up our post on How to Load Maps Faster On Your Website? – which is also linked with website performance!

  2. I think using Google Fonts is fine in a lot of instances. Instead of downloading the whole font package, download only the font weights necessary. But often times Google fonts are smaller than other custom fonts. My google fonts load in 42 ms. It really depends on what font & how many fonts you are loading.

    1. Thank you Marta. Hope you wouldn’t mind that we put your fabulous homepage to a speed test. Perhaps you are making changes to your site – since we notice about 15-17 http requests going to download custom fonts alone. For us, that’s a high number. But again, it can be a subjective thing too.

    1. Oh.. we are so with you here 🙂 A lot of times one tends to rely on the support from others when it comes to technical matters, at the same time we found this DIYing exploration for website speed very helpful for us. We are glad you found new insights in this article.

    1. So totally true! It is important to check for ourselves what kind of fonts do you use on your site or have you tried disabling custom fonts? This exploration will facilitate the speeding up of website! 🙂

    1. Thank you for your kind words Nidhi! Hope you get to use or share this information on how to speed up the website with the right fonts 🙂

  3. For three years now, I’m a blogger, and I never thought that the choice of font could slow down the site. Thanks for this post, it’s really useful.

    1. Thank you Jelena. Wow! Three years into blogging. That’s amazing. If you found this post helpful, and if you use maps for your blog, do also check the blogging hack on Backpacking Series – How to Load Maps Faster On Your Website? Both these could have good results on website performance. Good luck.

    1. Well, now you do have the option to choose the right fonts 🙂 Thanks for stopping by Lyosha and we are glad you found this post helpful.

    1. Thank you Jocelyn. This was a discovery for us as well when we have been working on our site performance. We are happy to share 🙂 and glad you found it useful.

    1. Good luck to you! Yes, it is important to check for ourselves what kind of fonts do you use on your site or have you tried disabling custom fonts? This exploration will facilitate the speeding up of website! 🙂

  4. Really interesting. I hadn’t considered that fonts could be slowing my site down, you’ve definitely given me something to look into. Keep up the great work.

  5. I NEVER would have thought that using different fonts could effect the speed of a website. I always just thought images and videos would be the thing to slow down a website. But honestly, now that I think about it, I remember the days of myspace when we’d use crazy fonts with our html and that would ALWAYS slow down a profile. Now it’s blogs and websites. This is a really great resource and something I will definitely think about when publishing on my site.

    1. Thanks for this insight Christina. What an amazing reference you brought in here! Yes, apart from images and videos, fonts impact the website speed. Even maps could slow it down too. In case you also use maps on your site, also check out How to Load Maps Faster On Your Website? in our Blogging Hacks!

  6. This post really amazing, never thought the fonts also effects on the speed of the website.
    Slow website speed is a common issue, So this post helps a lot to everyone.
    xo Corina

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses spam protection software. Learn how your comment data is processed.