Web fonts have expanded the designer’s palette and often provide a richer experience for users—but how can we make them more sustainable?

In this post, we will explore the different types of fonts that a designer can choose for a web-based project, and how each of those types of fonts impact HTTP requests, page weight and performance, and can contribute or subtract from the sustainability of a website’s design.  

Types of Fonts

First, let’s consider the talk about the types of fonts that can be used in a web-based design:

• System fonts: System fonts are common fonts, like Arial and Times New Roman, that are viewable on all types of devices, whether you have a Mac or PC. This type of font is installed by default on a computer, whether or not that computer is connected to the internet. Here are some examples of system fonts.
• Web fonts: Web fonts offer designers hundreds of fonts to choose from. The fonts are hosted online instead of on your local computer. That helps make a broader range of fonts available to computers that might not have a particular font installed on them.
• DIY web fonts: Designers can also create a custom set of web fonts. These fonts are also hosted online. There are several steps that you can take to optimize the performance of DIY web font sets.

How do fonts impact performance and sustainability?

Pixels are powered by energy. According to a recent report in the New York Times, the United States’ data centers use as much of 10 billion watts of electricity per year. Much of that energy comes from fossil fuels, coal and other sources of energy that are not clean or renewable.

So, when selecting a font for a web-based project, we need to consider how much energy needs to be consumed in order to load that font. There are a couple of ways that a font can impact the amount of energy that is needed to load a page:

• HTTP requests: This is a term that we use to talk about the number of requests made to a server in order to load all of the elements on a page, such as fonts, photos and videos. We explore HTTP requests in more depth in this blog post. The more HTTP requests that you make, the slower your page loads, and the more energy is required to process all of those requests.
• Page weight: Page weight refers to how large a page is in kilobytes or megabytes. The smaller the page, the faster it loads, and the less energy is needed to load the page.

System fonts require the least amount of energy to load, because they are installed on local computers. However, they limit a designer’s options in creating a design that is attractive and distinct.

Web fonts of all types greatly expand a designer’s palette, but can increase the HTTP requests to your page and add page weight and thus affect page load time. Some sets of web fonts have a bigger impact than others.

Web Font Options

With so many web font options nowadays what should you choose? Here are some of the more popular options:

1. Adobe Typekit
2. Google Fonts
3. DIY web font

For each option, we take a look at some of the pros and cons, including cost and download size. Our data on download size comes from an article on Web Font Performance.

Adobe Typekit

Typekit is not free, and personal accounts start at around $25 per year. The cost of a business account ranges from $40 to $400 a month. The fonts tend to be of higher quality and you will find some of your favorite foundries there.

With a typical download size of 11kb, Typekit has less impact on page weight than Google Fonts.

Google Fonts

Google Fonts are free and offer over 600 typefaces to choose from (as of the date this post was written). These web fonts are easy to implement. You only need to implement a single line of code to add them to your site. Here’s an example:

<link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>

The download size of Google Web fonts is around 28kb, making it the larger of the two web font options presented here.

DIY Web Font

There is also a DIY method, which requires you to purchase the font you want to use and then utilize the CSS style @font_face to implement the font across browsers. A non-optimized DIY font face has a download size of 30.5kb, making it the largest option of the three.

However, a DIY web font that is optimized can result in a smaller file size, and require fewer HTTP requests, than either of the other web font options.

Firstly, you can use a service such as FontSquirrel to create a lighter weight font, reducing the download size of your DIY font. The way that this works is that you remove any characters that you don’t think that you will use in your site, such as foreign language characters or dingbats.

Another step you can take to optimize your DIY font’s performance, is to encode your font. Selecting the “Base64 Encode” option converts the font file to a data URI. This enables you to embed your font directly in your style sheet. While this will make your style sheet longer, it will reduce the number of HTTP requests required to load font elements on your site.

Another option is to only load the web fonts on desktop browsers and not on mobile browsers. This prevents the mobile user from having to wait for your fonts to download, and saves energy. Check out this post from the Typekit blog for more information: Fallback Fonts on Mobile Devices.

Less is More

No matter which option you choose, you can minimize server load time by using fonts thoughtfully. It pays to be careful when selecting how and when to use them. Think about using fonts sparingly. A web font may look great as a header, but it’s probably not necessary for all the body copy, which could be rendered with a system font. By taking preventative measures while planning your site you can save on overall page size and server load when your website launches.

Additional Resources

• Web Open Font Format
• Web Font Performance: Weighing @font-face Options and Alternatives
• Preventing the Performance Hit from Custom Fonts
• Free Font Utopia
• Fallback Fonts on Mobile Devices
• Web Font Performance: Which method reigns supreme on the web?