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 Font
(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 Code
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 Elements
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 Key
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!!
Thanks for this great article.
I am not using the plugin. I created a new font folder in my Divi theme and uploaded the webfonts directly via my ftp server. Do I need to manually assign the fonts to the correct classes, tags and elements to get them working properly? Where would I do this?
Kaye, I would add a CSS class to whatever elements you’re wanting to use the custom font for. You’ll then need write the webfont CSS to tie the fonts to the class you made. You may need to use the “!important” tag. All of this CSS would be in the Divi Theme Options area.
Hope this helps! Have a great day! =)
thank you, very helpful. could do it manually, but this was much easier and worked instantly. now just need to target other classes where need be.
Thank you for the good article, but it’s a no go for me.
This plug-in is a bit of a challenge to say the least!
I didn’t want to spend $10 on something and not know if it was going to work so I did the free version and now I have a font that I can’t get rid of, getting a new API Key didn’t work. Uninstalling the program and trying to add the new font didn’t work. The old one still shows and the new one doesn’t. Hours later it’s still not working and I’m looking for another option.
So sorry you’re experiencing issues! Upon first glance, it sounds like there is a cache issue going on. Do you have a caching plugin installed? I would recommend deactivating and then clearing your browser cache as well. If that doesn’t work, feel free to get in contact with us via our contact page and we’ll trouble shoot a little more. Hope that helps! 🙂
Hi
Really useful info – thanks!
Using Divi can you tell me if I can assign my uploaded font to the Menu text and how to go about doing that please?
Thanks in advance!
errr sorry you answered this already above in your documentation .nav
thanks again
Hey Cliff, are you using the Use Any Font plugin or Google fonts? Either way, you’ll need to assign the font to that class via CSS. For example, on our Josefin theme: http://josefin.madebysuperfly.com/
The CSS to change the navigation would be:
#et-top-navigation {
font-family: ‘Josefin Sans’, sans-serif !important;
}
I have to comment just to say thank you!
I had been trying to get my CSS to work for HOURS but thanks to you discovered I was missing the “!important” tag. Literally NO other blogs mention anything about this! WTF?!
Cheers brother 🙂
Alright! 🙂 Glad it served you well!
Hey guys, really helpful.We’re building a new wedding specific website however the standard fonts in DIVI don’t quite give the depth of choice.
Thanks, Paulina! Let us know if there’s anything you’d like to see improved. We love feedback! 🙂
Hallo from Germany, this was just what i was looking for. Just one question. I installed a font called “Gobold Thin.ttf” with the Use any Font Plugin and placed the CSS Code into the Divi Gerneral Options. There ist just one strange thing that i noticed – first letter of each word is a litte bit bigger than the rest letters. How can that be?
Hey Murat, Germany! Very cool! 🙂 Where can I look to see this issue? My guess would be if you set all text to uppercase, it will work (either manually or with CSS). Sometimes if you capitalize the first letter of a font that’s already all caps, it looks a little funky. Also, this post is currently being updated by our team. There was a Use Any Font plugin update that works quite a bit better with Divi. More updates coming soon!
Hey Jake, cool to here from you. Here is the side for you so you can watch. Thank you very much
http://easysylt.de/
Sweet. Yes — looks like my previous solution works. the text-transform: uppercase; CSS rule will fix this.
Oh man, so simple , haha. Thank you very much, cool page by the way, gonna visit you regularly. See ya
Hi, I cannot get Jenna Sue font to work in Divi with use any fonts and my back-end doesn´t really look like you describe. Any tips?
🙂
Maritha
Hey Maritha, thanks for reaching out! 🙂 Hmm… without logging in to the back end of your site or looking at screenshots, it’s tough to say. I’d recommend reaching out to the “Use Any Font” support team here: https://wordpress.org/support/plugin/use-any-font
Hi Jake, He gave up at Use any font. Couldn´t find out why it doesn´t work.
So sorry, Maritha! If the developer can’t figure it out, seems like it’s outside our realm. We have considered removing this plugin from this post as it’s caused some trouble for many folks. Please keep us updated on this! I’d recommend reaching out to a few Divi Facebook groups. Just search “Divi Theme” in Facebook 🙂
Are there other plugins?
Mas,
There are a few, but not that we have tested out extensively. I’d recommend sticking with Google Fonts and TypeKit if you can. 🙂
Plugin appears to be working but it is generating an error:
2 Failed to load resource: the server responded with a status of 400 (Bad Request) fonts.googleapis.com/css?family=gotham-bold:400
Ian, you’d need to reach out to the folks who developed this plugin here: https://wordpress.org/plugins/use-any-font/
We’ll be removing the Use Any Font suggestion from this post soon. It seems to be failing for many people.
Getting an API key is not easy. I want to test this before I buy so I tried to get the ONE FREE and it didn’t work. What am I doing wrong?
Jane,
For the “use any font” plugin, you’ll need to reach out to them at: https://wordpress.org/plugins/use-any-font/
We’re in the process of editing this post to remove that plugin from our suggestions.
My font I added with Use Any Font isn’t showing up in the dropdowns for Titles. Do I have to assign it to something to get it to do that? If so what exactly do I put in the Custom field?
For issues with the “Use Any Font” plugin, you’ll need to reach out to their developers here: https://wordpress.org/plugins/use-any-font/
Found out the font won’t load in the Divi Visual Builder. You have to go to the normal backend Divi Builder and they will show up.
Gotcha. That’s helpful to know. Thanks, Christopher!
I want to add a custom font avenir light in my Divi theme Menu items.
I’ve alredy installed Use Any Font and added the font properly using api key.
The problem is the font is not visible in my theme customizer.
Do I need to add the css class to integrate the font in my menu items.
Then what is the css class of my menu.. I couldn’t figure it out after hard.
Would you please give me the suggestion regarding this issue?
Thank you!!
Hey Taj, I believe there is a similar issue above that the font won’t show up in the Visual Builder (or the Theme Customizer). For issues with the Use Any Font plugin, I’d reach out to the developers here: https://wordpress.org/plugins/use-any-font/
For your menu, that may be a little more specific as you’d have to allow it for all body types and then select and deselect which elements to include in your CSS stylesheet.
are the fonts only visual in the builder and not in the visual builder, because I don’t know how to check if the font has really changed.
Lydia, I’d recommend reaching out to Elegant Themes for more detailed questions. We aren’t affiliated with them in any way. However, to check if a font has been made, preview the changes and you’ll see if the changes were made.
Just an FYI on Use Any Font (UAF). I may be doing something wrong, but whatever font I assign to a tag (H1, H3, body, etc.) via UAF, that font overrides any other font in the divi theme customizer (DTC). So once I assign a font via UAF, it renders the drop-down menu in the DTC useless. If I assign multiple fonts, the last font I assign becomes the dominant (for the lack of a better description) font.
Anyone else run into this?
Found the issue. DO NOT assign a font in UAF unless you want that font to override all other fonts in the elements (tags) for which it was assigned. Example…I uploaded the Ethnocentric font and assigned it to my header elements (tags). This meant that no matter what font I picked from my drop-down in the DTC, only Ethnocentric would be displayed in the header elements for which it was assigned. No other font would work. HOWEVER, when I just uploaded the font in UAF, without assigning it, any font, including Ethnocentric, could be utilized in the header element from the drop-down menu in DTC. Hope that makes sense.
Thanks for the kind words! Cheers!
Thanks for the kind words! 🙂 Much appreciated.
I’m not seeing the option to upload a font in the Divi Builder. I’ve clicked into a “text” module and nothing there either.
Hey Rita, be sure Divi is updated to the latest version and you’re using the Visual Builder (not the backend builder). Then follow the steps listed here. Here is more information: https://www.elegantthemes.com/blog/theme-releases/divi-font-options-update
This is a great article still and works well. The only caveat I would add is when you are adding your custom classes for your fonts you should do them in the Divi Custom CSS pane on your Divi setting page or in the WP Customize CSS feature.
Using Divi and trying to them in styles.css in my child theme wouldn’t work, it seems Divi will override font related settings there.
Guy, thanks for the suggestion! Yes, agreed. CSS is usually best placed in Divi > Theme Options > Custom CSS.
So I am curious why Divi won’t allow you to upload fonts sometimes “for security reasons”. Usually 99/100 I can upload ttf just fine, but the other versions never work. Today I encountered the problem of ttf not working…hmmm wonder why.
Same. I used the functions.php method from this article to fix it and allow me to upload the font:
https://www.elegantthemes.com/blog/wordpress/how-to-fix-the-sorry-this-file-type-is-not-permitted-for-security-reasons-error-in-wordpress
After I uploaded the font, I removed the code from the functions.php file.
Hope this helps! 😁