How To Add Custom Fonts To Your WordPress Website

In this post I show you how to add custom fonts to your website if you're not using Elementor. With the options in this post you can only add Google Fonts, but there are so many Google Fonts that you'd be hard pressed to not find what you're looking for.
Share on email
Share on mix
Share on whatsapp
Share on linkedin
Share on reddit
Share on facebook

Get WordPress tutorials and online marketing tips delivered to your digital door

My articles are FREE to read. But when you buy through my referral links I earn commission. You don't pay more but I get rewarded for my hard work. It's like a salesman in a shop showing you the goods. Thanks for your support. I really appreciate it.
Table of Contents

In a previous post I showed you how to add custom fonts to your website using Elementor Pro.

In this post I’ll show you how to add custom fonts if you’re not using Elementor Pro.

The options dealt with in this post allow you to add Google Fonts only, not custom fonts like you would be able to with Elementor, as shown in my other article.

Using Page Builder Framework

Page Builder Framework comes with Google Fonts built in, just like Elementor.

It gives you control over the following elements:

  • Site Title
  • Tagline
  • Body text
  • Headings
    • H1
    • H2
    • H3
    • H4
    • H5
    • H6

Here’s how to add custom fonts to your WordPress website using the Page Builder Framework.

Download the theme

To install custom fonts using Page Builder Framework, you need to get Page Builder Framework.

That’s easy.

Simply visit the Page Builder Framework website and download the theme to your computer.

Install the theme

Now it’s time to install Page Builder Framework.

This is also an easy task. If you’re not sure how to, read my post about how to install a WordPress theme.

Activate the theme

Let’s activate the theme from the WordPress dashboard, which you need to be logged into before you continue.

In The Left Hand Sidebar, Hover Over Appearance And Click On Themes
In The Left Hand Sidebar, Hover Over Appearance And Click On Themes.

If you’re dealing with a fresh WordPress installation your theme will automatically be the one most recently available with your install.

In my case, WordPress’ 2020 theme is active.

Let’s change that.

Hover Over The Page Builder Framework Image, Then Click On The Button That Says Activate Once It Pops Up
Hover Over The Page Builder Framework Image, Then Click On The Button That Says Activate Once It Pops Up.

Your WordPress now sports the Page Builder Framework theme.

Edit your fonts

Now we’ll use the WordPress Customizer to set up Google Fonts.

In The Left Hand Sidebar, Click On The Customize Menu Item Under Appearance
In The Left Hand Sidebar, Click On The Customize Menu Item Under Appearance.

This opens the WordPress Customizer, along with settings specific to the Page Builder Framework theme.

Click On The Typography Menu Item In The Left Hand Sidebar
Click On The Typography Menu Item In The Left Hand Sidebar.

An option opens that lets you modify the site title, tagline, menu text, text and headline text.

For this tutorial I’ll modify only the option that reads Text. This affects all font options for the site, so the font you choose here applies to ALL text on the site. It’s like the base font setting.

Click On The Text Menu Item
Click On The Text Menu Item.
Activate Font Settings
Activate Font Settings.

When you activate font settings, you’re presented with a box to choose a font from, as well as the variant for that font. (If the font you choose comes with only a single variant, the Variant option won’t show.)

The default font for Page Builder Framework is Helvetica.

Page Builder Framework doesn’t ship with every single Google Font. That’s because new fonts are regularly added to Google Fonts, making it near impossible for Page Builder Framework to remain up to date real-time.

However, Page Builder Framework is regularly updated and new Google Fonts added to the theme.

Let’s change the site’s font.

Click On The Font Family Dropdown
Click On The Font Family Dropdown.

You can scroll down the list of fonts or type in a name for the font you’re looking for.

In this case we’ll type in the name of the font we want, which is Balsamiq Sans.

Typing “bals” into the search box brings up Balsamiq Sans.

Click On Balsamiq Sans
Click On Balsamiq Sans.
Click The Publish Button
Click The Publish Button.

Now all text on the site is Balsamiq Sans.

The premium add-on

Although Page Builder Framework is a phenomenal theme (it’s my go-to theme), the following settings are missing from the free version:

  • Font color picker.
  • Responsive font sizes.
  • Font line heights.
  • Letter spacing.
  • Text capitalization control.

The Page Builder Framework premium add-on, however, grants you access to those settings.

Using the Google Fonts Plugin

Another method to add custom fonts to your website is to use the Google Fonts plugin.

(When you use Page Builder Framework you don’t need the Google Fonts plugin.)

The standard Google Fonts plugin comes with some limitations. The upgrade gives you a few handy extras:

  • Customize your fonts’ size, line heights and color.
    • Make your website fonts look exactly the way you want them to look.
  • Load only the fonts you need with the built-in automatically optimized font loading function.
    • Speed up your website’s loading time by having only the fonts you use, loaded.
  • Define which elements you want to be able to customize inside the customizer.
    • Get fine-grained control of every text element of your website.

Here’s how to add custom fonts to your WordPress website using this plugin.

Install the plugin

In The Left Hand Sidebar, Hover Over Plugins And Click Add New
In The Left Hand Sidebar, Hover Over Plugins And Click Add New.
The Page Where You Add New Plugins
The Page Where You Add New Plugins.
In The Right Hand Corner, Inside The Search Bar, Type The Word Font
In The Right Hand Corner, Inside The Search Bar, Type The Word Fonts.

That should bring up the Google Fonts Plugin near the top.

The Fonts Plugin Shows Up Near The Top
The Fonts Plugin | Google Fonts Typography Plugin Shows Up Near The Top.
Click The Install Button For The Fonts Plugin Google Fonts Typography Plugin
Click the Install button for the Fonts Plugin | Google Fonts Typography plugin.

Activate the plugin

Once The Plugin Is Installed, The Button Will Change Color And Read Activate. Click The Activate Button
Once The Plugin Is Installed, The Button Will Change Color And Read Activate. Click The Activate Button.

Edit your fonts

Once the plugin is installed you can change your fonts through the WordPress Customizer.

In The Left Hand Sidebar, Click On The Customize Menu Item Underneath Appearance
In The Left Hand Sidebar, Click On The Customize Menu Item Underneath Appearance.
In The Left Hand Sidebar, Click On The Google Fonts Menu Item Near The Top
In The Left Hand Sidebar, Click On The Google Fonts Menu Item Near The Top.

For this tutorial I’ll only change the base typography.

Click On The Menu Item That Reads Basic Settings
Click On The Menu Item That Reads Basic Settings.
Click On The Dropdown Option That Reads Default Font For The Base Typography
Click On The Dropdown Option That Reads Default Font For The Base Typography.
Choose From One Of The Google Fonts
Choose a Google Font.
Click The Publish Button To Save Your Changes
Click The Publish Button To Save Your Changes.

In conclusion

The Page Builder Framework theme is a good companion for page builders like Elementor or Beaver Builder.

It comes with many Google Fonts, which means you don’t need a font plugin if you use it. However, it doesn’t come with all Google Fonts, since Google’s font repository is an active project to which new fonts are regularly introduced.

The free version also lacks some features, but the premium add-on more than makes up for it.

If you don’t use Page Builder Framework, the Google Fonts plugin is a fantastic alternative. It comes with an enormous number of Google Fonts.

But like the free version of the Page Builder Framework, it also has limitations.

However, the pro version—available for a nominal fee—gives you all of the features you need to take full control of your website’s typography.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top
I won't spam you and you can easily unsubscribe any time you wish.