Fonts play a very important part of a designing a website and font choices can make or break the experience for your users. Divi puts a great deal of font options at your fingertips as it comes with over 800 fonts, along with simple font management, ability to upload your own custom fonts, font weight & styles control, heading font management and heading level font selection.
This article is all about Divi fonts and typography and how they work with the Divi builder.
- Why font choices matter?
- How many Divi fonts are there?
- Top 20 Divi Google fonts
- How to find Font pairs
- How to preview Divi fonts?
- What is the default Divi font & how do I change it?
- How to upload custom font in Divi?
Can I just use the default fonts?
Font choice can help define the style of your website and brand as a whole and and how your site users react to the content you provide them. It can also help drive extra attention to specific text and separates information to better articulate content. The default Divi fonts look good and for many it is Ok to just stick with these (like this site does), but with the right font choices you can certainly give your site a better visual look.
- Well formatted typography engages the reader and ultimately keeps them on the page especially with effective CTAs
- It improves the user experience of the reader and sets the tone for the reader
- Typography helps separate between types of content helping you to draw attention to certain areas.
- Good typography is directly linked to good design as that’s how a design communicates with its readers.
- Consistent typography builds trust as your readers now recognize your content by the typography you use. .
How many Divi fonts are there?
Divi comes with over 800 fonts to choose from. These fonts are those found in the Google Fonts collection.
Today we have thousands of fonts and typefaces to choose from. It is an art to combine different headline and body types so they work together in perfect sync. Fortunately, Divi has focused a lot on typography and today has over 800 fonts to choose from and by default uses the “Open Sans” font.
Moreover, with Divi you not only have the ability to choose from multiple fonts but also the ability to customize the fonts spacing, kerning and other styling options.
Find the most popular Divi Google fonts
If you are a little lost with the huge choice of fonts available in Divi you may find it useful to take a look at the most used Google fonts available in the Google fonts analytics page. This page lists the most used Google fonts in the past 7, 30, 90 days and 1 year, so you can pick a font you know is already popular.
Top 20 Divi Google fonts;
- Open Sans
- Slabo 27px
- Roboto Condensed
- Source Sans Pro
- PT Sans
- Open Sans Condensed
- Roboto Slab
- PT Sans Narrow
- Noto Sans
- Playfair Display
- PT Serif
Pairing your Divi fonts?
Now although these fonts may work on their own, to make them work as pairs for your design or brand is a totally different art. You need to work with more than one font, and more importantly you need to choose those that compliment each other well. This process is called Font Pairing.
Well designed websites use font pairing to get the best visual effect out of your website. However, if used incorrectly they can be a disaster.
I recommend using Font Pair which is a website that recommends which Google fonts go well together. In my opinion, it’s the fastest way to font pair without expert knowledge in doing so and gives you almost unlimited options.
How to preview Divi fonts?
Choosing a font that works is no easy feat but with Divi’s visual builder you have the ability to view and test out different fonts in real time.
To do this simply open any module that has the text module and then go to the design tab, then open the section for the text you want to see such as body text or header.
At first, the font name uses the standard Divi style (open sans) but as you hover on it changes to provide a preview of the font’s style.
What is the default Divi font & how do I change it?
Typography can be time-consuming especially for a content-intensive website which is why most experts change the default font at the start. This is a simple step but can save a lot of time as you won’t need to change the content to your desired font.
Step 1: First go to the General Settings
Step 2: Under General settings select Typography
Step 3: Under that select your desired font for header and body text
Here you have the option to select the desired font for header and body along with other customizations for the typography such as spacing, kerning etc.
Note: Don’t forget to hit “Save and Publish” else the settings won’t be saved.
How to upload custom font in Divi?
With the advent of typography, more businesses are creating custom variations of the fonts. In fact, it is pretty common for designers to upload their own custom fonts and Divi makes it extremely easy to do so as you can simply upload text formats like .ttf, .otf, .eot, .woff2 and .woff through any module that supports the text.
[Quick Guide] How to install custom fonts to divi:
Step 1: Open any module that supports the text.
Step 2: Select the design tab then select the dropdown box (next to text)
Step 3: Select the upload button
This opens up a modal where you can choose your custom font files with options to further enter a name for the font and select which weights are supported by your font.
Once the fonts are uploaded you’ll see them as an option within the Divi modules and all of the weights and styles you uploaded will also be available as options.
What is your most used Divi font?
I must admit, I do not usually take advantage of the range of fonts available in Divi and stick with the default Divi font for many of my websites as open sans is a clean and clear font to use and works for me. Perhaps I may start experimenting more and using some of the other fonts at my fingertips in Divi.