Menu
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.
Page Builder Framework comes with Google Fonts built in, just like Elementor.
It gives you control over the following elements:
Here’s how to add custom fonts to your WordPress website using the Page Builder Framework.
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.
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.
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.
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.
Your WordPress now sports the Page Builder Framework theme.
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.
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.
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.
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.
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 The Publish Button.
Now all text on the site is Balsamiq Sans.
Although Page Builder Framework is a phenomenal theme (it’s my go-to theme), the following settings are missing from the free version:
The Page Builder Framework premium add-on, however, grants you access to those settings.
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:
Here’s how to add custom fonts to your WordPress website using this plugin.
In The Left Hand Sidebar, Hover Over Plugins And Click Add New.
The Page Where You Add New Plugins.
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 | Google Fonts Typography Plugin Shows Up Near The Top.
Click the Install button for the Fonts Plugin | Google Fonts Typography plugin.
Once The Plugin Is Installed, The Button Will Change Color And Read Activate. Click The Activate Button.
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 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 Dropdown Option That Reads Default Font For The Base Typography.
Choose a Google Font.
Click The Publish Button To Save Your Changes.
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.