A Guide on Web Font Optimization in WordPress
By Jon Penland, Updated: June 5, 2017
Web fonts are a staple of modern web design and used by the overwhelming majority of WordPress websites. Optimizing the use and delivery of web fonts is critical because poorly optimized web fonts can bog down the performance of your website. Despite this risk, the answer isn’t to punt web fonts in favor of web safe fonts. Web fonts are popular for several valid reasons.
- Designers love web fonts for the creative license they provide and improved UX that make possible.
- Web fonts often render more effectively than web safe fonts across a wide range of devices sizes and resolutions.
This article introduces web fonts and explores methods and tools you can use to further improve your web font optimization in WordPress.
What are Web Fonts?
Before we talk about how to optimize the delivery of web fonts, I want to make sure we’re on the same page. When it comes to websites, there are two basic types of fonts:
- Web safe fonts are fonts that are preinstalled on a device. Run-of-the-mill fonts such as Arial, Times New Roman, and Courier New as well as generic font families like serif, sans-serif, and monospace are web safe fonts.
- Web fonts are fonts that are not preinstalled on a device and must be downloaded by the user’s browser before being displayed.
In essence, web fonts have to be downloaded by a website visitor’s browser while web safe fonts don’t require an additional download. As a result, sites that use web fonts have to think about the impact of additional font resources on the site’s load speed.
Hosting and Delivering Web Fonts
Once you’ve decided to use web fonts, you have to decide how to host the font resources. There are two options available for hosting webfonts:
- Self-hosting: Font resources are hosted on your own server along with the rest of your website files.
- Third-party hosting: Font resources are hosted by a font service such as Google Fonts or Typekit.
Using a third-party font service such as Google Fonts is much more common and a simpler way of using web fonts. However, some developers prefer to avoid relying on any externally-hosted resources for either performance or security reasons, and in that case, self-hosting is an option. You can check out our in-depth tutorial on how to host local fonts in WordPress. Realistically, unless you have a significant security concern or the technical prowess and server power to deliver font resources faster than Google or Adobe, it probably makes the most sense to use a font service to host and deliver web fonts.
Web font optimization is a complex topic and there are a variety of different ways to optimize delivery of fonts. The option that fits your website best will depend on a variety of factors including the speed of your server and network, the size of your site’s CSS, and your own technical abilities.
Optimize Font Service Web Fonts
We’re going to start with this option because it’s the simplest and most common. While Typekit is popular among professional developers, Google Fonts is the most common source of third-party fonts. It’s free to use and so popular that many users don’t have to download many Google Fonts font resources because the fonts are already stored in their browser’s cache.
Adding Google Fonts to your WordPress website is easy. For the lightest implementation possible, add fonts directly to your theme’s header.php file using an HTML
link element or to the functions.php file with
With your fonts added to header.php or functions.php, apply them with custom CSS rules.
Keep in mind that you’ll need to use a child theme if you make any changes to theme files. Otherwise, you’ll lose all of your changes the next time your theme updates.
If you’d rather not do into your theme’s files, there are several WordPress plugins you can use to add Google Fonts to your site.
My personal favorite plugin for adding Google Fonts to a WordPress site is Easy Google Fonts. With this plugin, it’s easy to set up font styles for each text element and to create custom selectors for special elements. Font styles are assigned to each element and custom selector within the Customizer. As a result, you get a live preview of each change as you make it.
Another popular option for adding Google Fonts to WordPress is WP Google Fonts. While this plugin does not provide a live-preview of font changes, it does give you a lot more power over the font styles and character sets added to your site–a topic we’ll delve into momentarily. For that reason, if you aren’t happy with the impact Easy Google Fonts has on your site’s load speed, switching to WP Google Fonts will allow to select a smaller subset of font styles and character sets.
Optimize Google Fonts
All Google Fonts are compressed and delivered over Google’s CDN which will provide the fastest delivery possible. Even though Google Fonts do include these built-in optimizations, it’s still worth doing what you can to speed up the delivery of fonts by being selective.
When selecting Google Fonts, don’t select all available styles and character sets just in case. Think carefully about the styles and character sets you will actually need and only add those specific styles and subsets. Keep in mind that you don’t have select every (or any) variation of italic and bold fonts. Browsers will approximate these styles if the appropriate font is not available.
Many sites use a unique display font to style the site title. However, doing so means that you’ve added an additional font file that must be downloaded. Minimize the impact of this additional font style by only downloading the specific characters used in your title. You can do this by adding
&text=, followed by the specific letters you wish to download, to the end of the Google Fonts URL.
For example, if we wanted to load the word Kinsta using Bungee Shade, we could do that with the following link:
<link href='//fonts.googleapis.com/css?family=Bungee+Shade&text=Kinsta' rel='stylesheet'>
Notice the addition of
&text=Kinsta to the link element. What this addition does is tell the Google Fonts CDN to only deliver the uppercase letter K, and the lowercase letters i, n, s, t, and a.
Use Self-Hosted Fonts with WordPress
Self-hosting web fonts is your best option if you’re using fonts that aren’t available from a font service, if you’re able to deliver fonts faster than a font service, or if you want to remove all dependencies on externally-hosted resources.
It really isn’t that hard to add self-hosted fonts to WordPress manually:
- Upload the font files to your site.
- Add a
@font-facerule to your theme’s style.css file for each uploaded font.
- Apply the fonts using custom CSS.
However, if you’d like to make things a little easier, Use Any Font is a plugin that will allow you to upload fonts and assign them to HTML elements right from the WordPress dashboard. You can use the free version of Use Any Font to upload a single font file. However, contribute $10 or more and you can upload an unlimited number of fonts.
Optimize Self-Hosted Fonts
When using self-hosted fonts, it’s easy to do things wrong end up hurting your site’s load speed. To avoid that mistake, follow these guidelines.
First, keep your font resources as lean as possible. When generating a font resource or adding fonts to your site only include the styles and character sets you actually plan on using.
Second, deliver fonts in four formats: woff2, woff, ttf, and eot. When you add those fonts to your CSS with an
@font-face rule, include them in that order. This will ensure that browsers select the lightest and fastest format that they are capable of rendering.
Third, consider using unicode-range subsetting to limit downloaded font resources to only the characters you will use.
Optimize Web Fonts with CSS Inlining
If you’re technically inclined and care about every millisecond you can shave off of your site’s page load speed, inlining is an option worth considering.
The basic idea is to use base64 encoding to inline fonts into a CSS stylesheet. This cuts down on the need for a visitor’s browser to download and process font resources, but it does mean that your site picks up a rather hefty CSS file.
Opinions are mixed on whether inlining fonts will improve your website’s page load speed. The reason why some sites go this route is for the browser caching benefits. Once the font resource has been downloaded subsequent page views that use the same resource will render more quickly. As a result, this strategy is worth considering if your site sees a lot of repeat visitors and multiple pageviews per session.
One Additional Web Font Optimization Technique for Light Sites
If you’ve switched from self-hosted font files to inline CSS fonts, the next logical step is to consider inlining the CSS directly in your site’s HTML. With this strategy in play, font resources are included in the site’s HTML document eliminating the need for any round-trips to the server to pick up font resources. However, this tactic also eliminates the benefit of storing font resources in a user’s browser cache since fonts are coded directly into the site’s HTML and included with every page load.
If you do inline a CSS font directly into your site’s HTML, only inline a single font family, style, and character set. If your site needs additional font families, styles, and character sets, load them separately. Quite frankly, if you’re running a WordPress website, unless you’re using a custom theme that is intentionally minimal, inlining a CSS font into HTML is probably not going to improve overall site performance and is almost definitely more trouble than it’s worth.
Conclusion and Further Reading
Web font optimization is a complex topic and it’s
difficult to do the topic complete justice in less than 2000 words. If you want to learn more about web font optimization strategies, here are some additional resources to help you on your way.