**** QUICK CHEESY ASK, THESE BLOG TAKE TIME, IF YOU LIKE THEM WOULD YOU PLEASE CONSIDER LIKING MY FACEBOOK PAGE? JUST PRESS LIKE BELOW!****
Aside from the various native Google Fonts in Divi, Elegant Themes has an excellent write up on adding them manually.
It does not, however, cover adding custom fonts to Divi using a Child Theme (technically, this has nothing to do with Divi) so I thought I’d write it up…though, really, I’m just stripping out the method I used fromΒ this wpsites.net article.
Here we go:
- Create folder in child theme: Divi-Child/fonts
- Upload your font to this directory (the one I am using is two turtle doves)
- edit Divi-Child/styles.css
- add something like this after your @imports
@font-face {font-family: Doves;
src: url('fonts/doves.ttf');}
- you can now use this with
-
font-family: Doves, Lato;
- However, I like to create my own style which I can apply to various Divi sections:
.doves h2 {font-size:300%;
font-family: Doves, Lato;
}
- So then I can use this in various text modules I manually place h2 tags in with the class ‘doves’
For example, in Divi, add a text module and put some H2 text in it:
then apply the ‘doves’ class to it:
save and update the page.
your site should now show this:
Nice.
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
Awesome tip, I was just needing to do this! Much appreciated.
Interesting. I followed this exactly and it didn’t work.
Is the URL call above to a specific file? My CSS isn’t great.
Rats. @Phil Simon – are you using H2 or other?
While I haven’t tested in the latest version of Divi, I don’t think it should matter as the CSS is straightforward. In this case, I have a text module with the CSS class ‘doves’ applied to it (in the Custom CSS section of Divi, under Class) and then have the text wrapped in H2 (you can do this manually in the ‘text’ editor or with the dropdown under the Visual editor).
At that point, the ‘h2’ element should be under the .doves class and then the ‘.doves h2’ CSS stuff should apply.
Assuming the font is, then, available at that url (which, yes, is referencing a specific file…in this case, relative to my root (/) child theme…so something like “wp-content/themes/Divi-Child/fonts/doves.ttf”), it should work.
Is there an easy way to add custom fonts to the list of font options int the customizer?
I have not found an easy way. I’ve read a few tickets on ET support which also point out that it is ‘not available’ with Divi. It is obviously possible, but to answer your question directly, I do not believe there is an ‘easy’ way (and the ways I’ve tried have been frustrating…and didn’t work!)
Use Any Font plugin allows you to do this.
Adding custom fonts to the Divi font options would require modifying a .PNG that they hand built which shows the font name in a preview style rendering and then modifying their .js code to add more index entries. I get why they did it the way they did (so you can see the font name previewed using itself) but it’s not really customizable. π
that’s crazy talk…not customizaable at all!
I did try it wit the plugin Any Font and the imported font showed up in the Customizer Dropdown. Not sure if I like the idea of an extra plugin just for that…
This works perfect, thank you!
Hi,
Two questions though
1. I dont see @imports in styles.css. Does it matter where I put it?
2. where do I put this code?
.doves h2 {
font-size:300%;
font-family: Doves, Lato;
}
Also in styles.css?
If you don’t have any imports, no big deal. Just add the code to your styles.css (the @font-face and the .doves h2) and then apply ‘doves’ to an h2 tag or (Divi module that uses H2’s)
?
I am blank
I downloaded the font you linked to. Just to try and see how it works
I ftp-ed the font to my /fonts folder
I added the following code to styles.css
@font-face {
font-family: Doves;
src: url(‘fonts/doves.ttf’);
}
.doves h2 {
font-size:300%;
font-family: Doves, Lato;
}
I added a text module
I added text between h2 tags like this test
I added doves in CSS class field (tab custom css) of the text module
I saved the text module and updated the page
However, the font doesnt show
What am I doing wrong?
do you have a url we can inspect with a browser?
http://dangerleaf.com/testpage-2/
The text below the slider sohlud be in a different font
p.s. site is still in test modus π
Just emailed you; but for posterity, it appears the custom CSS is being overridden. If you add !important to the end of the font-family line, it should override it.
font-family: Doves, Lato !important;
Hi,
It worked π
Thanx for all the help
Hi !
Thanks for this ! I made exactly what you say, it’s works on my computer, but not on an other or smartphone. I really don’t know why,
my links are good. It’s so hopeless aaaaah …
Do you have a sitelink I can look at?
Great tip! Thanks & keep it up. π
Eureka! Wow! I’m so new to child themes and adding custom CSS to my sites, so this was an amazing resource, and more importantly, it WORKED!!!! My brain hurts now… Time for coffee! Thank you so much for your help!
LOL! Always coffee time!! Glad it helped.
Can you help me figure this out? I have literally been trying to get this to work on my divi theme for a week and the support for divi keeps sending me back here.
I bought a font from Fontspring. They have very different instructions which I don’t understand. I made a folder in my theme called fonts. I put all these in it:
luckyfellas-webfont.eot
luckyfellas-webfont.svg
luckyfellas-webfont.ttf
luckyfellas-webfont.woff
luckyfellas-webfont.woff2
I can’t figure out how to take your code and switch out what my font is.
Can you help me with this? Thanks so much.
Hi, Chris. You should be able to upload the file(s) and reference them just like I did in this post. Do you have a site URL you can share and we can investigate (sorry for the late response to this!)
Hello,
I’ve tried to add the FSJoey but It didn’t work.
The font FSJoey has a .otf extension
Below are the steps that I followed:
1. I added my following fonts in the /divi-child/css:
FSJoey-Bold.otf
FSJoey-BoldItalic.otf
FSJoey-Heavy.otf
FSJoey-HeavyItalic.otf
FSJoey-Italic.otf
FSJoey-Light.otf
FSJoey-LightItalic.otf
FSJoey-Medium.otf
FSJoey-MediumItalic.otf
FSJoey-Regular.otf
2. I added this code in the style.css
@font-face {
font-family: ‘FSJoey-Regular’;
src: url(‘fonts/FSJoey-Regular.ttf’);
}
One question is here, How would it be the code for the rest of the fonts?
3. Then I add this code too:
body, p, h1, h2, h3, h4{
font-family: ‘FSJoey-Regular’;
}
What I’m a doing wrong ?
Thanks for your help
Isa
Hi, Isa. Sorry on the delay getting back to you! It look like in step 2 you referenced a .ttf, but as you said, you uploaded .otf files. Change that in the CSS and it should work.
Adding custom fonts to the Divi font options would require modifying a .PNG that they hand built which shows the font name in a preview style rendering and then modifying their .js code to add more index entries. I get why they did it the way they did (so you can see the font name previewed using itself) but itβs not really customizable. π
So how does all this work if you are using Adobe Typekit fonts? I added them to my site using the Typekit for WordPress plugin but since the Divi theme does not allow them to then show up in the menu… what do I do? Uploading the fonts isn’t really an option when using Typekit
Hi, Tracy. I haven’t used Typekit fonts, but, indeed, getting any font to appear in the Divi dropdown is tricky. I’ve read about folks doing it, but I think is unnecessary when you can upload your own fonts and use CSS sidewide (or module wide). It looks like, however, there may be way to download Adobe Typekit fonts (https://helpx.adobe.com/creative-cloud/help/add-fonts-typekit.html). I’m not familiar with them, however… π
WP.org now says @import is not advised. They want us to use wp_enqueue_styles. Do you have an updated post explaining how to add fonts to child themes using the new updated recommendations? I enqueued one of my three font families, but when I tried to add the font-family in CSS, I got the white screen. Parent theme is Divi. Child theme is my own. Not using a plugin. Trying to keep plugins to a minimum. Should I just use it?
Hi, Paula. Adding fonts does not use @import but @font-face which, to my knowledge, is still a-ok. In fact, I do not know of a way to enqueue fonts, so that may be the white-screen issue (functions.php yelling at you for enqueuing a font and not a css page!)
Is there any simple way to use custom fonts in divi theme?
Divi now has a super easy way to use custom fonts – you can upload them directly in the modules! Watch this video: https://www.elegantthemes.com/blog/theme-releases/divi-font-options-update