Do you want to add custom fonts in WordPress? Custom fonts enhance your website’s typography and user experience by allowing you to use a diverse range of beautiful fonts.
At WPBeginner, we’ve added custom fonts to many of our partner websites, so we know how much they can enhance a site’s visual appeal.
Apart from looking good, custom fonts can also help you improve readability, create a brand image, and increase the time users spend on your WordPress website.
In this article, we will show you how to add custom fonts in WordPress using Google Fonts, TypeKit, and the CSS3 @Font-Face method.
Note: Loading too many fonts can slow down your website. We recommend choosing two fonts and using them across your website. We’ll also show you how to properly load them without slowing down your website.
Before we look at how to add custom fonts in WordPress, let’s take a look at finding custom fonts that you can use.
How to Find Custom Fonts to Use in WordPress
Fonts used to be expensive, but not anymore. There are many places to find great free web fonts such as Google Fonts, Adobe Fonts (formerly Typekit), FontSquirrel, and fonts.com.
If you don’t know how to mix and match fonts, then try Font Pair. It helps designers pair beautiful Google fonts together.
As you are picking your fonts, remember that using too many custom fonts will slow down your website. This is why you should select two fonts and use them throughout your design. This will also bring consistency to your WordPress design.
With that being said, let’s take a look at how to add custom fonts in WordPress. This is what we will cover in this tutorial:
Adding Custom Fonts in WordPress from Google Fonts
Google Fonts is the largest, free, and most commonly used font library among website developers. There are multiple ways you can add and use Google Fonts in WordPress.
Method 1: Adding Google Fonts Using a WordPress Plugin
If you want to add and use Google Fonts on your website, then this method is by far the easiest and recommended for beginners.
The first thing you need to do is install and activate the Google Fonts Typography plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Deal: If you want to get the premium version of the plugin, then make sure to use our Google Fonts for WordPress coupon for a 20% discount. This will let you change the font color and size in your WordPress theme and more.
Upon activation, you will be given the opportunity to enter your email address to receive the official Quickstart guide.
Next, you’ll need to click on Fonts Plugin » Customize Fonts in the admin sidebar.
This will automatically take you to the WordPress theme customizer, and automatically open the new ‘Fonts Plugin’ section.
Here you can choose the default fonts for your website in the ‘Basic Settings’ section, and fonts for the specific parts of your website under ‘Advanced Settings’.
Let’s start by clicking on ‘Basic Settings’. Here you can select the fonts for your content, headings, and buttons and fields.
The ‘Font Family’ drop-down menus let you choose a new font. You will find the default font at the top, then the system fonts, and finally a huge list of over 1400 Google fonts.
When you choose a new font, the preview will automatically change to show you how it looks.
Now you can use the plugin’s advanced settings to fine-tune your font selections.
You will need to click the ‘
