Looking for a way to add your own custom WordPress fonts to your site?
Your WordPress theme probably comes with its own set of fonts for you to choose from, but the options can be pretty limited, so it’s totally understandable that you’d want to add your own WordPress fonts instead.
In this post, you’ll learn how to upload and use any font in WordPress via a few different methods.
In case you’re not familiar with the idea of using your own WordPress fonts, we’ll start with a quick primer on where to find custom fonts and how to pair them.
Then, we’ll show you how to add custom WordPress fonts from:
Click this link to jump straight to the tutorials.
The most well-known place to find custom WordPress fonts is definitely Google Fonts. At Google Fonts, you’ll find a repository of more than 900 fonts, all of which are free and super easy to integrate into your WordPress site thanks to Google’s CDN.
After Google Fonts, another well-known option is Adobe Fonts (formerly called Typekit). Adobe Fonts are included at no extra cost as part of Adobe’s Creative Cloud subscription, but they are not available to non-subscribers.
Finally, you can find lots of other sites that aggregate free and premium fonts. Two of our favorites are:
Typically, you won’t use a single font at your WordPress site. Instead, most sites use pairs of fonts to create a more interesting design and help differentiate content.
However, you don’t want to just randomly throw two fonts together – that might not look too hot.
Instead, you need two fonts that work together which, if you’re not a designer, can be tough to figure out.
To help, there are a bunch of great sites that will suggest font pairs for you. For example, if you find one font you absolutely love, you can use one of these sites to find a pair for it. Some of our favorites are:
While there’s no rule saying that you can only use two fonts, you should be wary of using too many WordPress fonts. Beyond the potential for creating a chaotic design, using too many custom fonts can also slow down your site’s load times.
Now for the fun part – here’s how to start using your own custom WordPress fonts.
There are a few routes you can take here depending on where you want to source your fonts from.
Here are the three methods that we’ll cover. Again, you can click on a link to jump straight to a specific tutorial:
Because Google Fonts is the most popular source for custom WordPress fonts, we’ll cover three different ways to add Google Fonts to WordPress:
Because of Google Fonts’ popularity, you can find several quality plugins that make it super simple to add Google Fonts to WordPress, with our favorite being Easy Google Fonts because it’s:
Once you install and activate the plugin, go to Appearance → Customize in your WordPress dashboard to launch the real-time WordPress Customizer.
Then, click on the Typography option to choose your Google Fonts options:
From there, you can use the options to choose a custom font for each element on your site:
For example, here’s what it looks like to change the paragraph font:
Beyond choosing the font itself, the plugin also lets you customize the:
If you know your way around a little CSS, you can also use the plugin’s Font Controls feature to group together certain elements. For example, you could combine header selectors to target all of your headers at once.
To set this up, go to Settings → Google Fonts and create a new Font Control to target specific CSS selectors:
Because Google hosts all of its fonts on its own CDN, it’s also pretty easy to manually add Google Fonts to WordPress.
Basically, instead of needing to upload the font files to your server, you can just link to Google’s hosted CDN and Google will handle serving up the fonts for you.
Some people don’t like doing this for performance reasons – I’ll share a way to locally host Google Fonts in the next section, if you want.
To get started, you need to use the Google Fonts website to choose the font you want to add.
For this example, let’s say you want to use Roboto.
Go to the font’s page and click + Select This Font:
This will add a window in the bottom-right corner. Click to expand that window.
If you want to choose additional font weights (e.g. for bold and italic), you can go to the Customize tab. For a good balance between usability and performance, we recommend choosing three font weights at an absolute maximum:
You can even use fewer if you want the best performance.
Once you’ve made your choices, go back to the Embed tab and copy the Embed Font code:
Next, you need to add this code to the <head> section of your WordPress theme. You can do this by:
Once you’ve added the code, you can start using Google Fonts in your CSS.
If you go back to the Google Fonts website, Google will actually tell you the CSS rules that you need to use:
For example, to have your h2 tags use your new Roboto font, you could go to Appearance → Customize → Additional CSS and add the following snippet:
h2 {
font-family: ‘Roboto’, sans-serif;
}
Here’s the final method for Google Fonts!
Some people prefer to host Google Fonts locally, rather than loading them from Google’s CDN. That is, rather than loading them from a link like “https://fonts.googleapis.com/css?family=Roboto:400,700”, you can host the files on your own server.
The easiest way to do this is with a free plugin called CAOS for Webfonts.
Once you install and activate the plugin, you can go to Settings → Optimize Webfonts to choose which fonts you want to download to your server:
Once you’ve done that, you can start using the font(s) in your CSS (just as if you were following the previous method).
If you’d like to use Adobe Fonts in WordPress, you can essentially follow the same steps as the manual Google Fonts method. Remember, the Adobe Fonts service is only available as part of the Creative Cloud subscription.
To get started, you’ll need to use the Adobe Fonts website to choose your fonts and create a web project (detailed instructions here).
In the Add fonts to Web Project window, you can choose which fonts to include:
Then, Adobe will give you an embed code, just like Google Fonts:
Take that embed code and add it to your site using either your child theme’s header.php file or a plugin like Insert Headers and Footers.
Once you’ve linked to the CSS file, you can use the CSS that Adobe provides to start applying the font to CSS selectors at your site:
Finally, the last method we’ll show you is how to use @font-face in WordPress. The nice thing about this method is that it will work with literally any font file from any source.
Basically, as long as you can download the font file and have the rights to use it, CSS3 @font-face will get it done.
To get started, download the font file from your preferred source. For this example, we’ll use a free font from Font Squirrel called Alex Brush.
If possible, try to download the file in the .woff or .woff2 file formats for the best cross-browser compatibility. If that’s not possible, you can download your font in a different format and then use the free FontSquirrel Webfont Generator tool to convert it to .woff:
Next, connect to your WordPress site’s server via FTP or cPanel File Manager. Then…
Once you’ve uploaded the files, go to Appearance → Customize → Additional CSS in your WordPress dashboard.
First, you need to use @font-face to add your font…
To do that, enter your font’s name as the font-family and add the direct URL to the font file on your server as the URL. Here’s what it looks like for our AlexBrush example:
@font-face {
font-family: AlexBrush;
src: url(http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);
font-weight: normal;
}
Once you’ve done that, you can use CSS to apply your font family (by the name you registered with @font-face). For example, here’s what it looks like to use the AlexBrush font for <h2> headers:
And that’s it! You can use this CSS3 @font-face method for literally any font file.
If your WordPress theme doesn’t have the fonts you want to use, don’t panic! You have lots of options for adding your own custom WordPress fonts.
The easiest way to get started is with the hosted free fonts at Google Fonts or the hosted premium options at Adobe Fonts.
However, you’re by no means limited to those services, and by using CSS3 @font-face, you can upload literally any font file to WordPress and start using it in your theme.
Now get out there and create your own font pairing!