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
- Body text
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.
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.
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.
Your WordPress now sports the Page Builder Framework theme.
Edit your fonts
Now we’ll use the WordPress Customizer to set up Google Fonts.
This opens the WordPress Customizer, along with settings specific to the Page Builder Framework theme.
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.
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.
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.
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
That should bring up the Google Fonts Plugin near the top.
Activate the plugin
Edit your fonts
Once the plugin is installed you can change your fonts through the WordPress Customizer.
For this tutorial I’ll only change the base typography.
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.