A Complete Guide to WordPress Fonts

Fonts help you create a visually appealing site and reinforce your brand identity. However, the default WordPress typography might not suit your requirements or preferences.

The good news is that it’s really simple to change fonts in WordPress. You can even adjust the individual font types for your headings, content, links, buttons, and more. Better yet, you have the option to upload different fonts from external libraries.

In this post, we’ll show you how to switch fonts in WordPress, depending on your theme. Then, we’ll discuss two ways to upload your own fonts. Let’s get started!

#How to Change Fonts in WordPress (3 Ways)

When you install a WordPress theme, your site inherits its styling. This determines your website layout, colors, fonts, and more.

That said, here are three ways you can change your WordPress fonts.

1. Use the Customizer

If you use a classic theme, you can adjust the font settings in the WordPress Customizer.

Navigate to Appearance > Customize from the admin dashboard. You’ll see all the tabs listed to the left of the editor.

The font section may be called something different, depending on your theme. For instance, if you’re using Kadence, you’ll find it under Colors & Fonts. But with OceanWP, you’ll need to navigate to the Typography tab:

The way to edit the font will depend on your theme’s options. With OceanWP, you can set different WordPress fonts for each type of heading and the main body text:

Click on the option you want to change to see what’s available. For example, you might be able to change the font family:

You might even be able to choose from additional font weights (and apply a bold style), and edit the line height, letter spacing, and font size.

If you want to change the way your WordPress fonts appear, you can use the Text Transform and Text Decoration settings. You can also change the font color of the body text.

2. Use the Site Editor

If you have a block-based theme, you’ll need to use the Site Editor to modify your WordPress fonts.

From the WordPress dashboard, head to Appearance > Editor > Styles:

If your chosen theme offers style combinations, you can click on the pencil icon to access the options.

This will launch the editor where all styles will display to the right of the screen. Click on Typography:

Here, you’ll see all the WordPress fonts available with your theme. Scroll down to Elements, where you can edit the font styles for your body text, titles, links, captions, and buttons:

You can adjust the font family, font size, line height, letter spacing, and letter case:

You can also use the Appearance dropdown if you want to make your fonts bold or italic. Changes will take effect immediately in the editor. Then, simply save your changes.

3. Use the Block Editor

The previous two methods enable you to change global fonts across your entire WordPress site. However, you can use the Block Editor to modify WordPress fonts on a page-by-page basis.

To get started, you’ll need to create a new page or edit an existing one. Then, select a text-based block like a paragraph or heading.

Switch to the Block settings and click on Styles. Here, you can change the color of the text and background:

You can also choose from five pre-set font sizes, or set a custom size:

If you click on the three dots beside the Typography section, you’ll find additional font options. By clicking on each of these, you can add them to the Typography section:

These settings are similar to what you find in the Customizer and Site Editor. So, you can edit the font type, letter spacing, line height, decoration, etc.

There are two additional font settings here. The first enables you to change the orientation of text while the second lets you add a drop cap to display a large first letter.

#How to Add Custom Fonts in WordPress (2 Ways)

Although you have a large selection of font styles available in WordPress, you can upload custom fonts if you want more options.

Perhaps you have a specific font that’s already tied to your brand identity. You can find unique typography on Google Fonts and Adobe Fonts.

Note that custom fonts can slow down your WordPress site, so it’s best to stick with just one or two styles.

So, here’s how to add custom fonts in WordPress.

1. Use a WordPress Plugin

The simplest way to upload custom fonts is to use a plugin like Fonts Plugin.

This tool supports Google Fonts and Adobe Fonts. It also includes a live preview feature so you can see if a font looks good on your website.

Once you’ve installed the plugin, go to Fonts Plugin > Customize Fonts. This will launch the Customizer, where you should see a new Fonts Plugin section:

In the Basic Settings, you can configure font families for your content, titles, fields, and buttons. Here, you’ll find over 1400 Google Fonts.

After that, jump to the Advanced Settings to control how fonts display in specific parts of your website. For instance, the Content section enables you to pick the best font style for lists, quotes, and headings:

You can also use the dropdown menus to select the best WordPress fonts for your website footer, navigation, sidebar, and more. When you’re happy with the changes, click on Publish.

2. Upload Fonts to Your Theme Folder

If you don’t want to use a plugin, you can upload your desired font manually in just two steps. However, you’ll need to be comfortable accessing your website files.

We recommend making a fresh backup of your site before proceeding. You might also want to use a child theme to prevent changes from being overwritten during theme updates.

Upload the Font to Your Theme Folder

You’ll first need to select the font you want to use from the Google Fonts library or similar. The available styles for each font will appear below.

When you’ve found one you like, click on Get font and download it to your computer:

You may also need to extract the .zip archive.

Now, you’re going to upload the file to your web server. You can connect to your website files using File Transfer Protocol (FTP).

Then, open the root directory and go to wp-content > themes. Your theme may have a dedicated fonts folder (typically stored within assets).

If not, you can create your own folder within the theme directory. Once that’s done, upload the font file here.

Add Your CSS Code

Although you’ve added the file to the server, you’ll still need to instruct WordPress to use it instead of the default system fonts.

The best way to do this is to add some CSS code. There are two ways you can do this.

You can either open the WordPress Customizer and scroll down to the Additional CSS section:

Or, you can edit the style.css file in your theme directory (via FTP).

You could also go to Appearance > Theme File Editor and locate the style.css file that way instead:

Whichever method you choose, you’ll need to insert the following code:

@font-face {
font-family: Open Sans;
src: url(http://www.yourwebsite.com/wp-content/themes//fonts/open-sans.ttf);
font-weight: normal;
}

Replace the font type (Open Sans) and URL with the right information for your site.

You might prefer to apply the new font to specific elements like your site title. In this case, you’ll need to add some extra code such as:

.h1 site-title {
font-family: "Open Sans", Arial, sans-serif;
}

This sets the font to Open Sans first, and then Arial and sans-serif as fallback options (in case Open Sans can’t display in the user’s browser or device).

You can also add multiple elements to change the font in additional locations. When you’re ready, save your changes.

#Conclusion

Your site’s fonts help convey the tone and personality of your brand. The typography is typically determined by your theme, but WordPress gives you a lot of flexibility over your font choices and styles.

You can change WordPress fonts via the Customizer, Site Editor, or Block Editor. You also have the option to apply different fonts to different elements, like headings, main body, and buttons. If you want to use a Google font, you can add it to your site via a plugin like Fonts Plugin.

Do you have any questions about customizing your WordPress fonts? Let us know in the comments below!