Tired of Basic Fonts? Here's How I Added a Unique Look to My Divi Website

Shahzad Raza

— 4 min read
Divi Fonts

Introduction

Let’s be honest—fonts can make or break your website. You can have a clean layout, sharp images, and the best color scheme in the world… but if your fonts don’t match your brand’s personality, the whole vibe falls flat.

That’s exactly what I experienced while building a site for one of my own projects using the Divi theme. I loved how easy Divi made everything—layouts, sections, responsiveness—but when it came to fonts, the built-in options felt a little too… basic.

So I went on a little mission. I wanted to give my Divi website a custom, unique look, starting with fonts that matched the brand voice perfectly. In this post, I’ll share exactly how I did it—step-by-step—and how you can do the same in just a few minutes.

Why Custom Fonts Matter More Than You Think

Before we jump into the how-to, let’s talk about why this even matters.

Fonts are more than just letters. They:

  • 🧠 Create a visual tone
  • 🏷️ Represent your brand identity
  • 📱 Improve readability across devices
  • 😍 Add personality and emotion

When I used the default Divi fonts like Roboto, Lato, or Open Sans, the site looked fine—but not memorable. My brand needed something different—something with a bit more flair, character, and uniqueness.

Step 1: Choosing the Right Font

The first thing I did was go font hunting.

Here are some places I explored:

For this project, I ended up choosing a font from Google Fonts called "Poppins SemiBold" for headings and a softer font for body text—"DM Sans".

Once I had the fonts selected, it was time to bring them into Divi.

Step 2: Adding Google Fonts in Divi (The Easy Way)

Luckily, Divi already supports most Google Fonts. Here’s how I did it:

🔧 Method 1: Native Google Font Integration in Divi

  1. Go to your WordPress dashboard
  2. Navigate to Divi > Theme Customizer > General Settings > Typography
  3. Under Header Font and Body Font, scroll through the list
  4. Select your desired Google font (like Poppins or DM Sans)
  5. Save and publish

Just like that, the fonts were updated across the site!

But what if your font isn’t available in Divi’s default dropdown?

Let’s move to the real game-changer.

Step 3: Uploading a Custom Font to Divi

For my next client, I wanted to use a completely unique font that wasn’t listed in Divi. Here’s the exact process I followed:

🛠️ Uploading a Custom Font to Divi Theme Options

  1. Convert your font to web formats
    • Make sure the font is in .ttf or .woff format
    • You can use Transfonter to convert OTF to web font formats
  2. Go to Divi > Theme Options > Builder > Advanced
    • Scroll down to find the Custom Font Upload area
  3. Click “Upload” and choose your font file
    • Name your font (e.g., “MyCustomHeader”)
  4. Save changes

Now, when you go into any Divi module (like Text, Blurb, or Button), you’ll see your custom font available in the dropdown list. Easy!

Step 4: Setting Global Font Styles

To avoid changing fonts on every single module manually, I used Divi’s Theme Builder and Global Presets:

🌍 How to Set Global Fonts in Divi:

  1. Go to Divi > Theme Customizer > Typography
  2. Choose your new custom or Google font for:
    • Header Text
    • Body Text
  3. Adjust base sizes, letter spacing, and line height for readability
  4. Save your changes

I also used Global Presets for heading styles (H1, H2, H3) so that I didn’t have to apply the same settings again and again. It saved me hours!

Step 5: Fine-Tuning with CSS (Optional)

There were a few places where Divi didn’t apply the new fonts, like inside a plugin shortcode or third-party form. In those cases, I used a little custom CSS:

cssCopyEditbody {
font-family: 'DM Sans', sans-serif;
}

h1, h2, h3, h4 {
font-family: 'Poppins SemiBold', sans-serif;
}

I added this under Divi > Theme Options > Custom CSS.

Step 6: Testing on All Devices

Don’t forget this part—it’s crucial!

Once I set everything up, I tested my fonts on:

  • Desktop (Chrome, Firefox, Safari)
  • Mobile (iPhone + Android)
  • Tablet
  • Older browsers

I also checked page speed, and the font didn’t slow things down because I optimized the file size.

Final Result: A Brand-New Look

After adding custom fonts, my site instantly felt more polished and aligned with my brand identity.

  • My headlines stood out more clearly
  • The body text was easier to read
  • The overall look felt more premium and modern

Even better? Visitors started to stay longer on the site, and a few even messaged me asking what font I was using!

Bonus: Using Adobe Fonts with Divi

If you’re using Adobe Fonts, here’s a quick guide:

  1. Sign in to Adobe Fonts
  2. Activate the font you want to use
  3. Copy the embed code
  4. Go to Divi > Theme Options > Integration > Head Code
  5. Paste the Adobe Fonts embed link
  6. Use CSS to apply the font, like:

cssCopyEditbody {
font-family: 'Your Adobe Font Name', sans-serif;
}

Quick Recap: Your Font Styling Checklist

✅ Choose your font (Google or custom)
✅ Upload it in Divi settings
✅ Apply global font settings in Theme Customizer
✅ Use global presets for modules
✅ Add CSS if needed
✅ Test on all devices

Conclusion

Fonts aren’t just a design detail—they’re your brand’s voice in text form. Taking the time to swap out default Divi fonts with a custom style helped me level up my site’s visual appeal, build trust with visitors, and improve overall usability.

So if you're tired of the same old fonts and want to make your website actually feel like your brand, go ahead—try adding your own custom font today. Divi makes it easy, and the result is totally worth it.

Read more