• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Startup Hero

The Official Blog Of Name Hero

Learn To Fly Above The Competition Get Started
  • HomeWelcome
  • CoursesVideo Training Center
  • About UsWhat is StartupHero?
  • BlogGet the latest
  • Start HereStartup 101
  • SpeakingPodcast & Media
  • ResourcesTools to help You
    • Reselling WordPress Hosting
    • Resell Hero
    • How To Start A Blog
  • NameHeroCloud Web Hosting

How To Make Fonts Non-Render Blocking

By Bhagwad Park on December 27, 2018 4

How To Make Fonts Non-Render Blocking

A short while ago, I’d written about how to load Google fonts locally in order to speed up your site. While we’re on the matter of fonts, we should also consider what happens to text while the fonts haven’t been downloaded yet.

One of the key principles of page speed optimization is that the page should be displayed as soon as possible. That means deferring or inlining CSS whenever possible. We inline all the CSS for “above the page” content and defer the rest.

The Problem with Fonts

However, this approach doesn’t work too well with fonts because of one simple reason – font files are too large to inline into the HTML, and we can’t defer them because they’re needed to render the page! In the recent page speed testing tools, Google has started calling out this problem in the form of the following warning:

Warning about webfont Load

The Challenge

What we want in an ideal solution is the following:

  1. The text should be shown with a “default” font immediately
  2. The font should be downloaded in the background
  3. As soon as the font is available, the browser should swap out the default with the new one

Previously, there were all sorts of complicated Javascript solutions to make this happen. It was quite a mess.

Using the “font-display” Directive

In CSS files, the “@font-face” descriptor is used to specify a font. Like this:

@font-face {
  font-family: 'Arvo';
  font-display: auto;
  src: local('Arvo'), url(...) format('woff2');
}

The “font-display” directive is a new part of “@font-face” that make the magic above happen automatically. It has five possible values:

  1. auto
  2. block
  3. swap
  4. fallback
  5. optional

We use it like this:

font-display: optional;

So adding “font-display” to the above block of code would look like this:

@font-face {
  font-display: optional;
  font-family: 'Arvo';
  font-display: auto;
  src: local('Arvo'), url(...) format('woff2');
}

Values of “font-display”

Here’s an explanation of the different values of “font-display”.

block (font-display:block)

“Block” is the most restrictive kind of option, and one that we want to avoid unless absolutely necessary. Basically it means that the text will be invisible against the page and will only show up when the necessary font has been downloaded.

This should be used only when having the text in a particular font is necessary, and it simply will not do to have it shown any other way.

swap (font-display:swap)

“Swap” means that the font will be drawn immediately on the page with a fallback font. There is zero “block” time, meaning that the page will not wait at all for the font to load. However, as soon as the required font is available, the browser will “swap” out the fallback text in favor of the new font.

fallback (font-display:fallback)

“Fallback” blocks the browser rendering for a very short period of time – like 100ms. If the font hasn’t yet been downloaded by the time it’s over, the browser will show the fallback font. When the font has finished downloading, it will be swapped out instead of the fallback font.

However, if the font takes too much time to download, then the fallback font will always be used!

optional (font-display:optional)

“Optional” is like fallback, except that it leaves the choice to the browser to decide whether or not to download the font. It’s a good option for low Internet speed users for example.

auto (font-display:auto)

“Auto” simply leaves the option to the browser. This is a bad idea because most browsers currently use “block” as their default!

Support for “font-display”

font-display is supported across all major browser versions. There are a few holdouts like Edge (as of this writing), but it should be quite safe to use for the present and the future.

Impact on Google Page Speed Results

We include the new directive in the @font-face CSS rules like this:

Inserting the font-display CSS Directive

It makes Google happy as in the screenshot below:

Google PageSpeed Check for webfont Loads

A reminder: This is a great reason to load your Google fonts using local CSS, since it allows you to do stuff like this. So go out there and update your web fonts!

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!

Reader Interactions

Comments

  1. Michael Moriarty says

    June 16, 2020 at 9:04 am

    Excellent solution! I am wondering if you have another article that expounds on loading just the range of characters you need (seems to be what you are doing the in the example with Roboto Slab) and also how you tackle loading fontawesome.

    Reply
  2. Innocent Cyril says

    August 12, 2020 at 9:14 pm

    Thank you so much for showing me how to optimize my Google fonts in my website am now happy

    Reply
  3. Chris says

    July 16, 2021 at 2:16 pm

    Thanks, Bhagwad!

    In PageSpeed Insights I’m getting a “Avoid chaining critical requests” warning for the fonts I’ve loaded locally and set at font-display: swap. This is hurting LCP for Core Web Vitals. Have you any idea how I avoid this chaining to minimize LCP?

    Reply
    • Bhagwad Park says

      July 19, 2021 at 12:23 pm

      Hi Chris. Perhaps try preloading the fonts? Here’s a resource that explains how: https://www.corewebvitals.io/pagespeed/avoid-chainging-ciritical-requests-lighthouse

      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

Connect With Us!

Superhero Resources

Fix Common Issues

  • How To Setup Free And Automatic SSL Certificates
  • How To Setup Cloudflare With Railgun
  • How To Fix Memory Exhausted Errors In WordPress
  • How To Edit PHP Version/Upload Limit/Add Extensions
  • How To Move/Migrate Your Business To Name Hero

Free Guides

  • How To Setup NameHero Hosting
  • How To Create A Web Hosting Business With WordPress
  • How To Start A WordPress Blog
  • How To Migrate WordPress To A VPS
  • How To Speed Test And Optimize Your WordPress Website
  • Magento 2.X Installation Guide
  • How To Clean Up A WordPress Hack

Training

Recent Posts

  • Why I Don’t Use AWS S3 For Website Backups
  • How To Add A “Vary: Accept-Encoding” Header To Apache
  • Managed vs Unmanaged VPS: The NameHero Difference
  • Why I Don’t Use Jetpack Backup
  • How To Share A Post Draft In WordPress
  • How To Use The Layout Grid Block By Automattic
Subscribe in a reader
  • Web Hosting
  • WordPress Hosting
  • Reseller Hosting
  • VPS Hosting
  • Twitter
  • Facebook
  • LinkedIn
  • YouTube
  • FTC Disclosure
  • Earnings Disclosure
  • Privacy Policy

Copyright © 2022 · Smart Passive Income Pro on Genesis Framework · WordPress · Log in