Adding Extra Fonts To The DIVI Theme

by Aug 1, 2017Divi Tutorials1 comment

Fonts. We have thousands of them and in this article I am going to show you multiple ways in this article to get more fonts into the DIVI theme.

Add a Google font through the theme options.

Browse the fonts in the Google Fonts collection and when you find a font you like, click that plus icon:

Now a new selection appears at the bottom of the screen you can click:

From here you can click embed and customize.  With Customize you can  select font weights then you are ready to embed the font.  Make sure to look at the load time as too many selected font weights can slow down site loading times.

In embed you have some code you can copy so go ahead and copy it.

In your Dashboard, click Divi > Theme Options > Integration > look for the section Add Code to the Header

Paste your font link(s) here. Adding the link or links in the header means it will be included on every single page of your WordPress site. Click save and you are good to go.

you will need to put a little code around the font family. For example “p” for paragraph or “h1” for all level one headers. Use the following format:stylename { font-family: “font name”; }Example:h2 {font-family: ‘Titillium Web’, sans-serif;
font-size: 1em;}

Save and you are done.

Note: To be on the safe side you better specify sans or sans-serif as a backup.

NOW this is the big problem doing it this way.  You can’t see it in the modules to even select.  We have a DIVI plugin that can easily fix this solution.

Divi Extended Google Fonts

Thais is another Sean Barton plugin and I am looking at version 1.4 of the plugin.   The plugin adds over 700 plus more google fonts for you to use in any DIVI module you like.

The latest version of the plugin is only two files big and down from three files.  One PHP file with some code in it along with the bigger CSS file.

To use this plugin all you have to do is just install and activate and you are good to go.

This image above just shows you a piece of the complete list of fonts you now have access to through the back end.  It only shows them as a list so you are going to need the google font website up to check and look at how the font looks before you use it.   The plugin also includes Theme customizer functionality as well.

If you click on the theme customizer and then you click on general settings and then typography you will see these new options you can set.  The full set of h2 to h6 html tags.  Great for those times  when you want to set a font a font and just not change it often.

The plugin though has an admin panel with some useful options:

One option for updating the list of fronts from a remote server.

One that just links to the fonts.google.com page

This third one is very useful here. With over 800 fonts the list is very long, but what if your brand is no more than like 6 or 7 fonts.  You can just click on the few you want, update the settings and you are good to go.

The image above shows a much smaller list of fonts which is much easier to work with.

NOW what if google fonts just does not have the font you want.  We we have options for that in some other plugins,

Font Organizer plugin

This is a free plugin that comes from Hive and I am going to be looking at version 2.1.1 of the plugin.  After you have installed the plugin a new menu option pops up under settings you can click.  After you click it a whole lot of options pops up.

First lets look at general settings.  The first option is Add Fonts.   This one works with all the google fonts.  Select a font you want to use and click the use this font button.   That will allow you to use that font in the Tiny MCE backend editor for any theme you have including DIVI modules.

The second option here is for custom fonts.  If you find a font you like a lot all you have to do is name the font, select a font weight, upload an accepted file format and you are good to go.  IF you want to use multiple font weights from a single font family each one is going to have to be uploaded separately.

Lets says you want to do a more set it and forget it type approach to your font selection here.  You can do it in this section and select what font you to use for your h1-h6 tags and more.

This option makes it easy to assign fonts for custom elements in your website.  Select the font you want to use, type in the element name you want to use, click the apply custom elements button and you are good to go.

This is the final general option you have here for this plugin.  This is where you can delete fonts you selected or uploaded and delete custom element settings.

Now lets look at the advanced settings:

We have a spot here for additional CSS.

Here we get some system settings.  Add in a google API to help with updating the list.  Let only certain people get access to the settings and a couple other settings.

Now this is what you see in the backend using the plugin.

What we have here is a text module. You see a couple new Tiny MCE items show up.  One for font size and one for font.  Now the first two fonts are Google Fonts while the third one is a free script font called Lazy Dog which is certainly hard to read as a preview while using the plugin and that one is not a google font.

Typekit Fonts for WordPress

This plugin  is free and is created by OM4.   The plugin allows you to use the Adobe Typekit set of fonts for your website.  To use the Typekit fonts you are going to have to sign up for an account.  Adobe does have a free plan, but it is very limited in what you can do.  Premium plans though start at 49.99 a year and go up quickly based on page views.

Through the website you can do a lot of sorting to find the right font for you.  When you find the font you like you can click on it.  Then you will see an option on the top right of the screen called add to kit.  If you click on that option you will add that font to the ones you want to use.  Through the Adobe Typekit back end you will be able to get embed codes you can put in your website.

Under settings you will see an option called Typekit Fonts. If you click on it you will see a spot to put your embed codes.  Below that you will see spot for your CSS rules.

Below the save settings button is just some help text and css pointers.  Not much to this plugin at all.

Up next from me is going to be looking at the free version of the Max-Mega-Menu plugin and how that works with the DIVI theme.

1 Comment

  1. Tess from Go Viral Now

    This is a great collection of ideas for adding extra fonts to Divi. I was looking to add my own custom fonts so the font organizer plugin sounds like the one. I’ll let you know how it goes.

    Thanks for a great article.

    Reply

Submit a Comment

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

RECENT POSTS

Top 20 Feminine Divi Child Themes

Top 20 Feminine Divi Child Themes

Divi has the most impressive feminine child themes on the market, and they can build any type of website you need. In this article, we’ll look at the top 20 feminine Divi child themes for your next Divi project.

Possibilities Divi Child Theme Installation Instructions

Pre-installation preparation:* Install and Activate recommended plugins from the repository.- Caldera Forms by Caldera Labs* Enter your Google Map API key into the Divi Theme Options Step 1: Unzip The child theme package file to find the child theme zip file. Step 2:...

Pin It on Pinterest

Share This