How to add custom fonts to WordPress

Last edited:
September 13, 2018
Posted in:

Hello, WordPress lovers! In today's blog post, I am showing you how to add custom fonts to your WordPress website.Today’s tutorial is part of our series Master WordPress.Here’s an overview of all blog posts from this series:

How to set up and customize menus in WordPress

How to add custom fonts to WordPress (this post)

WordPress sidebar design- best practices

How to set up an online shop on WordPress

Fonts are an important part of your website's design and can help you perfect your overall branding experience. Each WordPress theme comes with a different layout and design options, but more often than not, you have a pre-defined font. There's an easy way to change it. Follow my step-by-step guide below to add custom fonts to your Wordpress website.Note: For the purposes of this tutorial, we will be using a free plugin which makes use of Google Fonts. Google Fonts is a free service offered by Google, which gives you access to hundreds of free custom fonts. Most website developers use Google Fonts as they are reliable and, well, you don't need to pay anything! ;) If you want to use fonts that are not part of the Google Fonts library, then this tutorial is not for you.

Step 1: Download the Easy Google Fonts plugin

While there are several different ways of adding Google fonts, the easiest way for a non-coder is to add them using a plugin. My favorite plugin is called Easy Google Fonts. I love this plugin, not only because it's easy to use, but because it comes with tons of features like real-time preview, custom font controls, possibility to group fonts together, and much more. Best of all- it doesn't require ANY coding skills. Yay!Log into your WordPress Dashboard and go to Plugins > Add New. After that, type in Easy Google Fonts in the search bar. Locate the plugin and click on Install Now. After that, activate it.

add custom fonts wordpress

Step 2: Create a font control

In your Dashboard, go to Settings and locate Google Fonts. After clicking on it, you should see the following window:

add custom fonts wordpress google fonts lipstick and pixels

Start by creating a new "font control". You can name it however you want. After that, click on Create Font Control.

add custom fonts wordpress google fonts lipstick and pixels

Make sure to check the Force Styles Override option, which will basically make your WordPress theme use the fonts you define in this plugin.

Step 3: Customize the fonts on your website

Go to Appearance > Customize from the main dashboard. The customization panel will appear. You will notice the plugin has added a new customization option called Typography.

add custom fonts wordpress google fonts lipstick and pixels

Click on it in order to explore all settings. Since the plugin offers a real-time preview, you can play around with the fonts and see which combination you like best.Here's how I would change the blog post headlines for Lipstick and Pixels:


add custom fonts wordpress google fonts lipstick and pixels


add custom fonts wordpress google fonts lipstick and pixels

In addition, you can specify the font weight, add text-decoration, and a bunch of other features. You should feel free to experiment with all those features in order to achieve the results that you are looking for.One last thing I want to point out is that there are multiple tab controls for each font style. Make sure to check out the Appearance section where you can change the color of the fonts!

add custom fonts wordpress google fonts lipstick and pixels

From this panel, you can adjust the font size, line height, and the letter spacing of the fonts used. You can preview every single feature and nothing will get saved until you click on Save & Publish button at the upper left corner.In case you want to go back to the default theme settings, simply click on the Reset text button.

Final thoughts:

If you don't have any coding skills and want to change the look and feel of your WordPress website within a few minutes, this might be the fastest and easiest way! However, Warning: I don't recommend using more than 2 different font styles on your website. It will not only make your website look messy but might also slow it down ( and we most certainly don't want that)!

I hope you enjoyed today's tutorial! If you did, I would love it if you share this post with your friends 💖

Want to have a beautiful, well-converting sales page? Grab our latest sales funnel KIT!

Take a look at out latest sales funnel template kit for Webflow.
You will be able to upload your own fonts and edit the sales templates in seconds using the video tutorials included in your purchase. Get it for $29 pre-launching now.