How to Change Site Fonts Using the Divi Theme Builder
In this tutorial, I will guide you through the process of updating the font selections for your Body Text and Headings using the Divi Theme Builder.
Before we begin, a note about fonts:
There are many different ways to set up fonts on a Divi site. You can manage them module by module, use CSS, or use the Theme Builder. I like to use the Theme Builder as it allows you to control fonts site-wide without getting into any coding. But the Global Header, Global Footer, and Global Body have to be set up individually. That will become important as we get into the tutorial.
Also, it’s important to note that when you use the Theme Builder to set up fonts, it will remove the ability for certain kinds of edits within individual modules. We’ll get into the details of that shortly.
NOTE: I recommend having the HEX values for your font colors saved and ready to use. Also, this tutorial only covers the use of Google Fonts as they come pre-installed with Divi.
1. Set Text fonts using the Global Body
In the sidebar, go to Divi > Theme Builder > Global Body and click on the pencil icon to edit.
Move your mouse to the top of the page until you see the gray Module frame appear. Click the gear icon to open the Module settings. The module used here is the Post Content Settings module.
Select the Design tab > Expand the Text section and update the settings to your choosing. This will set your Body font sitewide. You can play around here to get things just right as well as return to adjust these at any time.
Notice the tabs running left to right within the Text section. These provide settings for Links, Ordered Lists, Unordered Lists, and Blockquotes. The main Text settings will apply to all these items by default but the tabs allow you to further customize things. The only setting I have customized in the Ramona Theme is under the Blockquote tab.
Click on the tab with the quote marks to open the Blockquote settings > Scroll down until you see the Blockquote Border Color. Change to the desired color.
NOTE: You will see samples of all these settings within the module’s sample text. The link example is in the first paragraph of body copy. The Blockquote example is the third paragraph down. Scroll to the bottom of the page to see the List of examples.
The Text settings can be overridden within the individual modules. If, for example, you have one section of body copy that you want to be a different color, font, or font size than what you’ve selected in the Global Body, you can do that by editing that specific Text Module. In the above steps, you want to choose the settings that should apply to the majority of your body copy.
2. Set Heading fonts using the Global Body
With the Post Content Settings module still open, close the Text section and expand the Heading Text settings. Notice the tabs across the top labeled H1 through H6. You’ll want to click through each tab and adjust these to your liking.
Scroll to the Heading Text Size section and you’ll notice three tabs. They indicate Desktop, Tablet, and Mobile. Click on each tab to independently set the text size for each device. You can do this for each Heading size that you want to adjust.
To preview how your font selections look on the different devices, click the purple circle button at the bottom center of the screen to expand the dock menu (if it’s not already expanded) > Select the icon on the left for the device you wish to preview. You can toggle back and forth as you work.
After making your edits, hit the green checkmark button to Save changes.
Save the Layout before exiting. Refresh on the front end to preview changes.
Unlike the Text settings, the Heading settings CANNOT be easily overridden within the individual modules. There are workarounds but I advise simply using the different Heading classes to implement differences. The exception is changing between black and white. As long as you leave your Headings the default color (Black), you can choose within individual modules to make the text Light or Dark, changing from Black to White.