Using Adobe Fonts in Divi

Shahzad Raza

— 4 min read
Divi Adobe Fonts
Divi Adobe Fonts

Typography plays a critical role in web design. The fonts you choose can influence your brand perception, readability, and overall user experience. While Divi by Elegant Themes offers a vast selection of Google Fonts by default, many designers and branding professionals prefer Adobe Fonts (formerly known as Typekit) for their premium typeface options. If you want to integrate Adobe Fonts into your Divi website, this guide is for you.

In this article, we'll cover:

  • What Divi Adobe Fonts are
  • Why use Adobe Fonts in Divi
  • How to integrate Adobe Fonts with Divi
  • Tips for optimizing performance
  • Troubleshooting common issues

What Are Adobe Fonts?

Adobe Fonts is a premium font subscription service included with Adobe Creative Cloud. It provides access to thousands of high-quality fonts from foundries around the world. Unlike Google Fonts, which are open-source and free, Adobe Fonts are often exclusive and come with commercial licenses that allow usage in both print and digital media.

Some popular font families available through Adobe Fonts include:

  • Proxima Nova
  • Futura PT
  • Museo Sans
  • Avenir
  • Acumin

These fonts are widely used in branding, UI/UX design, and high-end web projects.

Why Use Adobe Fonts in Divi?

While Divi already integrates seamlessly with Google Fonts, here are a few reasons to consider using Adobe Fonts:

1. Brand Consistency

Many established brands use licensed Adobe Fonts in their printed materials. To maintain visual consistency across platforms, designers often need to use the same fonts on the website.

2. Unique Typography

With thousands of curated and professional typefaces, Adobe Fonts offers more diverse and unique choices than Google Fonts. This helps your Divi website stand out.

3. High Quality

Adobe Fonts are meticulously designed and often come with multiple styles, weights, and advanced typographic features like ligatures and small caps.

4. Licensing

All fonts included in Adobe Fonts are licensed for commercial use, which eliminates legal concerns associated with unlicensed font usage.

How to Integrate Adobe Fonts in Divi (Step-by-Step)

Unfortunately, Divi doesn’t include built-in support for Adobe Fonts out of the box. However, you can easily add them using the Adobe Fonts embed code and some CSS. Here’s how:

🔹 Step 1: Create a Web Project in Adobe Fonts

  1. Visit https://fonts.adobe.com and log into your Adobe account.
  2. Browse the font library and select the font you want to use.
  3. Click “+ Add to Web Project”.
  4. Name your web project (e.g., "My Divi Site Fonts").
  5. Click “Create”, and Adobe will generate an embed code.

This embed code will look like this:

htmlCopyEdit<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

🔹 Step 2: Add the Embed Code to Divi

You’ll need to add the Adobe Fonts embed code to your website’s <head>.

Option 1: Using Divi Theme Options

  1. Go to your WordPress dashboard.
  2. Navigate to Divi > Theme Options > Integration.
  3. Find the box labeled “Add code to the <head> of your blog”.
  4. Paste the embed code there and save.

Option 2: Using a Child Theme

If you’re using a Divi child theme:

  • Open the header.php file.
  • Paste the Adobe Fonts <link> tag within the <head> section.

🔹 Step 3: Apply the Adobe Font Using Custom CSS

Once the font is loaded, you’ll need to use CSS to apply it to your content.

Example CSS:

cssCopyEditbody {
font-family: "proxima-nova", sans-serif;
}

To apply the font to specific Divi modules, you can use class selectors:

cssCopyEdit.custom-heading {
font-family: "proxima-nova", sans-serif;
}

🔹 Step 4: Add Custom CSS in Divi

You can place this CSS in:

  • Divi > Theme Options > Custom CSS
  • Or in the style.css file of your child theme
  • Or inside a module’s Advanced > Custom CSS tab (if targeting a specific section)

Bonus: Using Adobe Fonts in Divi Builder (Visual Builder)

Divi's Visual Builder won’t show Adobe Fonts in the dropdown list. You’ll need to assign custom classes and apply the fonts via CSS.

  1. Add a class to the module in Advanced > CSS ID & Classes. Example: custom-heading
  2. Use the following CSS:

cssCopyEdit.custom-heading {
font-family: "your-font-name-from-adobe", sans-serif;
}

Make sure the font name matches exactly what Adobe Fonts provides in their documentation.

Tips for Optimizing Performance

Using too many external fonts can slow down your website. Here are a few best practices:

✅ Use Only Required Font Weights

When setting up your Adobe Fonts project, only select the styles (e.g., regular, bold, italic) you actually need.

✅ Combine with Local Fonts

Use Adobe Fonts for headings and pair them with system fonts (like Arial or Helvetica) for body text.

✅ Lazy Load Fonts (Optional)

If you're tech-savvy or using a performance plugin, consider lazy-loading your font CSS file to reduce initial load time.

Troubleshooting Common Issues

❌ Fonts Not Displaying?

  • Double-check the embed code is in the correct location (within the <head>).
  • Ensure your CSS font-family matches the Adobe name.
  • Clear cache or disable caching plugins temporarily.

❌ Not Seeing Changes?

  • Make sure your CSS selector is targeting the correct element.
  • Use browser developer tools (F12) to inspect which font is being applied.

Final Thoughts

Integrating Adobe Fonts with Divi opens up a world of creative possibilities. Whether you're building a sleek portfolio, a high-end brand site, or a professional service website, typography can dramatically influence your site's design and effectiveness.

Though Divi doesn't natively support Divi Adobe Fonts, the manual integration process is relatively straightforward—and totally worth the extra effort if you want access to a more refined typeface library.

If you're working with clients who use Adobe branding assets, or you're aiming for next-level typography beyond Google Fonts, using Adobe Fonts in Divi is a game-changer.

🔧 Need Help with Setup?

If you want this implemented on your site or need a child theme with Adobe Fonts pre-configured, feel free to reach out. I offer custom Divi setups with performance-optimized typography integration.

Read more