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:
- Google Fonts
- Adobe Fonts (Typekit)
- Literally anywhere else! (by uploading a font file and using CSS3 @font-face)
Click this link to jump straight to the tutorials.
Where to Find Custom Fonts for WordPress
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:
- Font Squirrel – collects fonts that are 100% free for commercial use.
- Fonts.com – has a big collection of premium fonts.
How to Pair Fonts So That Your Site Looks Awesome
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.
How to Add Custom WordPress Fonts: Step-by-Step Guides
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:
- Add Google Fonts in WordPress (plugin, manual, or local hosting methods)
- Add Adobe Fonts (Typekit) in WordPress
- Use CSS3 @font-face to Upload and Add Any Font in WordPress
How to Add Google Fonts to WordPress
Because Google Fonts is the most popular source for custom WordPress fonts, we’ll cover three different ways to add Google Fonts to WordPress:
- Add Google Fonts from Google’s CDN with a plugin
- Manually add Google Fonts from Google’s CDN
- Host Google Fonts locally in WordPress with a plugin
How to Add Google Fonts in WordPress Using a Plugin
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:
- Free
- Lightweight
- Easy to use
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:
- Font weight
- Text decoration
- Colors
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:
How to Add Google Fonts in WordPress Without a Plugin
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:
- Regular
- Italic
- Bold
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:
- Directly editing the header.php file of your child theme (make sure you use a child theme – otherwise, your custom fonts will disappear when you update your theme)
- Using a free plugin like Insert Headers and Footers
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;
}
How to Host Google Fonts Locally in WordPress With a Plugin
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).
How to Add Adobe Fonts (Typekit) in WordPress
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:
How to Use @font-face in WordPress
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…
- Create a new folder named fonts inside your active theme or child theme’s directory (some themes might already have a fonts folder. If that’s the case, you can skip this).
- Upload the font file to the fonts folder. You can upload both the .woff and .woff2 formats
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.
Final Thoughts on Custom WordPress Fonts
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!
