How to add custom fonts to your WordPress website

by

 How to add custom fonts to your WordPress website

#DesignerConfession

If there’s one thing us graphic designers love more than a delicious colour palette it’s a gorgeous font, right?

My favourites are handwritten script fonts like this one I purchased from Creative Market 👇

Tantinotes handwritten font from Creative Market

I love using them in my branding projects and web designs, but unfortunately, adding your latest custom font purchase to a WordPress website isn’t as easy as 1-2-3.

Or is it?

Due to some recent updates, if you’re using a WordPress page builder like Divi, Elementor or Beaver Builder, then it’s actually a piece of 🍰!

And I’m going to show you exactly how I did this 👇 in a few simple steps…

Example of using a custom font on WordPress website

Installing Custom Fonts in WordPress: What you need before getting started

But before we dive in, here are a few things you’ll need.

If you’re not using a page builder like Divi, Elementor or Beaver Builder already, you’ll want to check them out! Trust me. Using a visual page builder like these bay boys make building websites as easy as using Photoshop or Illustrator. Plus, the methods I’m going to show you work with these page builders.

Next, you’ll need to make sure you have a license for your chosen font that allows you to use it on a website. Often if you have a desktop license this isn’t enough. On Creative Market for instance, you’ll need to purchase the Webfont license. NOTE: For the Pageviews option, up to 10K pageviews/month is sufficient for most small business websites.

Purchase a webfont license on Creative Market

Depending on the font you purchase, you may receive it in anything from 1 to 6 different file formats. In order to ensure your pretty font works in as many different web browsers as possible, you’ll want to have it in as many different file formats as possible too.

Not to worry if you only received a couple of different file formats i.e. .ttf, .otf, etc. You can quickly and easily generate more files using this handy little tool by Font Squirrel.

Font Squirrel Webfont Generator

Simply upload your font, agree that you own the webfont license and generate your font in .woff and .woff2 file formats.

So now you have your font files all ready to go, it’s onto the method…

Adding Custom Fonts To Your Divi Website

If you’re Divi diva like me, you’re going to be doing cartwheels when I show you just how easy it is to add a custom font to your Divi website.

Recently, Elegant Themes — the heaven-sent web geeks who’ve gifted us all with Divi — made adding a custom font to our Divi sites oh-so-easy!

 

Here’s how to add a custom font to your Divi website:

STEP 1: From any module, under the Design tab, find the text you’d like to be in your custom font (i.e. Body text, H1, H2, etc.)

STEP 2: Click on the font dropdown box, then click the Upload button.

STEP 3: From the Upload Font screen: Name your font; Choose the font file/s from your computer ensuring they’re in one or more of the supported formats; For Supported Font Weights I generally tick All so I have all the weights to choose from; Click Upload.

STEP 4: Adjust the sizing, colour, etc. for your text and click the Save button.

Adding a custom font to Divi

 

Now you’ll be able to select your custom font from any font dropdown box within the Divi builder. It’s not just for Text modules either. You can add a custom font to your testimonials, buttons, sliders, to ANY module your creative heart desires.

See… piece of cake, right! 🍰😍

Adding a Custom Font To Your Beaver Builder or Elementor Website

If you’re a Beaver or Elementor gal the process is a little different but it’s still easy peasy.

Custom Fonts Plugin

Here’s how to add a custom font to your Elementor or Beaver Builder website:

STEP 1: Go to Plugins > Add New > search for, install & activate Custom Fonts by Brainstorm Force

STEP 2: Once activated go to Appearance > Custom Fonts > then upload your font in all the different formats possible for the best browser compatibility.

And that’s it baby!

Now when you go to set the font for your text in your builder, your new fancy font will be in the list of fonts to choose from.

BONUS: If you’re using the Astra theme it will appear there too! 

Example of using custom font on Elementor website

 

The Wrap Up

The huge range of Google Fonts come in built with all good WordPress themes these days. And although I love it — my love affair with Raleway and Playfair continues — it lacks a decent selection of handwritten and script fonts.

But now you can see just how darn easy it is to add whichever pretty font your heart desires to your website.

Below are the tools I use. If you give one of these methods a go I’d love to see what you come up with! Share a link in my private Facebook Group Designers Learning Web Dev so we can all get our #DesignNerd on gushing over your gorgeous fonts.

Tools I Use:

Grab Your FREE & Pretty Website Roadmap for Graphic Designers

For all the ins and outs of creating beautiful websites (without a developer).

👇

About the author
Hi! I'm Emma. I’m a graphic designer turned web designer on a mission to teach others how to build beautiful & professional websites with WordPress. Through mentoring and my online courses I teach other graphic designers and entrepreneurs how to build their own websites using my 9-step process. In my spare time I love writing about my freelance life, creating pretty things and hanging out with my fur-baby. Find me on Facebook & in my Private FB Group for Designers

Cupcakes on you?

Disclosure: Some of the links I share are affiliate links. This means at no extra cost to you if you click on one and make a purchase I may receive a small commission (i.e. tea & cupcakes are on you 🥰🧁). But of course, I will only ever recommend tools or services I have tried, tested and above all LOVE.