Adding and Customizing Fonts in a WordPress Theme

Depending on the WordPress theme you install—whether from us or any other vendor—the ability to change fonts on your site may or may not be included with default theme controls. 

Some WordPress themes include settings which integrate font customization options, but others do not. Regardless of font integration, some users opt to install a plugin which gives them further control over fonts. Others with advanced knowledge (or with the help of an outside designer/developer!) might integrate completely custom fonts into their website code.

This Help Desk article will discuss the various ways you can integrate third-party font plugins or third-party web fonts into your theme, including:

Please note that in line with our support policy, if you need additional implementation guidance past what is offered in this article, we are unable to assist. However, with any luck, the resources provided will set you down the right path, and you'll be a web font pro in no time!

CUSTOMIZE YOUR FONTS WITH THEME CONTROLS

If your theme offers it, use the included, integrated controls to customize fonts on your website. Check with the theme vendor to see what font options are available within the theme you're considering. The most common font library integrated with WordPress themes is Google Fonts, so many fonts integrated into themes will come from there.

At EmPress, some of our themes include Google Font controls directly within the theme Customizer. Others include an optional, free plugin, which provides a small number of font styles that you can one-click change across your site. 

If you are considering an EmPress theme, but wish to use a font not available via Google Fonts, or are considering one of our themes without Google Font controls, the following sections will provide guidance on how to integrate your favorite fonts.

CHANGE FONTS WITH A PLUGIN

To customize fonts, the two plugins we recommend most often are:

Before proceeding with either, understand that EmPress  cannot offer any assistance with setup or customization of these plugins. If you opt to install these plugins, please work with the plugin author/developers directly to resolve any issues or answer any questions about their implementation. The general guidance and advice provided below is simply a Help Desk extra to get you started!

Easy Google Fonts

This plugin is ideal for those who are using a theme with no font controls, and want to add one or more of Google's free fonts to their website. If you are using our Hayes or Pearl themes, you should not install this plugin, as it will interfere with the default Google Font controls in the Font Options tab.

Use Any Font

If you've purchased a font from a third party vendor, but aren't experienced with integrating font files directly into code, Use Any Font is a great option. With the free version of the plugin, you can upload a single font, but apply it multiple places on your site. If you need to upload more than one font, you can purchase a license here. All licenses include the option to upload unlimited fonts.

USE ANY FONT WITH EMPRESS THEMES

As of early 2020, Use Any Font was compatible with EmPress Themes. To use:

1. Ensure you have .otf, .ttf, or .woff font files available. These are typically sent to you when you purchase/download a font from any vendor. .otf and .ttf files indicate desktop fonts; .woff files indicate web fonts. With Use Any Font, you can use either type.

2. Install and activate the plugin. (Learn how to install a plugin here.)

3. Navigate to the Use Any Font page by locating and clicking on the Use Any Font tab in your WordPress Dashboard menu, on the left side. 

4. Click the blue Generate Free Test API Key button. Then click the blue Verify button. If you have questions or issues with verifying your API key, please contact Use Any Font's developer directly.  When verified correctly, it will look similar to this:

5. Next, look for the Upload Fonts section. Click the blue Add Fonts button, then upload the font file of your choice. In the Font Name field, add a name for the font. It can be the true font name, or anything that will help you remember it. Here is a short video showing you this step:

6. In the Assign Fonts section, click the blue Assign Font button to expand the controls. From the Select Font dropdown, choose the font you just uploaded. Now, you can check off where you would like to assign the font. Under Normal Elements, you can one-click assign fonts to particular heading tags. Additionally, available Menu Locations in your theme will appear in the Menus section, allowing you to assign the font to specific menus if you choose. 

7. If you would like to apply fonts to an element of your site not covered in the default font assignment controls, you will need to add CSS selectors to the Custom Elements box to target those elements. The easiest way to figure out which CSS class selectors and/or ID selectors to target is to use the Inspect property in the Google Chrome browser. We have written a blog post about how to use the Inspect tool to identify code here.

EXAMPLE:

Here is a commonly requested example to walk you through these steps.

In this example, suppose we want to target the title for all interstitial content blocks in the Hayes theme. In Hayes, interstitial titles inherit from the widget that leads the interstitial, assuming it has an available title field. In our Hayes 1 demo, these include:

↑  The Hayes: Shop widget title, "From the Shop" (Note that here, the Hayes: Featured Post widget actually leads this interstitial, but because this widget does not have an available title field, the Hayes: Shop widget title will be the item that is impacted with this code.)

↑ The Hayes: Social Feed widget title, "Instagram."

1. Let's figure out the CSS IDs or classes. First, right click on the item you're targeting (in this case, one of the the titles), and select Inspect.

In the window that loads in the browser, you can see that the Inspect tool has identified the Instagram title as having the class: 

.interstitial .widget-title

This is a pretty good bet in terms of targeting all widget titles in all site interstitials!

2. But, if you're not sure, check another, just to see. In this instance, we'll check the "Instagram" widget title. Looking at the Inspect code, we can see this particular interstitial has some additional classes that write various stipulations about where and when the styles should be applied. But, scrolling down in the Inspect window, we can see this style still inherits from the .interstitial .widget-title classes. So targeting these classes will impact both interstitial titles in this demo.

HINT: As a general rule, longer strings of classes (i.e., more identifiers with dots/periods in front of them) will mean you're getting more specific about what the code will change. In our Instagram title above, you can see Inspect told us that this title is also targeted by:

.interstitial:not(#home-featured):not(#footer-featured):not(.after-interstitial-3):not(.after-nothing-found) .widget:first-of-type .widget-title, #em-grid-header h1

In layman's terms, this code is telling us that the font-size, letter-spacing, and text-transform styling properties of this title will apply to Interstitials that are NOT the Featured Interstitial on the Home Page, NOT the Featured Footer interstitial, NOT after Interstitial 3, not to be used on search pages, and SHOULD be applied to the first widget title in the interstitial (among a couple others!). Whew, that's a lot of stipulations!

But scrolling down in Inspect, as we show in the video above, can show you classes that these longer strings of CSS inherit from. By using these shorter strings of CSS classes, you will target a broader number of elements on your site. The flip side is you should test these in the Customizer to ensure it's making changes where you want them. Click around to multiple pages and posts in your Customizer preview to see how the changes are implemented!

3. Now that we have identified the class we want to target, we can add it into the Use Any Font Custom CSS box. Type in the ID or class, then click Assign Font.

4. If properly targeted, the font should now be applied to the desired areas of your site! You can use controls in the Font Options tab of the Customizer to further style these fonts, or write your own custom CSS styles under Appearance > Customize > Additional CSS. 

For example, by going to Font Options > Accents, I can further style the custom font in this sample Hayes blog:

Or, use the Color Options tab to change the color. Keep in mind this may impact other parts of your site, too!

5. If you wish to get more targeted in where and how you are applying styles, OR if your particular theme has max size settings in the Font Options tab, you will need to write custom CSS for your newly styled fonts under Appearance > Customize > Additional CSS.

CHANGE FONTS WITH ADOBE FONTS

If you are an Adobe Creative Cloud subscriber, you automatically have access to Adobe Fonts. Adobe Fonts offers a huge repository of beautiful, unique fonts, most of which cannot be accessed on Google Fonts. Adobe works with a large number of well-known font foundries, so you can take advantage of Adobe Fonts vast selection and add lesser known fonts to your site for a more customized, branded experience.

With their Typekit Web Font program, quickly and easily add the web font files for your favorite fonts to your website. Use the links below to get started:

Before proceeding, note that EmPress cannot offer any assistance with setup or customization of Adobe Fonts. If you opt to integrate fonts via Adobe Fonts and need assistance, please contact Adobe support directly. 

INTEGRATE FONTS WITH @FONT-FACE

This is for advanced users who feel comfortable working with FTP and server files.

If you have purchased a web font file from a third party vendor but do not wish to use the Use Any Font plugin, you will need to upload the font files to your WordPress server. This can be done via FTP, or with the cPanel dashboard for your hosting provider.

More guidance on this process may be found at WP Beginner, here. Scroll down and look for the section titled, "Adding Custom Fonts in WordPress Using CSS3 @font-face." 

After uploading the font file, follow the article's instructions for loading the font in Additional CSS, using the @font-face method as mentioned.

Once successfully added, you may style the font as you wish under Appearance > Customize > Additional CSS. The section below provides additional guidance on how to write these styles.

MORE GUIDANCE ON STYLING FONTS IN ADDITIONAL CSS

When making any CSS styling changes to your site, you should always add them under  Appearance > Customize > Additional CSS. Doing this will ensure your styles stay in place when you run any theme or plugin updates. Adding them directly to your theme files means they may get overwritten in the future, and you'll lose them!

The guidance below assumes you have either uploaded your custom font using a third-party plugin, added it via scripts provided by Google Fonts or Adobe Fonts, or that you have directly uploaded the font files to your server using the @font-face method.

1. To begin, start by navigating to the Additional CSS tab, and adding in the ID or class selectors you wish to target. Here is an example:

When adding any selectors, begin by typing them in, then adding an open bracket, like this  { 

The WordPress Customizer should automatically add a closing bracket, like this  } 

You will add your CSS styles in between these two brackets.

2. Next, you can write styles for your font. Common CSS properties for font styling include:

  • font-family (to change the font itself)
  • font-size (to change font size)
  • font-style (allows you to add italic and bold styles, if available; or add faux-italic style via the oblique property)
  • font-weight (allows you to customize font boldness, pending the font you have uploaded and styles available)
  • line-height (changes space between lines of text)
  • letter-spacing (changes space between individual letters)
  • text-transform (allows you to make text all uppercase, all lowercase, and more)
  • text-align (allows you to left, center, or right align text)
  • text-decoration (allows you to add underline to text, and more)
  • text-decoration-color (allows you to customize the color of text-decoration styles added)
  • color (allows you to change font color)

Click on any of the links above to learn more about each property, and to test it at W3 Schools. You can also view all CSS properties by clicking here (note, not all of these will impact fonts).

3. When writing CSS styles, add a colon after each property, and be sure to use a semi-colon to separate various styles. Here is an example:

.widget-title {font-size: 150%; letter-spacing: .05em; text-transform: lowercase; color: #000000;}

The code above would target ALL widget titles sitewide on this theme. It would increase the font size by 150% of the default/inherited font size, change the letter spacing by .05em, ensure all widget titles were lowercase, and change their color to black.

WHERE TO BUY FONTS

Below are some of our favorite resources to find fonts for your website:

SOAPBOX: USING FREE FONTS

Fonts, just like other types of software, usually include an End User License Agreement, which stipulates how they can be used. When using any font, whether free or purchased, be sure to carefully read the licensing agreement, so you understand where and how you can use the font. Think about it like this: You spend a lot of time creating content for your blog, and would probably have feelings if people lifted your content and used it either for profit, illegal means, or some other method that you were uncomfortable with. Artists and small businesses who create fonts are no different—so honoring and respecting a font license is always a good call.

Similarly, you may come across websites that appear to offer "free" versions of fonts that look nearly identical to a paid font you found elsewhere. Tread lightly here—because of the nature of digital files, it's not uncommon for people to upload font files on these types of sites, name them something else, and distribute an artist's work free of charge. In other words, these fonts may be pirated.

While it's tempting to use a seemingly free version of an otherwise expensive font when you are first starting out, do bear in mind you may be stealing from an artist or small business. When it comes to using free fonts, stick to the reputable sites like Google Fonts, or the ones we've noted above as offering free fonts.