How to speed-up your website with the web safe font?

Why and How to Use Web Safe Fonts for Site Speed?

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.

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 optimizing images and using static maps. Today, let’s focus on web fonts.

Click to Learn More

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

Web Design is 95% TypographyOliver Reichenstein,, 2006

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’ or ‘waiting for’. 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 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 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 or 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 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.

Click to Learn More

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!

Web Design is 95% TypographyOliver Reichenstein,, 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?

Need help with a site?

We can help create beautiful WordPress blogs and sites. Our modular approach offers secure sites while optimizing operating costs and performance. Head over to our page on website design and development plans and get started.

Disclaimers: (1) Maps, wherever used on this site, serve a representational purpose only. Unakriti 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. Unakriti 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.

32 thoughts on “Why and How to Use Web Safe Fonts for Site Speed?”

  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.

  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.

  3. OMG this information blows my mind lol. I’m not a tech savvy so I don’t know all of this. Thanks for posting.

  4. I had no idea that the type of font would change the speed of your website. I’ll need to look into this x

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

  6. Fashion and Style Police

    I didn’t know the font had an effect on the speed of the website. I will look this up on my website.

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

  8. Christina | From Under a Palm Tree

    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.

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

  10. Whoa! This is a lot of technical stuff packed into one post. I had no idea fonts could affect website speed in any way. And the fact the Google Web Fonts can actually be disabled is all news to me! Well if it helps make the site faster, then why not!

Comments are closed.