Updated June 13, 2018

In this tutorial we discuss how to add Google fonts and Non-Google fonts alike to your Divi website. Your designs don’t have to be limited. Check out our top three ways to use custom fonts on your website!

Adding custom fonts to your website is a great way to stand out from the competition and add your own custom and creative flair to your site. Adding fonts is a fairly easy process but scares many away due to the fact that there is some very minor, yet very simple, coding involved.

The difference between using Google fonts vs. any other custom font (.ttf, .otf, or .woff file) is quite simple. On Google Fonts, the font is stored on Google’s servers and you use code to pull from their files. For all other fonts, you download the font to your servers and pull from your own FTP files.


1) Upload Straight Into the Builder

Step 1. Open the Divi Visual Builder and go to any design section that shows a font

Step 2. Click “upload” and follow the instructions

Click here for more information.

2) Adding Google Fonts

*This is our recommended way of adding fonts* 

Step 1. Choosing Your Fontgf_Step 1

gf_Step 1b(Note: Make sure this is not a font already integrated with the Divi theme) Go to Google.com/fonts and choose a font that complements the style of your website. For this example, we chose “Great Vibes”. Click on the Quick Use icon, scroll down and copy the integration code. In our case, we copied:


   <link href='https://fonts.googleapis.com/css?family=Great+Vibes' 
rel='stylesheet' type='text/css'>

Step 2. Add the Header Codegf_Step 2

Go to Divi Theme Options > Integration > and now paste the code into the head (not the body), and save.

Step 3. Assign the Font to Classes, Tags, and Elementsgf_step 3

Go back to your Google Font page and scroll down to “4: Integrate the fonts into your CSS” and copy that code. In our case, we copied:

font-family: 'Great Vibes', cursive;

Now assign the elements in the Divi Theme Options > General > Custom CSS. For example, if I wanted header 1 and 2 to have the new Google Font, we would use:

h1, h2 {
font-family: 'Great Vibes', cursive;
}

If you have different fonts for each header, repeat the steps as necessary. For example, if I wanted the body to have the font titled “EXAMPLE”, copy the code in step 1 for the new font and add the CSS for the body:

body {
font-family: ‘EXAMPLE’, cursive;
}


3) Typekit

Step 1. Upload the TypeKit Fonts for WordPress Plugin

Step 2. Go to TypeKit.com and register for an account

Step 3. Choose a few fonts to add to your account, sync them (if you want them on your local machine), and add to a kit

Step 4. Grab embed code from kit

Step 5. Add embed code to the plugin

Step 6. Continue and publish TypeKit kit

 

Step 7. Click “Using fonts in CSS” at the upper left corner under “Selectors” and copy the example style

Step 8. Paste the CSS rules into the plugin, add any more you want and save!

Step 9. All elements selected will now show up as that font!


4) “Use Any Font” Plugin (Not Recommended)

*We no longer suggest using “Use Any Font” due to compatibility issues.*

Here is the updated video on how to use the plugin. You can now use this plugin to directly send your custom fonts to the Divi Builder! No CSS knowledge required!

Step 1. Choosing Your Font

We chose Georgina.ttf — download the .ttf, .otf. OR .woff file to your machine.

Step 2. Download “Use Any Font” Plugin

Login to your WordPress site, go to “Plugins”, and Download and install the plugin “Use Any Font” from the WordPress plugins section. Once activated, click on “Use Any Font” in your WordPress menu.

Step 3. API Keyngf_Step 3

Now you will have to create an API key to activate the plugin. Simply click to add a key and choose the “$0” option if only using 1 font (a minimum $10 is required for more than one font). Copy the API key and paste it into the API KEY section and click “Verify”.

Step 4. Uploading and Assigning Fonts

Click on “Add Fonts” and upload your .ttf, .otf, OR .woff file. (The free version only allows one font upload.)
Now we need to assign those fonts to the correct classes, tags, and elements. Simply select your font, then click on the tags you would like that font assigned to. In this case, we applied the custom font to the headers, menu items for desktop and mobile, and buttons.

Step 5. Assign to Menu, Header and Body

Find the custom font after the google font list (in theme customizer only)

Step 6. Assign Custom Font from Divi Builder

Assign font to content from Editor. Custom fonts will appear at top of the list.

We also ask you provide feedback as it helps us improve. Thank you!!


Did you enjoy this article? Share it with your friends! And thanks for reading!