Speed up Google Fonts

When it comes to rich typography, Google Fonts is my go-to web fonts choice. Yes, That’s where creative and attractive fonts are stored by Google, but as a designer or full stack developer we can use without worrying too much about font copyright issues like back in days when we embed fonts into websites.

But as a Full Stack Web Developer, I always tried to keep the number of fonts to a minimum number. Because, I’m worried about how it affect the overall page performance. And by experience I know in the end, no one is going to care how pretty my text is unless the page loads very fast.

Until recently, we had no control over how web fonts are rendered or how the fallback works. Fear not anymore, font-display is here to save us. What is it ?Does it works with Google Fonts ? Let's find out.

On last Google I/O, Google announced that their font service will now support the “font-display”. This capability will solves number of web performance issues thanks to Google.

How exactly fonts are loading these days ?

If a user does not already have the specified font installed in their device, And the website is using a web font as well, What normally browser does is download the specified font using font-face src locations, If that's failed or it downloaded slowly than expected, most browsers implement a timeout, which a fallback font will be used. This is a useful technique, but unfortunately each browsers differ on the actual implementation.

For a example: Chrome, other Chromium based browsers and Firefox have a three second timeout, Internet Explorer has a zero second timeout, Safari has no timeout defined.

We can segmented lifetime of a font download in to three major periods.

1. Font block: During this period, if the font face is not loaded, any element attempting to use it must instead render with an invisible fallback font face. If the font face successfully loads during the block period, the font face is then used normally.
2. Font swap: This occurs immediately after the font block period. During this period, if the font face is not loaded, any element attempting to use it must instead render with a fallback font face. If the font face successfully loads during the swap period, the font face is then used normally.
3. Font failure: This occurs immediately after the font swap period. If the font face is not yet loaded when this period starts, it’s marked as a failed load, causing normal font fallback. Otherwise, the font face is used normally.

It is bit confusing the first time you heard this, but stay with me. You’ll understand all these in practical before end of this article.

Ok, But what option is right for me?

To work with the “font-display”, add it your @font-face rule like below.

Let's dig in to each values to find out more…

1. auto: This uses whatever font display strategy the user-agent uses. Most browsers currently have a default strategy similar to block.
2. block: The browser draws “invisible” text at first if the font is not loaded, but swaps the font face in as soon as it loads. This value should only be used if rendering text in a particular typeface is required for the page to be useable.
3. swap: Browser draws text immediately with a fallback if the font face isn’t loaded, but swaps the font face in as soon as it loads. Logo text is a good candidate for swap since displaying a company’s name using a reasonable fallback will get the message across but you’d eventually use the official typeface.
4. fallback: Font face is rendered with a fallback at first if it’s not loaded, but the font is swapped as soon as it loads. However, if too much time passes, the fallback will be used for the rest of the page’s lifetime. fallback is a good candidate for things like body text where you’d like the user to start reading as soon as possible and don’t want to disturb their experience by shifting text around as a new font loads in.
5. optional: This gives the font face an extremely small block period (100ms or less is recommended in most cases) and a zero second swap period. This is a good choice for when the downloading font is more of a “nice to have” but not critical to the experience.

But I want to see it in a demo ?

Sure, Why not. Check out this JsBin link. Also Monica Dinculescu explained the same with an easy to understand demo by adding a delay to each step to get a better idea how each period works in practically.

Now you know how to speed up Web fonts, Give it a try folks…

Follow me on Medium Minuwan Deshapriya, Twitter @twitminu or Facebook @minuwan.

Speed up Google Fonts was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.