Divi Fonts Guide & Preview

The Divi font system was given a large update with Divi version 3.0.83 (updated 10-18-2017) 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.

How many Divi fonts are there?

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 you can preview the fonts in any modules that have text options by going 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 Divi fonts?

1. 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)
2. Go to General Settings > Typography
3. Scroll down Header Font or Body Font sections
4. 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.
5. 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.

1. Open any module with a text component
2. Go to the Design tab then click on either of the Text or Heading Text sections
3. Click on the Text Font or Heading Text Font drop-down menus
4. Click on the Upload button at the top of the drop-down menu
5. In the pop-up, you can give your new font a name and select the font file to upload
6. Hit upload and your font will be added to the list of Divi fonts.

What are the best Divi fonts?

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 the 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 Divi fonts

1. Roboto
   Font Styles: 12
   Thin, Thin Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Bold, Bold Italic, Black, Black Italic
2. Open Sans
   Font Styles: 10
   Light, Light Italic, Regular, Regular Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold & Extra-Bold Italic
3. Lato
   Font Styles: 10
   Thin, Thin Italic, Light, Light Italic, Regular, Regular Italic, Bold, Bold Italic, Black, Black Italic
4. Slabo 27px
   Font Styles: 1
   Regular
5. Oswald
   Font Styles: 6
   Extra-Light, Light, Regular, Medium, Semi-Bold, Bold
6. Roboto Condensed
   Font Styles: 6
   Light, Light Italic, Regular, Regular Italic, Bold, Bold Italic
7. 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
8. 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
9. 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
10. 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 which will give you all available font pairs using your selected font.

*This post was originally published in April 2015