I host Google fonts locally not only to load them faster but also to take advantage of font loading strategies which goes directly to the heart of creating the ultimate user experience.
Hosting Google fonts locally to boost speed is one thing. Knowing how to load them with an effective strategy that strikes a perfect balance between performance and user perception is another.
Unfortunately, browsers are not quite where we'd like them to be in terms how they handle custom fonts which leaves us to our own devices when deciding on a suitable font loading strategy.
While some of these strategies are still nowhere near perfect, one thing remains certain. You'll need to host Google fonts locally if you want to retain maximum control.
Table Of Contents
- Understanding Font Loading Strategies.
- What To Do When You Have Text Over Background Images.
- Why Poor Hosting, Bad Theme Choice And A Poorly Optimized Site Can Wreak Havoc With Font Loading.
- My Site Is Twice As Fast Since I Self Host Google Fonts.
- Added Benefits Of Hosting Google (or any other) Fonts Locally.
- The Easiest Way To Setup Local Hosting - Comprehensive Setup Guide.
- How To Speed Up Font Loading If You Serve Them From Google Servers.
Understanding Font Loading Strategies
Without intervention font loading is primarily handled by the browser.
If your preferred font fails to load due to a slow download, the browser will mitigate this by loading a fallback (system) font.
A system font is a font used by your operating system to display text. Common system fonts include Arial, Times New Roman and Georgia.
A fallback font is basically a preferred system font that you specify.
Here is a table illustrating the behavior adopted by some of the popular browsers.
- Chrome, Opera and Firefox timeout after 3 seconds. At this point, text will be displayed using the fallback font. As soon as the primary font is available, the text will be re-rendered. Herein lies the problem of FOUT and reflows. Text rendered using the fallback font is referred to as a flash of unformatted text (FOUT). A reflow occurs when the primary font becomes available and the text is re-rendered. Not sure about you but I've experienced this often and found it to be disruptive.
- Internet Explorer renders text immediately due to a zero second timeout. A fallback font is used if the primary font is unavailable and re-rendering takes place once the primary font is ready. The benefit of FOUT is that, at very least, the user is faced with text immediately. However, this comes at the expense of a perfect user experience.
- Safari has no timeout leaving users without text until such time that the primary font is downloaded and ready for use.
Prior to the 3 second timeout with Chrome, Opera and Firefox (or no timeout in the case with Safari), a slow connection or a delay in the Google font download will likely leave users with a flash of invisible text (FOIT).
To add fuel to the fire, our font loading strategy is limited.
The relatively newdescriptor allows you to control how your font renders before it is fully loaded but is by no means a perfect solution.
- block - FOIT + infinite swap period. The invisible fallback text is replaced as soon as the designated font is available.
- swap - FOUT + infinite swap period. The fallback font is replaced as soon as the primary font is ready for us.
- fallback - Almost imperceptible block period (<= 100ms) + small swap period (FOUT + swap).
- optional - Almost imperceptible block period (<= 100ms) + no swap. Great for best user experience where content is preferential to aesthetics.
- auto - based on user agent (browser) strategy.
NOTE: Prior to May 2019 the use of thedescriptor could only be achieved when hosting Google fonts locally due to the CSS being hosted on your own server.
OK, with a very basic understanding of font loading, let's forge on.
What To Do When You Have Text Over Images
What I've learned from experience is that FOIT is not always FOIT.
If you look at my home page you will notice that I have white text over a near black image.
Where the internet connection is fast I normally find that the text loads concurrently with, or just before, the image. No problems here.
But if my connection happens to slow down temporarily or even sometimes on first load of my site in a browser with a clean cache and where my PC is also busy with some background process/es, it can appear as if my header and navigation loads before the text and image, leaving a mostly blank screen.
But I came to find that the text is, in fact loading but in the absence of an image, the white text is invisible on a white background. So what I thought was FOIT, was in fact white text on a white background.
The solution is to use a solid color overlay that will allow text to show while waiting for the image to load. The image may load after milliseconds but it's still preferable to an almost blank screen. The other option is to change the text color.
Why Poor Hosting, Bad Theme Choice And a Poorly Optimized Site Can Wreak Havoc With Font Loading.
For starters, the more HTTP requests to external sites needed to render your page/s, the slower your site will load. To exacerbate this, scripts and CSS are render blocking so poor optimization coupled with a slow server and a bloated theme could prove disastrous to user experience.
Additionally, being called by CSS, Google fonts are no exception to the render blocking conundrum.
Render blocking occurs when the parsing of HTML, needed to render the page, is paused (blocked) temporarily until all scripts and CSS complete their processes.
Besides a number of granular optimizations, the most important factors affecting page speed (in this order) are:
- Theme Choice
A fast site is crucial for optimal font loading and this starts with the right foundations.
You can optimize until the cows come home. If your hosting is poor your speed will never cut the mustard. It's akin to installing a governor (speed limiter) on a Ferrari!
Furthermore, if you want to host Google fonts locally for the purpose of optimizing speed and user experience, you're going to need fast and reliable hosting.
If you're on shared hosting, I'd advise you to load your fonts from Google's servers as they're speed optimized and their CDN serves fonts from the location closest to the user.
I host this site on Cloudways. Besides being super fast, they also offer the finest value for money in the marketplace. And it's super easy to setup a site using their simple user interface.
If you're interested in starting a site on Cloudways or migrating your exiting site, I have a full setup guide that forms part of my Cloudways review. And if you use my promo code (WPMM2X20) when signing up, you'll also get 20% off your first 2 months.
A lightweight, well coded and optimized theme is the next most important speed factor. Yes, you'll certainly be able to get an immediate speed boost with a top caching plugin like WP Rocket but you'll never be able to fix some of the font loading issues mentioned above if you're using a poorly coded theme, such as most of those you'll buy off Themeforest.
The StudioPress themes running on the Genesis Framework are, without a doubt, the best you're going to find. I run this site on the Infinity Pro theme. It happens to be one of the most expensive of the StudioPress themes but at $129 for the theme and Genesis Framework, it's still better value for money than most other paid themes.
Here's the thing. The theme cost is once-off. The licence provides you with unlimited everything. You get:
- Lifetime updates
- Lifetime support and ...
- You can use the theme on as many sites as you like.
NOTE: If you buy a theme off Themeforest, you're in for a yearly subscription in order to maintain updates and support and you only get a single site licence.
Caching is absolutely crucial when it comes to font loading. I would recommend either WP Rocket or Swift Performance Pro.
WP Rocket is rock solid and has been around for way longer than Swift Performance Pro. As a result, they've long since ironed out all the small bugs and it's also really simple to setup. You can use it out of the box but there are additional optimizations you can enable with a check box. I have included a full, step by step, setup guide in my review of WP Rocket. WP Rocket also has a feature where you can combine fonts for added speed (Google servers only).
Swift Performance Pro may be marginally faster (we're talking milliseconds) and offers more granular control but is better suited to those who have a bit of knowledge and experience when it comes to caching. Yes, it also comes with many optimizations out of the box but further optimizations may require a bit more knowledge or a good degree of experimentation to see what settings work best for your site. You may want to see my review and full setup guide.
Why Cloudways Is Perfect For Hosting Google Fonts Locally
- Pay As You Use - NO CONTRACTS!
- Plans From $10 Per Month.
- 5 Cloud Providers (Digital Ocean, Google, Amazon, Linode, VULTR).
- Host Unlimited Websites.
- Fully Dedicated Resources (No deceptive marketing).
- Latest Speed Technology (SSD, HTTP/2).
- Optimized Stack With Caching (Including Memcached, Apache, Varnish, NGINX, Redis).
- FREE Breeze Inhouse Caching Plugin.
- Multiple PHP Versions And PHP 7.X Ready For Ultimate Speed.
- Cloudways CDN (Stackpath Under The Hood).
- 60+ Data Centers For Superior Performance And Global Response Times.
- 1-Click FREE SSL Certificates.
- 24/7 Live Chat And Ticketing For Unsurpassed Support.
- Comprehensive Knowledgebase.
- 1 Free Managed Migration.
- 1-Click Automated Or On-Demand Backup And Restore - Frequency From 1 Hour to 7days.
- 1-Click Revert.
- Extend And Scale Storage In A Few Clicks.
- Vertical Scaling - 1-Click Hosting Feature Scales RAM, CPU And Storage.
- Deploy Over 10 Sites In 1-Click.
- Dedicated Staging.
- Git Integration.
- 1-Click Cloning Of Entire Server Or Individual Site.
- FREE Cloudways Migrator Plugin Can Move Your Site Seamlessly To Cloudways.
- FREE TRIAL - No Credit Card Required.
Why I Love And Use StudioPress Themes (Genesis Framework)
- Blazing fast and highly optimized.
- Clean coding + minimalistic and lightweight build.
- Zero bloat.
- SEO Optimized.
- Themes for a lifetime - UNLIMITED use on unlimited domains.
- Lifetime support.
- Lifetime Updates.
- No annual recurring fees + themes from $39.
- Highly customizable.
- Extremely well supported across the internet.
- Turnkey themes.
- Unlimited design options.
- HTML 5 markup.
- Cross browser compatible.
- Mobile responsive.
- Supports schema.org microdata.
- Recommended by top people at Google, Yoast and WordPress.
- Pro Plus All-Theme Package - receive instant and unlimited access, plus support and updates, for all 36 themes created by StudioPress PLUS over 30 themes from 3rd party developers - with a total value of $1,700 - for the low price of $499. OR
- Get the Genesis Framework & 36 StudioPress themes free when you sign up for a WPEngine hosting plan - that's over $2,000 in value.
Why WP Rocket Is Ideal For Serving Fonts Locally
- Caches straight out of the box.
- Extremely easy to configure (less than 3 minutes).
- SUPERCHARGES YOUR WORDPRESS.
- Server and browser caching.
- Long track record of success.
- Over 700,000 sites optimized with WP Rocket.
- CACHE WARMER (preloader) so even the first visitor gets a cached page.
- DNS prefetch (speeds up calls to external sites e.g. Google fonts).
- Built-in database cleaner.
- CDN integration.
- Integrates seamlessly with Cloudflare
- Host Google Analytics locally.
- Combine Fonts.
- WooCommerce compatible.
- Compatible with WP Touch, WordPress Mobile Pack, WP Mobile Detector, WPML, Polylang, qTranslate and bbPress.
- Works with Apache, Nginx, Microsoft IIS and LiteSpeed web servers.
- Varnish cache compatible.
- Multisite compatible.
- Easy to switch from other caching plugins (incl. W3 Total Cache and WP Super Cache).
- Discounted yearly renewals.
- 14 day refund policy.
- Check out the WP Rocket Website.
Why I Love And Use Swift Performance Pro
- Works out of the box.
- INSANELY FAST - I get load times of under 200ms.
- CACHE WARMER so visitors always get a cached page.
- Built-in image optimizer - *UNLIMITED*.
- Built-in database cleaner.
- Plugin organizer.
- Enqueue critical fonts (icons not web fonts).
- CDN (and Cloudflare) integration.
- Host Google Analytics locally.
- Speeds up merging process and reduces CPU usage through an API.
- Monthly plan ($4.99) so you can try it out.
My Site Is Twice As Fast Since I Self Host Google Fonts
My speed tests reveal that my site loads twice as fast as it did when Google was serving my fonts.
Your results may differ due a number of factors including server location, user location, speed testing server location, whether you use a CDN and where the edge servers are located, server speed, internet connection etc.
- Hosting Provider: Cloudways.
- Cloud Infrastructure: VULTR.
- Server Location: Chicago
- GTMetrix Test Location: Dallas USA.
- CDN: Cloudflare.
- Caching: Swift Performance Pro
- Server Side Caching: Varnish (included in Cloudways stack).
- All tests were performed at the same time of day.
- 4 speed tests were performed for each option namely:
- hosting Google fonts locally
- serving fonts from Google's servers using an enque function in my functions.php file (part of theme's coding).
- The average of each data set has been used to determine the end result.
- Other than the published tests, I performed multiple tests (including from GTMetrix's London location), all of which revealed similar results. I am certain therefore certain that the published results are indicative of everyday browsing.
|Served By||Time To First Byte (TTFB)||Contentful Paint||Dom Interactive||Total Load Time|
|Local Hosting (Cloudways)||307ms||448ms||496ms||850ms|
The most important metrics are:
- Contentful Paint Time - the time it takes for any content to be shown. It is most representative of actual perceived load time in that it indicates when users receive consumable information such as text or images. My tests reveal that local hosting is almost twice as fast (448ms vs. 850ms).
- DOM Interactive - indicates when the browser has parsed the HTML so that it can structure and render the page. My tests reveal that locally hosting fonts is over twice as fast as serving them from Google (496ms vs. 1025ms).
- Total Load Time - the time it takes for the page to fully load after all background processes are complete. Again, locally hosting fonts is over twice as fast as Google's servers (850ms vs. 1750ms).
Added Benefits Of Hosting Google (or any other) Fonts Locally
Personally I don't chase after scores. However, some aspects of improving scores or grades will also improve speed and this is what concerns me most.
One such aspect is expires headers.
Now you can't add expires headers to external resources so this error will always pop up in GTMetrix or Pingdom tests if you serve fonts from Google's servers. But you can add expires to fonts if you host them locally.
The advantage of this is that the user's browser will be instructed to cache those fonts for however long you specify for these assets (in your .htaccess file).
This will speed up all repeat visits to your site during the specified period.
Furthermore, while your caching software can minify, merge and compress CSS for site plugins, it can't do so for external assets, Google Fonts included.
The ability to minify, concatenate (merge) and compress CSS files makes a substantial difference to load times.
While locally hosting fonts will also fix your GTMetrix error, the most important thing is the speed boost that comes from these optimizations. This is made possible because the CSS lives in a local stylesheet on your own server.
A cache validator ensures that browsers take full advantage of all of the benefits of caching. To this end, allowing a cache validator to be specified means that the browser can perform a check to determine whether the font to be displayed already lives in its cache. If so, it will be served from there accordingly. This speeds up loading time and can only be achieved if the font is served from your local server.
The Easiest Way To Setup Local Hosting - Comprehensive Setup Guide.
If you follow the process I'm going to show you, it shouldn't take much longer than 5 minutes to get your fonts hosted locally. This process automatically converts the fonts into the formats that you choose and produces the correct CSS, making it a breeze to add to your stylesheet.
These are the steps we're going to follow:
- Go to Google webfonts helper website.
- Select font and font styles.
- Download and unzip font file.
- Upload fonts to your own server.
- Add CSS to stylesheet.
- Specify default fonts.
- Disable external calls to Google fonts server.
Head on over to Google Webfonts helper.
In the top left corner either enter the font name or select one from the list.
Select the font styles and weights you want to use on your site. Only choose the styles and weights you will use. Unused fonts add unnecessary bloat.
Download the zip file to a new directory that you create (e.g. Fonts) on your PC.
Now unzip the font file to the same destination.
I use Filezilla to FTP files to my site. You can use any ftp software you wish to achieve the same.
I like to upload to a "fonts" folder that lives directly under the public_html directory. This way the folder will never be overwritten with any theme or plugin updates.
Back on the Google webfonts helper site, click in the grey block to highlight all the CSS that was generated. Copy it to your clipboard and paste it into your desired stylesheet. (You could also enqueue them from functions.php).
I paste directly into my theme's style.css file (default Genesis stylesheet).
Now specify your default fonts and fallbacks to be used for body text, headings, links etc.
Make sure to disable any calls to the Google fonts server.
Depending on how the call is made for Google fonts in your environment, you may need to remove this from your html pages (possibly via header.php or theme settings) ....
.... or this from your stylesheet.
You may need to contact your theme vendor if you don't know where to access either of the above calls to Google fonts.
That's all there is to hosting Google fonts locally, but there are still a couple of optimizations you may wish to make.
Preloading For Added Speed
Instead of waiting until the CSS has been parsed and the CSS Object Model has been built, you can preload your fonts for some additional time saving. The CSSOM is similar to the DOM (document object model) but applies to CSS instead of HTML. Preloading forces the browser to fetch the font/s immediately.
Bear in mind that:
- The preload resource hint is not available in every browser. I suggest you select woff2 font files for this purpose because all browsers that support woff2 also support preload.
- If you add the resource hint to the head of all HTML pages, the resource will be preloaded whether needed or not. If the browser already has the font in it's cache, the preload is wasted. You must decide whether the benefit outweighs the risk.
Personally, I use preload. That being said, I only preload my main font style (in my case bold text) required to render the most important text for users. This not only moves the font load up the waterfall but also has a very positive effect on my contentful paint time. However, each additional preload comes at a cost to initial render. It's a fine balance.
Add the relevant code to the <head> of your document. You must do this separately for each font style you wish to preload and make sure the naming of the font is exactly the same as it appears in the public_html/fonts folder.
<link rel="preload" as="font" type="font/woff2"
Inline CSS / Critical CSS To Prevent Render Blocking
CSS is a render blocking resource. This means that the parsing of HTML (and the loading of the page) is blocked / delayed until the CSS is parsed first.
Because your locally hosted Google fonts are called using the CSSdeclaration, your fonts are also render blocking.
With WP Rocket, when enabling CSS Optimization the critical CSS will be generated behind the scenes and added to next page load. Thereafter, this CSS will be loaded asynchronously.
Swift Performance adds a toggle to enable the critical CSS to be inlined within the <head> of the document.
If you don't use a caching plugin that generates critical CSS, simply add the CSS for your fonts into the <head> section of your document, between <style></style> tags.
Limit Characters To Reduce Size And Boost Page Loading Speed
Each web font comprises a collection of glyphs which may include Latin, Greek and Cyrillic characters.
Vast support is great but you don't want it to become an impediment to performance.
According to Ilya Grigorik, Google's Noto font aims to support the entire world's languages but the download size of the font exceeds 1.1Gb.
Unicode subsetting allows us to limit the characters to only those required to render the page thereby reducing download size while becoming more performant. This is achieved by splitting a large unicode font into smaller subsets (e.g. Latin) and downloading only the glyphs needed to render a page.
The use of Unicode range subsets and separate files for each stylistic variant of the font allows you to define a composite font family that is both faster and more efficient to download. Visitors only download the variants and subsets they need, and they aren't forced to download subsets that they may never see or use on the page.
Personally, I don't use any further subsetting. If you specify your subsets before downloading your fonts using the Google webfonts helper there's no need for any further manipulation. The file sizes are already tiny.
I mentioned subsetting for those who wish to download additional subsets and then filter out what isn't needed.
NOTE: I tried to subset further using Glyphhanger but found that some of the characters were synthesized and looked out of place. If you limit your subset before downloading then I don't believe there's any need to play around any further.
If you happen to download your font/s from Google, you can limit subsets before downloading.
How To Speed Up Font Loading If You Serve Them From Google Servers
When serving fonts from Google's servers, you lose whatever limited control over FOIT and FOUT you may have when you host them locally leaving you in the hands of the default browser behavior and Google's default swap behavior.
The only speed optimization you can effect is to preconnect to Google's servers, allowing the browser to perform the DNS lookup, TCP handshake and TLS negotiation as soon as it finds the script in the <head> section of the HTML as opposed to waiting for the normal call during the parsing process. This may only shave off some milliseconds but it's still better than nothing.
To preconnect, add the following to the head of your HTML pages. If you use a Genesis theme, add the script via theme settings. Otherwise you may need to add it to your child theme's header.php file.
You can group fonts using preconnect.
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700|Raleway:700" rel="stylesheet">
I hope I've impressed upon you the importance of using thedescriptor as a means of avoiding FOIT and enhancing user experience, especially for those on slower connections.
While Google now include thedescriptor as a default (since May 2019) when serving fonts from their servers, the best way to retain maximum control while taking full advantage of speed and caching benefits is to host Google fonts locally.
So what do you think? Leave me a comment.
Cheers for now, Adam