Divi Fonts and Custom Divi Fonts: A Complete Guide

Shahzad Raza

— 3 min read
Divi Fonts and Custom Divi Fonts: A Complete Guide

Introduction

Divi is one of the most popular WordPress themes and page builders, offering a highly customizable design experience. One crucial aspect of web design is typography, and Divi provides a vast selection of built-in fonts along with the ability to upload custom fonts. This guide will walk you through everything you need to know about Divi Fonts and Custom Divi Fonts, including how to select, modify, and implement them for a unique website design.

1. Understanding Divi Fonts

1.1 Built-in Google Fonts

Divi comes with an extensive collection of Google Fonts that can be easily applied to any text element, including headings, paragraphs, buttons, and other modules. These fonts are hosted externally and load automatically when applied.

1.2 How to Change Fonts in Divi

Changing fonts in Divi is simple and can be done through the Theme Customizer or the Divi Builder.

Method 1: Using the Divi Theme Customizer

  1. Go to Divi > Theme Customizer in your WordPress dashboard.
  2. Navigate to General Settings > Typography.
  3. Select the desired font for Body Text and Headings.
  4. Adjust additional settings like font size, line height, and letter spacing.
  5. Click Publish to save changes.

Method 2: Using the Divi Builder

  1. Open a page using the Divi Builder.
  2. Click on a text module and go to the Design tab.
  3. Under the Text settings, find the Font Family dropdown.
  4. Select your preferred font.
  5. Save the changes and exit.

2. Customizing Fonts in Divi

Divi allows for extensive typography customizations beyond simply selecting a font. Here are some key options:

  • Font Weight: Adjust font thickness (e.g., Light, Regular, Bold, Extra Bold).
  • Font Style: Choose Italic, Uppercase, or Underline effects.
  • Letter Spacing: Modify the spacing between letters.
  • Line Height: Control spacing between lines for readability.
  • Text Shadow: Add subtle or bold shadows for aesthetic effects.

3. Using Custom Fonts in Divi

If you want to go beyond Google Fonts and upload your own custom fonts, Divi makes it easy.

3.1 Supported Font File Types

Divi supports the following custom font file formats:

  • TTF (TrueType Font)
  • OTF (OpenType Font)
  • WOFF (Web Open Font Format)

3.2 Uploading Custom Fonts

Method 1: Upload via Divi Builder

  1. Open any module that contains text (e.g., Text Module, Button Module).
  2. Go to the Design tab and select Font Family.
  3. Click Upload a Font.
  4. Select and upload a font file from your computer.
  5. Name the font and click Upload.
  6. Save changes.

Method 2: Upload via Custom CSS (For Advanced Users)

If you want to use a custom font site-wide without manually selecting it in Divi Builder, follow these steps:

  1. Upload the font files to your WordPress Media Library or via FTP.
  2. Save changes.

Add the following CSS code to Divi > Theme Options > Custom CSS:

@font-face {
    font-family: 'CustomFont';
    src: url('https://yourwebsite.com/wp-content/uploads/your-font.woff2') format('woff2'),
         url('https://yourwebsite.com/wp-content/uploads/your-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'CustomFont', sans-serif;
}

4. Best Practices for Using Divi Fonts

  • Choose Readable Fonts: Stick to clean, professional fonts for better user experience.
  • Limit the Number of Fonts: Using too many fonts can make your site look cluttered. Stick to 2-3 font families.
  • Optimize Font Loading: Custom fonts can slow down your website. Use WOFF2 format for better performance.
  • Use Responsive Typography: Adjust font sizes for mobile and tablet views in Divi’s settings.

Conclusion

Divi provides a flexible and powerful typography system with a wide range of fonts and customization options. Whether you choose to use built-in Google Fonts or upload your own custom fonts, you can create a unique and professional-looking website effortlessly. By following the best practices mentioned in this guide, you can ensure that your typography enhances your design and user experience effectively.

Need help implementing custom fonts in your Divi website? Feel free to reach out for expert assistance!

Read more