Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Here is another Quick Snack for you. Recently quite a few people have been having issues adding custom fonts with css to their Divi website instead of using a plugin. Geno wrote a great tutorial recently on adding new Google fonts but today I am going to show you how to add non-google fonts.
So let’s get cooking!
Ingredients
The Divi Theme or Divi Builder Plugin from Elegant Themes
Your chosen font files (.ttf, .otf, .woff or whatever format you will be using.)
FTP or cpanel access to create a new directory.
Cooking time
This should take you around 5 minutes max.
Preparation
The first thing we need to do is create a new directory to hold the fonts, this need to be in your child theme directory so ‘wp-content/themes/your-child-theme-name’. I prefer to use FTP to cpanel but the process is the same. Navigate to your child theme directory and create a new folder called ‘fonts’.
The open up the folder and upload your fonts.
Method
Now we need to load our fonts, so open up your child theme style.css file or navigate to Appearance>Editor and you will see it there. Paste in the following CSS.
/*---------- [Load The Fonts] ----------*/
@font-face {
font-family: Aileron-Black;
src: url('fonts/Aileron-Black.otf');
}
@font-face {
font-family: Aileron-Thin;
src: url('fonts/Aileron-Thin.otf');
}
You will need to change the font family and URL to match that of the fonts you are using.
Next we need to apply those fonts to elements of our website. As these are custom fonts you won’t see them in the font options in the theme customiser or any of the modules so if they are fonts you want to use as default across your site then we need to apply them to the headings, paragraphs and body with CSS.
Here is an example of how you might use them
/*---------- [Font Styling] ----------*/
h1 {
font-family: Aileron-Black, Lato, sans-serif;
font-size: 50px;
color: #000000;
}
h2 {
font-family: Aileron-Black, Lato, sans-serif;
font-size: 40px;
color: #000000;
}
h3 {
font-family: Aileron-Black, Lato, sans-serif;
font-size: 30px;
text-transform: uppercase;
line-height: 1.2em;
color: #000000;
}
h4 {
font-family: Aileron-Thin, Lato, sans-serif;
text-transform: uppercase;
font-size: 20px;
color: #242424 !important;
}
h5 {
font-family: Aileron-Thin, Lato, sans-serif;
font-size: 18px;
font-weight: 500;
}
body {
font-family: Aileron-Thin, Lato, sans-serif;
font-size: 16px;
line-height: 1.2em;
}
p {
font-family: Aileron-Thin, Lato, sans-serif;
font-size: 16px !important;
line-height: 1.2em;
}
You can add and remove properties such as font weight and text transformation to get your desired styling. Once you are finished editing don’t forget to save.
It’s also a good idea to use fallback fonts just in case a particular browser has trouble rendering any of the fonts you have chosen, in the CSS above I have used ‘Lato’.
And that’s it, easier than you thought it would be eh?.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
Hi Michelle,
I would like to use some licenced webfonts from Fontstand with CSS.
On their blog they have a tutorial in which they shows simple step-by-step guidelines on how to implement the webfonts. I do not work a lot with Divi and wonder if these steps will work properly whitin Divi.
And if not, could you tell me how to implement webfonts from Fontstand in Divi with CSS?
Links blog Fontstand:
http://blog.fontstand.com/post/154299674335/using-fontstand-webfonts-with-popular-website
http://blog.fontstand.com/post/151441510910/fontstand-webfonts-easy-tutorial?is_related_post=1
Best,
Maarten
Divi added the ability to upload custom fonts in any module last year, so just use those setting in the module design tab
Hi Michelle,
I have installed two custom fonts in Divi using Use any Font and l can now see them in the Font options of my modules, but not in the Font options of the Primary Menu Bar the Customiser. I need to use one of them for the font in the menu. Could you please suggest how I might go about that? Many thanks.
Regards,
Nick
You can add the following CSS to Divi > Theme Options > General > Custom CSS or in your child theme stylesheet:
#top-menu li a { font-family: your-font-name-here; }
Hi Shay,
Many thanks – that worked perfectly. Much appreciated!
I just followed this tutorial to add a custom font to my website. Thank you.
Hi Michelle Thanks for that highly comprehensible tutorial on custom fonts. I followed your instructions and everything works fine. Now I would like to apply my h4 header-style to the menu items in my Primary Menu. I was unable to figure out how that might work – maybe you can help me here. I tried to somehow apply the h4-style to my Typography settings (via Theme Customizer > General Settings) but I cannot select these header styles in the Header Font section (which I think is just the way it is in Divi). The same goes for Header & Navigation… Read more »
If you wanted to actually make the menu items h4 headers, you’ll need to change your header.php. If you just want the design, you can target “#top-menu a” within your custom CSS.
Hi there. I set up a Divi child theme as per documentation and I’ve added the code above exactly as shown into my child css file with my own fonts, but I am seeing no changes on the site. I can’t post a link to it publicly here, but I’d be grateful for help if you’re willing to look at it if needed.
Have you actually assigned the font to the elements you want to use it?
Thanks for this Michelle! I’m trying to find a way to override all the Divi font settings using CSS in my style.css child theme file. Where all items marked as “paragraph” in Divi will follow the defined “p” font setting and so forth. Will this do it? Or do I need to go into my Divi page modules and update them as well?
Thanks so much!
Sarah
The quickest way it to set it via css like this:
p {
font-family: ‘your font’;
}
Set the font in the customiser settings to default and you should be good.
Great article. This helped clear things up for me a little. Instructions are clear and easy.
Hi,
I follow your recipe but nothing happens. I created a font folder in divi child, uploaded a font called brain-flower.ttf, edited the css file on child theme adding the font and adding font styling and a fallback font. But nothing change on text with h1 and h2.
What can be happening? Do I have to add this to epanel on the css section?
Thanks in advance,
Gaby
Did you actually apply the font to your header tags like this?
h1, h2 {
font-family: fonts here;
}
Hello Michelle.. This did not work for me. Urgent help pls
Afraid I am going to need a little more info than ‘this did not work’ to be able to help
Ima give it a try. Thanks Michelle for being a Divi angel.
This is my first Divi custom edit this 2017.
Cheers!
Would be useful if there was a function to add them to the Divi font dropdown list, have been able to add them to the WordPress editor but when not using it then it can’t be used in the font selection.
There is a video here for adding google fonts to the dropdown, I haven’t watched it but I am sure it could me modified for custom fonts https://www.youtube.com/watch?v=uBly1Qmhu3s
Hello
This tutorial is awesome. Such a shame that it won’t give any tipps for adding the fonts to the dropdown. Do you plan a turorial for adding own fonts to the Divi builder dropdown menu? I am very sure that I am not the only one, who would be very interested in.
Best wishes,
Nancy
That requires some PHP adjustments, this might help http://www.divithemeexamples.com/add-how-to-add-google-fonts-to-your-divi-theme/
Thanks Michelle, its a nice tutorial and was easy to follow your guide, but, is there anyway we can add our fonts to the library we already have in divi? I have lots of headings and CTA sections and they require different font sizes and styling for different devices. Using the above method we are limited to the CSS styling we added to our stylesheet. Im still using Divi prior to Divi 3 so not sure its any different with the update or not, guessing the outcome is the same? Sometimes i have styled my h1 and h2 tags differently… Read more »
Looking around my site im not sure the fonts have been replaced . There has definitely been a change in the fonts but not sure that my one is being used everywhere it is supposed to be
Im now thinking about going back to how it was previously and finding a similar font to use and retaining all the control i previously had.
Is see you got this resolved on FB Ben, if you have time it would be great of you could post the solution for all my readers
When using this method, are you able to select your webkit font within the Divi editor or do you just have to define it in the stylesheet?
No it doesn’t add it to the font dropdowns Chloe
Hi Michelle and thank you !
However I have the same problem as Mike. The custom font works great on computer but it doesn’t work on other devices. Do you have an idea ?
Hi Antho
Yes you can use Font Squirrel to generate the web font versions and add those to the css and the folder and it should work fine
Hi Michelle, I am a newbie with CSS. That’s why I am learning to style my website and love Divi – it’s so easy to use! I love the font: Proxima-Nova and I followed the steps you describe in your blog. I am not sure but do I need to put the different codes in de ‘style.css’ on my child theme to apply my font to elements on my website or do I have to do this at another css of my chid theme? For me HTML is new and I wonder what this means: body, h1, h2, h3, p,… Read more »
Hi Tobias
You can learn about heading tags and the styles you can apply to them here: http://www.w3schools.com/tags/tag_hn.asp
Yes if you have a font with web formats then you should add all that you have so ttf, oft, woff, svg etc.
You can also use this great little plugin to access all google fonts in Divi. https://elegantmarketplace.com/product/divi-extended-google-fonts/
Thank you so much for your terrific site. Its helped me a lot as I begin developing sites for clients.
I used your tip here to setup the special font my client wanted on their site, and it works great. However, now I am working on the mobile versions, and for some reason none of the headings show up on the mobile/tablet versions. I have a backup font listed (Lato) but on the mobile version the text just disapears. The other text loads fine… Any thoughts on what I should check? Site is urbantearoom.com
Can you try using another font, then you can see whether it is that specific font that is the issue or something else
Hey Michelle, Thanks so much for your tutorial! I need to use a local font for everything but the headlines, i.e., body and the menu. The “body” selector as you used it above is not working with my Divi version (2.7.5), I can get it to work with the p selector, but that doesn’t affect anything non-paragraph, and neither the menu of course. Did the “body” selector work in your case? And is there a way how to specify the font for the menu? You said above in a response to Timon that you can change this in the Theme… Read more »
Do you have a link please Florian and I will take a look
Worked Perfect! Thank you
Great Carolyn
Hey,
Great tutorial. Is there also a way to change the font of the primary/secondary menu?
You can do that in the the theme customiser Timon
Hi ! Thanks for this tip it’s reallu useful ! But I have an issue : it’s working only on my homepage, don’t understand why
Hi Tarik
I would need some more information about your set up in order to provide any assitance
Hi! Thanks for writing this! I have a question: which boxes should I tick/untick on the screen that allows me to select a font file? I mean where it says User/Group/World and Read/Write/Execute/Permission. I’d love to know so I can move ahead
Thanks!
Hi, sorry I am unclear on your question, where are you seeing these boxes when selecting a font file?
Thanks for a great guide. How do you specify that a bold H2 for example should use the font imported using
font-face {font-family: myfont-bold.tff}
instead of the font used for normal text imported by
font-face {font-family: myfont.tff}
Thanks.
You would need to find the h2 references in the CSS and add
font-family: myfont-bold;
Or whatever you have named your font. Alternatively just increase the font weight:
font-weight: 600;
Thanks for this awesome quick snack.
i have one problem. It works on safari and iOS but to on firefox and internet explorer. How can this happen and how can i fix this?
Best,
Mario
Hi Mario
Some fonts do not work in all browsers, you should check compatibility and also that you have all webfont variations loaded
Thank you Michelle! (again
)
What if you don´t want to use the custom font all over the web and only in some particular cases?
Two ways to do this
1: Style your headings like this
h1 {
font-family: ‘your font family’;
font-size: 18px;
color: #000;
etc.
}
Or, for the modules you want to apply a different font to, give them a custom class so you can target them individually:
.myclass h1 {
font-family: ‘your font family’;
font-size: 18px;
color: #000;
etc.
}
First of all, thank you for the helpful tutorial! However for some reason, my font isn’t loading correctly. I uploaded P22 Underground Bold which is a sans, but the font displaying on my site is a serif. Any idea what could be causing this? I did upload the correct font, and when I inspect element in Google Chrome it indeed says the font is P22 Underground Bold. Thanks in advance for your input.
Hi Noelle, sorry for the delayed reply. Can you email me link so I can take a look please
Hi there!
Thank you for this, it was an easy-to-follow tutorial! My question is, I don’t have any color codes inputed, yet H1 – H5 are showing up with a default of #F7235E. I had originally tried using the color code for H1 & H2, but had decided against it and deleted it, and now I can’t figure out where it’s coming from.
Any help would be much appreciated. Thank you!
Hi Kelly
If you go to the WP admin panel and then Divi>Theme Customiser>General Setting>Typography, you will see the header colour setting at the bottom
I was wondering how to do this. Thank you! I think I’m going Pin-crazy on your blog
Haha, thanks Janis
Thank you thank you thank you !
My pleasure Cécile
Another great post, Soupmeister! You made it as easy as possible to implement external fonts. Thanks!
Thanks Terry
Tks !
Welcome