How to Use Web Fonts in a WordPress Theme or Website

Despite many advances and improvements in web technologies, fonts used on your website will only display if they are installed on your visitor’s computer (sort of). This is an especially hard fact to grasp when you realize that you can’t create a pixel perfect match of your beautiful Photoshop (or Sketch) mock-up.

Why Can’t Websites Show All Fonts?

Web browsers and servers simply aren’t built to serve the thousands of fonts available to us. Without using some of the methods mentioned later, we are mostly limited to the fonts listed below:

The fonts labeled as safe will work on 95% of all user’s systems (still not perfect!). As a best practice when using any fonts in web design you should use at least one backup font. This technique is known as a font-stack.

Font-stacks give browsers fallback options if the chosen font is not installed on the client’s system. For example, when using Palatino (a less common font) the correct css font declaration would look like this:

font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;

As you can see, Palatino is listed first and the browser can fall back to any of the similar fonts as necessary. While the last 3 fonts are not exactly the same as Palatino, they carry similar characteristics.

For a complete list of web-safe font stacks check out: http://www.cssfontstack.com/

Using Advanced Fonts in your Website Designs

We all want our websites to work for everyone but we also want them to look nice. They call us web designers for a reason. Let’s get a few of the options out there to use some of the more attractive fonts available.

Free Web Fonts from Google Fonts

Google provides a cloud-hosted font library that you can embed in your website. All it takes is a link to the font library and a bit of CSS and you can use their wide variety of fonts. Google Fonts are sortable by category, thickness, slant and width.

Each font includes a ‘quick-use’ guide that provides the proper embed link and font-family declaration to include in your CSS file. Later we will discuss the best ways to install these fonts on your WordPress website.

An added benefit to Google’s Font Library is that all of their fonts are open source and free to use in all applications!

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially — in print, on your computer, or in your websites.

Use Typekit for Premium Web Fonts

Typekit offers a massive library of premium fonts for both on and offline usage. The Typekit library is only available for use via paid subscription. Typekit’s premium fonts offer designers a lot of flexibility as well as access to web versions of many popular font foundry offerings.

Similar to Google Fonts, Typekit provides a script that must be embedded in your html in order to use their CSS font-family declarations. One benefit to Typekit is that fonts can be added to a collection and managed via dashboard. So you only place their code once and changes can be made via the cloud with no additional coding required.

While the cost is prohibitive to some, you may already have access without knowing it! Typekit fonts are available as part of Adobe’s Creative Cloud Subscription.

Manual Web Font Installation for WordPress

There are three methods for installing web font libraries in your WordPress theme: Using the @import function in your stylesheet (Google Fonts only), placing a snippet in header.php or using WordPress’s enqueue style/script in functions.php.

Stylesheet @import Method

When viewing a font on Google’s Font library, you can click ‘quick use’ to display the @import snippet for use in your theme’s stylesheet. Simply paste the snippet into your stylesheet and you are set to go. While this method is quick and easy it has performance drawbacks as you will be loading a second stylesheet on every page of your website.

Placing code within <head> Tags

Locate the header.php file of your theme or child theme, within this file you will see meta tags and links to scripts or stylesheets. This code is loaded on every page of your WordPress site.

Clicking the standard tab (on Google Fonts) will provide a snippet that can be placed in this header.php template betweentags (as a best practice, this should be grouped with any additional stylesheets used in your theme). To prevent FOUT (“Flash Of Unstyled Text”) your font should be loaded before your main stylesheet.

With either application you will need to use the following snippet to set elements to use your new web font:

font-family: 'Libre Baskerville', serif;

Enqueue Web Font Scripts or Styles

Alternatively, WordPress has a hook that is used specifically for loading scripts and stylesheets. This method is ideal for performance as you can use advanced functions to load fonts on specific pages. For example, if you have a font used only in your blog for article content, there is no reason to waste resources by loading the fonts on your main content pages.

Enqueue Google Font in a WordPress Theme

The following snippet is, in our opinion, the best way to load Google’s Libre Baskerville font in WordPress:

You’ll notice that the enqueue snippet is very similar to simply pasting the stylesheet declaration from Google Fonts. You can also use additional fonts to your website using a single enqueue statement by appending additional font families to the end of your snippet. As noted above, you will still use the same CSS declaration to use the font in your theme’s stylesheet.

Enqueue Adobe Typekit in a WordPress Theme

Typekit’s script works a bit differently than Google. Instead of calling the stylesheet for each font you will be using, you create a kit (or collection) of fonts to use in your project. After adding the Typekit script to your WordPress site you can manage everything from Typekit’s online dashboard. All changes are then pushed to your site(s) via the cloud.

Once you have embedded your font kit, simply refer to your Typekit dashboard for the appropriate font-family declaration.

For a more advanced application, Typekit also allows you to set a custom css class that can be used for your custom font.

Complete WordPress documentation: WP Enqueue Script | WP Enqueue Style

That’s it!

You are now ready to use premium web fonts on your WordPress website or theme. Feel free to ask questions in the comments below if you need help with a specific application.