How to Improve Page Performance with a Font Loader

Share this article

A big thanks to Jason Pamental for the inspiration to write this article. I’d never have considered the issue otherwise!
When was the last time you used Arial, Times New Roman, Helvetica or … shudder … Comic Sans in your web pages? Web fonts took too long to arrive but, once they did, we never looked back. Fonts are fun, (often) free and fast to implement:
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);
You can then use the font throughout your pages, e.g.
body {
	font-family: Ubunutu, sans-serif;
	font-weight: 400;
}
The fonts also work in mobile devices so users get a great experience in your Responsive Web Design. Or do they? After images, fonts are the normally the largest assets in your web page. The Ubuntu font above adds almost 250Kb to the page weight which is noticeable on slower mobile connections. Chrome, IE, Safari and Opera leave a blank space while the font is loaded so the page is unusable. Firefox and older versions of Opera show text in a fallback font then switch — known as a Flash of Unstyled Text (FOUT). Neither option is ideal. We rarely worry about font weight problems and make excuses such as “it’s only an issue on the first page” or “many users will have the font cached”. We may omit lesser-used fonts; for example, removing most of the Ubuntu italic styles saves almost 40%. Few dare to take the obvious solution of using standard OS fonts — our clients and designers would never forgive us.

The JavaScript webfontloader

Fortunately, there is another option: the webfontloader. This JavaScript library can load fonts from Google, Typekit, Fonts.com, Fontdeck or your own server in the background once the page has loaded. The library itself adds a further 17Kb to the page but it is also downloaded as a background process. To load the Ubuntu font set above, we create a global object named WebFontConfig
which defines our fonts and settings then load the webfontloader itself:
var WebFontConfig = {
	google: {
		families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
	},
	timeout: 2000
};

(function(){
	var wf = document.createElement("script");
	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
		'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	wf.async = 'true';
	document.head.appendChild(wf);
})();
We can therefore determine whether none, some or all fonts are loaded depending on the device and bandwidth capacity. Ideally, we could use the Network Information API but browser support remains limited. Alternatively, note the timeout setting in WebFontConfig; if the font files require more than two seconds to download, the request is abandoned.

CSS Callbacks

The webfontloader applies class names to the html element during operation:
  • .wf-loading — all fonts have been requested
  • .wf-active — all fonts are available
  • .wf-inactive — none of the fonts could be loaded
Classes are also applied for individual fonts:
  • .wf-<familyname>-<fvd>-loading — a single font has been requested
  • .wf-<familyname>-<fvd>-active — a single font is available
  • .wf--<familyname>-<fvd>-inactive — a single font could not be loaded
where <familyname> is a sanitized version of the font name and <fvd> is a variation description such as i4 for 400 weight italic. This permits us to switch fonts once they have downloaded — in the same way Firefox operates, e.g.
/* default OS fonts */
body {
	font-family: arial, sans-serif;
}

/* fonts now loaded */
.wf-active body {
	font-family: 'Ubuntu';
}

JavaScript Callbacks

Similar JavaScript callback functions can be defined in the WebFontConfig although there are fewer situations where this is useful, e.g.
var WebFontConfig = {
	google: {
		families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
	},
	timeout: 2000,
	loading: function() {},
	active: function() {},
	inactive: function() {},
	fontloading: function(familyName, fvd) {},
	fontactive: function(familyName, fvd) {},
	fontinactive: function(familyName, fvd) {}
};
For more information, refer to the webfontloader documentation.

Minimizing FOUT

The Flash of Unstyled Text is jarring if your fallback font is significantly different in style, weight or spacing to your web font. However, with a little experimentation you can adjust the fallback font, weights, line-heights and margins to ensure page elements remain in approximately the same location when the web font is loaded…

See the Pen How to use a font loader by Craig Buckler (@craigbuckler) on CodePen.

Click the TOGGLE FONT button to see the font-switching effect. The change isn’t completely unnoticeable but, importantly, the user wouldn’t lose their place if they’d started reading. You can add a TOGGLE FONT button to any page to help you assess suitable fallback styles:
<button onclick="document.documentElement.classList.toggle('wf-active');return false;">toggle styles</button>
In summary: font use may be free, but try to minimize the cost to the user. If you’re loading a megabyte of font files, your lovingly-created RWD layout isn’t suitable for mobiles!

Frequently Asked Questions about Improving Page Performance with Font Loader

What is a font loader and why is it important for page performance?

A font loader is a tool that allows you to control how web fonts are loaded on your website. It’s important for page performance because it can help reduce the time it takes for your website to load. When a web page loads, the browser must download all the necessary resources, including fonts. If the fonts are large or numerous, this can slow down the page load time. A font loader allows you to control when and how these fonts are loaded, which can significantly improve your page performance.

How does a font loader improve page performance?

A font loader improves page performance by allowing you to control the loading of web fonts. You can choose to load fonts asynchronously, which means they won’t block the rendering of the rest of your page. This can significantly reduce the time it takes for your page to become interactive. Additionally, a font loader can help prevent a phenomenon known as “flash of unstyled text” (FOUT), where the browser displays a fallback font while the web font is still loading.

What are some popular font loaders I can use?

There are several popular font loaders available, including Google’s WebFont Loader and Typekit’s WebFont Loader. Both of these tools provide a variety of options for controlling how your web fonts are loaded. There are also several WordPress plugins available, such as Developry Google Fonts, that make it easy to implement font loading on your website.

How do I implement a font loader on my website?

Implementing a font loader on your website typically involves adding a script to your HTML. This script will load the font loader, and then you can use the font loader’s API to control how your web fonts are loaded. The exact process can vary depending on the font loader you’re using, so it’s best to refer to the documentation for specific instructions.

Can I use a font loader with any web font?

Most font loaders are compatible with any web font, as long as the font is hosted in a way that allows it to be loaded by the font loader. This includes both self-hosted fonts and fonts hosted by a font service like Google Fonts or Typekit.

Does using a font loader affect the appearance of my fonts?

Using a font loader can affect the appearance of your fonts in the sense that it can help prevent FOUT. However, it should not change the actual design or style of your fonts. If you notice any changes in the appearance of your fonts after implementing a font loader, it may be due to a configuration issue.

What is the “flash of unstyled text” (FOUT) and how does a font loader prevent it?

FOUT is a phenomenon where the browser displays a fallback font while the web font is still loading. This can result in a brief flash of text in a different font, which can be jarring for users. A font loader prevents FOUT by allowing you to control when the web font is applied to your text. For example, you can choose to hide your text until the web font has loaded, or you can display the text in a fallback font and then swap in the web font once it’s loaded.

Can a font loader improve my website’s SEO?

Yes, a font loader can potentially improve your website’s SEO by reducing your page load time. Page load time is a factor that search engines consider when ranking websites, so anything you can do to reduce it can potentially improve your SEO.

Are there any downsides to using a font loader?

One potential downside to using a font loader is that it can add complexity to your website’s code. However, the benefits of improved page performance and user experience generally outweigh this downside. Additionally, many font loaders are well-documented and supported, making them relatively easy to implement.

How can I tell if a font loader is improving my page performance?

You can use a variety of tools to measure your page performance before and after implementing a font loader. These tools can provide metrics like page load time, time to first paint, and time to interactive, which can help you quantify the impact of the font loader. Some popular performance measurement tools include Google’s Lighthouse and WebPageTest.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

chriswCSShtmlJavaScriptweb fonts
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form