• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero® Blog

NameHero® Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories
  • Authors

How To Load Google Fonts Locally To Speed Up Your Site

Bhagwad Park

Published on: December 17, 2018

Categories: Website Performance, WordPress 7

One of the most basic principles of site speed is to reduce the number of domains that your page requests on each load. To this end, I’ve come to the opinion that a CDN like CloudFlare’s reverse proxy is much more efficient than traditional CDN networks since it doesn’t need to resolve an additional domain.

Taking this logic to the extreme, it would seem logical to keep all assets on your local domain, and cache them at EDGE locations with Cloudflare. Indeed, this is my preferred approach at this point, and the one that’s bringing me the best results so far.

It makes sense to apply this same approach to Google’s fonts as well. In an earlier article, I’d shown you how to load add Google Fonts to a WordPress installation by getting the URL for the fonts and loading it in the header via a piece of PHP code. In this tutorial, I’ll show you how to “inline” the fonts instead and perform even more modifications to speed up your site.

Looking at Extra Connections

If you load Google Fonts the “traditional” way that Google expects you to, you’ll see something like this in your waterfall view when you analyze the way your site loads:

Additional Connection Delay for Google Fonts

As you can see, the actual connection and download time of the fonts is pretty fast. Just 169 ms. Unfortunately, that time is dwarfed by the time required to connect to the DNS, make the connection and negotiate the SSL certificate. It’s a shame that such a small file needs to have so many resources dedicated to it.

Moreover, you can see that it’s render blocking! The Google fonts here are preventing the entire page from loading till they’re downloaded. This is a pretty serious problem.

So we’re going to do the following:

  1. Extract the CSS
  2. Minify it
  3. Place it in an “inline CSS” section

Getting the CSS from the File

From the previous tutorial, you probably got a Google Fonts URL that looks something like this;

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

Extract the URL in the “href” tag and paste it into your browser. You should get something like this:

Contents of Google Font CSS

This is the CSS that is being downloaded each and every time a visitor loads your page. Copy all of it and paste it into notepad or some other text editor.

Minify the CSS

The CSS you downloaded is “pretty” with comments, whitespaces etc. Since we’re going to insert this on every page load, we want it to be as small as possible. For this, we’re going to use a CSS minifier tool. There are lots of them on the web. The site cssminifier.com is a good place to start.

Paste your CSS into the box on the left-hand side and click “Minify”. You’ll get the “Minified Output” on the right-hand side.

Inserting the Minified Output onto your Pages

There are many ways to do this. The most direct is to enclose the minified CSS in “style” tags like this:

<style type="text/css">

[Minified CSS here]

</style>

And then paste it into the header of every page on your installation. How you do this depends on your CMS and theme. If you’re using WordPress, your theme might have a section to insert scripts into the header, like Genesis. Another option is to use the neat Autoptimize plugin and use the “inline CSS” section. Like this:

Inline and Defer CSS

I recommend the second approach for WordPress. If you have another CMS like Joomla, you’ll need to find appropriate solutions for that.

Once you’re done, your Google fonts should load without delaying the page. And now that you’ve removed an additional domain lookup, you should get much better page speeds, as well as fewer warnings from Google that complain about render blocking resources!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Related Posts

How To Use The All-In-One WordPress Migration Plugin For WordPress

Learn everything you need to know about the All In One WordPress Migration plugin for WordPress. Transfer your WordPress website with ease!

Understanding the Key Differences of VMware vs. Hyper-V

When choosing between VMware and Hyper-V, it is crucial to consider hardware compatibility, management, performance, security, and cost.

How To Create Plugin Sets Or Templates In WordPress

For those of us who manage our clients’ websites, we create new WordPress websites all the time. Perhaps you’re starting one from scratch for a customer or are migrating to a new server and need to re-create the same setup. For everyone like this, it can be a pain to install a bunch of WordPress […]

How To Fix Error Code: NET::ERR_CERT_AUTHORITY_INVALID

Check out our guide on how to fix the net::err_cert_authority_invalid error code regardless of browser or if you are a site owner or visitor.

Reader Interactions

Comments

  1. ikomrad says

    May 3, 2019 at 11:35 am

    What if the page that uses google fonts belongs to someone else’s web site. Can you use a tool like Tampermonkey to inject that code into the page to remove the web fonts from their css? One of my customers has me use VPN to manage their site, and the VPN does not have internet access for security reasons. A Web app I use to to manage their apps uses google fonts. Every time I load the Web app page, I have to wait several minutes for the Web font request to timeout and load it’s default fonts.

    Reply
  2. John Williamson says

    May 7, 2019 at 1:33 pm

    Isn’t this still not truly hosting them locally because it still makes calls to the Google Fonts URL’s, or am I missing something?

    Reply
    • Bhagwad Park says

      May 22, 2019 at 10:10 am

      No, you’re right. If you want, you can go the additional step and modify the fonts file itself to point to static resources on your own site.

      It’s a big pain though, so I don’t imagine most people would do it…

      Reply
  3. Brian Johnson says

    June 8, 2020 at 7:40 am

    I think CSS minifier is probably the single most under-utilized tool for speeding up sites. The amount of unnecessary CSS bloat that blogs have is unreal. I saw a dramatic drop in page load time from reducing CSS bloat.

    Reply
    • Sandra says

      August 10, 2020 at 2:46 am

      That is quite ture. The minification process can reduce the size up to 90%. So this will help the website running faster and then get high Search Engine Optimization (SEO) score

      Reply
  4. Michael Moriarty says

    June 27, 2020 at 7:30 am

    How do you determine what characters to include? By that I mean what unicode range?

    Reply
  5. Michael Moriarty says

    June 27, 2020 at 7:37 am

    Does it help to use something like font-squirrel to select just the portions of the font you want and then convert to a base 64 string?

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

WordPress Hosting vs. Web Hosting – What’s The Difference?

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero® proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 Name Hero, LLC. All rights reserved.
NameHero® is a registered trademark.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA