There are over 900 Divi Theme fonts and you can upload your own custom fonts if there is something specific you can’t find in the default fonts.
The Divi font system was given a large update with Divi version 3.0.83 to give “brand new font options interface, filled with 600 new fonts, improved font management, custom font uploading, new font styles, better font weight controls, fine-tuned heading style management, heading level selection and dozens of new design options for the text module.”
Nick Roach. Elegant Themes. (view Font update post)
What is the default Divi font?
The default font in Divi is Open Sans which “is a humanist sans serif typeface designed by Steve Matteson,” and it can be previewed on the Google Fonts website. Open Sans is the font that is applied to all Divi header and body text unless you change it in the Theme Customizer typography settings.
How many fonts are there in Divi?
Divi has over 900 fonts by default which are the same 900+ fonts found in the Google Fonts collection.
The number of fonts in Divi will grow as the number available via Google Fonts grows as when a new Google font is added, it will show up in the Divi Builder automatically.
If this is not enough font options for you, you also have the ability to upload your own custom fonts which gives you access to unlimited fonts in your Divi site.
How do I preview Divi fonts?
You can live preview all of the Divi fonts within the Divi Builder font drop-down lists or by using the official Google Fonts website. When using the Divi builder the Divi fonts preview will show in any modules that have text options.
To preview fonts go into the Design settings tab and click on the Text or Heading Text sections. You will then see a drop-down menu for either the Text Font or Text Heading Font where you can see all 900 font options.
As you hover over each font in the drop-down list you will see the live preview load. This preview is quite small and hard to read, so you may prefer to browse fonts using the Google Fonts website for a clearer view instead.
How do I change the global default fonts?
- In your WordPress admin area go to Appearance > Customize to load the Theme Customizer (or click on Theme Customizer in the front-end admin menu)
- Go to General Settings > Typography
- Scroll down Header Font or Body Font sections
- Click on each drop-down menu and select your global header and body fonts. You can use the font search box at the top if you know the name of the font you wish to use.
- Click “Save and Publish” and your global default fonts will be saved.
Whilst you are in the Typography settings tab of the Theme Customizer you can also set global body text size, body line-height, header text size, header letter spacing, header line-height, header font style, body link color, body text color, and header text color.
How to upload a new custom font in Divi?
If Divi doesn’t have the particular font you need to use, you can add your own custom fonts within the Divi Builder. Supported font file formats are TTF (TrueType Font) and OTF (OpenType Font) files. To upload and add your own custom font into the Divi font list you will need to follow the steps below.
- Open any module with a text component
- Go to the Design tab then click on either of the Text or Heading Text sections
- Click on the Text Font or Heading Text Font drop-down menus
- Click on the Upload button at the top of the drop-down menu
- In the pop-up, you can give your new font a name and select the font file to upload
- Hit upload and your font will be added to the list of Divi fonts.
What are the best fonts for Divi?
What the best Divi fonts are is really a personal choice, but by viewing the Google fonts analytics page you can see what the most popular fonts are. This site lists all Google fonts sorted by how many people are using them and allows you to select from the past 7, 30, 90 days and 1-year statistics. Using this ranked list is a great way to select which is the best font to use for your website when you are having trouble deciding from the huge number of options. Popular fonts are popular for a reason, so if you pick a font from the top of this list you should be confident that you will be using a quality font.
Top 10 fonts for 2019
- Roboto
Font Styles: 12 Thin, Thin Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Bold, Bold Italic, Black, Black Italic - Open Sans
Font Styles: 10 Light, Light Italic, Regular, Regular Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold & Extra-Bold Italic - Lato
Font Styles: 10 Thin, Thin Italic, Light, Light Italic, Regular, Regular Italic, Bold, Bold Italic, Black, Black Italic - Slabo 27px
Font Styles: 1 Regular - Oswald
Font Styles: 6 Extra-Light, Light, Regular, Medium, Semi-Bold, Bold - Roboto Condensed
Font Styles: 6 Light, Light Italic, Regular, Regular Italic, Bold, Bold Italic - Source Sans Pro
Font Styles: 12 Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Black, Black Italic - Montserrat
Font Styles: 18 Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black, Black Italic - Raleway
Font Styles: 18 Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black, Black Italic - PT Sans,
Font Styles: 4 Regular, Regular Italic, Bold, Bold Italic
How to choose the best header and body font pairs?
In your Theme Customizer, you have options to set default fonts for both your header and body and the selection of these 2 fonts is known as font-pairing. Choosing 1 font can be hard enough, but choosing a second complimentary font is even harder.
Luckily we can get a helping hand from a couple of great resources. Each of the Google fonts listed in the official repository has its own page with information about the font. Part of that is a section at the bottom left of the page that lists the popular font-paring combinations for your selected font.
Most fonts will have a list of several different font pair suggestions which can be clicked on to update the live preview text to the right. You can click on the arrow icons to switch fonts between heading and body. Another option to preview Google font pairs is on the Font Pair website.
This site allows you to browse in various font category pairs such as Sans-Serif/Serif Serif/Sans-Serif Sans-Serif/Sans-Serif Display/Sans-Serif etc. You can also search for a particular font that will give you all available font pairs using your selected font. *This post was originally published in April 2015
How can i add custom fonts to divi and used in modules with all weights.
https://www.elegantthemes.com/blog/theme-releases/divi-font-options-update
a great thing! but only the three fonts at the beginning can be tested??… that does not work for the others… or i do not understand it…?? 🙂
they should work, but now this page not really needed as the fonts in Divi are the Google fonts which can be tested at https://fonts.google.com/
I only have 6 fonts available and I am running the latest Version of Divi.
I’m sure there is something that I am missing – can someone please help?
do you have google fonts enabled in Divi > Theme Options > general “Use Google Fonts”
Oh boy, I didn’t … sorry for the silly question. All good now 🙂
How can I find out what font a pre-made theme is using? The theme fonts are set to “Default”, and I tried using an online font matching service, but the suggested matches weren’t included in Divi. Thanks in advance!
do you mean the divi layouts? i think most are set in each individual module..
I can’t find out either. I click into the module to find out but they are just set to “Default” (but the “Default” for each layout is different…) and I can’t figure out which font the pre-made layout is using.
Hello! I had access to a lot of font before, but now I have just access to five… I don’t know what happened.. do you know why?
are google fonts disabled in theme options?
Hello. guys. Divi is great. But I have a question. Why I can not see Header Font and Body Font in General Settings > Typography? Do I need some setting for this?
I do get these options in Theme Customizer for header and body font… you have to enable google fonts in theme options > general settings if you want to see more than the 5 non-google fonts
You don’t get any font options for header and body, or just a few (5/6)? You would need to enable Google fonts in Divi > Theme Options > enable Google fonts to see the full list of fonts.
I don’t get any font options for header and body, But I already had enable Google fonts.
Ok, you should. i would open a ticket with ET support
Oh! Thank you for your kind. But I solved my problem using custom css.