fbpx

Add Google Fonts to the Divi customizer

Divi is a powerful WordPress theme and page builder from Elegant Themes that allows folks like me to quickly generate modern and professional designs when a custom job just isn’t justified. It’s one of the most popular theme solutions for WordPress out there and offers a lot of customization options.

Out of the box, Divi allows you to start customizing the typography on your website. These options include a wide selection of Google Fonts, but it by no means provides the whole collection. If you find yourself in need of a Google Font that isn’t already built into Divi, you could write some custom CSS for your theme and queue up the font yourself, sure, but I wanted a way to integrate my desired font options seamlessly into Divi’s options, just like the existing ones. How can we do that?

A heads-up, you’ll need to know how to write (or at least copy, paste and tweak) PHP and CSS for this tutorial. Also, be sure you’re working with a plugin or child theme and not altering Divi itself. Making changes directly to Divi prevents you from upgrading down the road without losing all your customizations.

The page builder

Divi actually allows you to select fonts in two places—the page builder and the theme customizer. We’ll start with the page builder, as it’s the simpler task.

Divi exposes its font options via a pair of filters. The first of these is et_builder_google_fonts. To add your new font selections to Divi’s options, you’ll want to take advantage of that somewhere like your functions.php file. Add your new Google font and its associated styles, character sets and type to the existing fonts like so:

function my_theme_google_fonts($fonts) {
  $fonts['Vidaloka'] = [
    'styles' => '400',
    'character_set' => 'latin',
    'type' => 'serif',
  ];
  // sort fonts alphabetically
  ksort($fonts);
  return $fonts;
}

add_filter('et_builder_google_fonts', 'my_theme_google_fonts');

The ksort is optional, but keeps things nice and organized. Now if you go to any page and activate the Divi page builder, you’ll see your new font listed at the end of the previous options (or in alphabetical order if, unlike me, you added the ksort before you took a screenshot).

A custom Google Font available in the Divi page builder

If you select it and save, it’ll show up on the front end exactly like any of the other options. Awesome!

Custom Google Fonts in the Divi theme customizer

Ensuring this next part looks nice is a bit trickier. To first understand the problem, open up the theme customizer and navigate to General Settings → Typography. You’ll notice each font is not just in the list, but also represented in its own typeface rather than the default admin typeface.

The Divi theme customizer font options

If you have any background in development and network requests, you might immediately be horrified, assuming that each font is being loaded on the page. What’s actually going on is much more tame. The folks at Elegant Themes have created a spritesheet containing an image of each font title in its own typeface. CSS classes are applied to each option in the list to make sure the appropriate image appears with each font choice.

Ignoring this for a moment, you can actually attach the exact same function you wrote earlier to a new hook to add your font to these options:

add_filter('et_google_fonts', 'my_theme_google_fonts');

Easy enough. Open up the customizer, however, and you’ll see instead of your font being represented nicely with all the other options, “Default” now just appears twice. Without a CSS class that the Divi stylesheet recognizes, it falls back to the default sprite.

To get this to look nice, you’ll need to create your own background image. Take a screenshot of the font name typed out in itself and drop it into a folder in your theme, about 216px x 40px. For a perfect fit, use something like Photoshop and get one with a transparent background. If you’re not already enqueueing a custom stylesheet in the admin, you’ll need to set that up using the admin_enqueue_scripts action, also in something like your functions.php file:

add_action( 'admin_enqueue_scripts', 'my_theme_admin_enqueue_scripts' );

function my_theme_admin_enqueue_scripts() {
  wp_enqueue_style('my-admin-theme', get_stylesheet_directory_uri().'/admin.css');
}

Next, create an admin.css in the root of your theme (or whatever file you may be referencing above). We’ll add just a couple of styles to this to get the one font that’s set up to work.

.et_google_font_custom_select span.et_filter_text.et_gf_vidaloka,
.et_google_font_options li.et_gf_vidaloka {
  background-image:url('./img/vidaloka.jpg');
  background-size:contain;
}

To get the name of your CSS class selector, you’ll take the name of your font, lowercase the whole thing, and swap spaces with hyphens. If you aren’t 100% sure, you can use your browser’s inspector to check it out live in the customizer.

If you’re feeling particularly efficient, rather than request a whole stylesheet, you could simply add the styles to the admin head, and even make sure it’s only happening on the theme customizer page. If you know enough to understand why that’s better, I’ll leave you to figure out the code.

Once your CSS is in place, you can go back to the customizer and refresh to see your new font available in the dropdown looking nice and pretty. Unless you’ve been meticulous, it probably won’t match exactly. If you’re feeling particular, you could spend a bit of time to get your background image perfect.

The extra Google font now appearing as intended in the customizer dropdown

Design superb websites

And that’s it! Go forth with your new-found powers and apply gorgeous typefaces to all the things. Be sure to share with your Divi-loving friends and leave any thoughts in the comments below.

Big thanks to commenter Manuel for a couple tips on cleaning up the final interface.


Comments

9 responses to “Add Google Fonts to the Divi customizer”

  1. This is a very nice write up and helpful, thanks!!! One thing that was not mentioned in this article however is where you place the font. I am trying to get the same result using non-google fonts and avoiding enqueues in the functions.php file, yet still have them show up in the builder list and use them on web pages. That way I do not (hopefully) have to use any custom css selectors as well. Any advice on this?

    TIA…

    1. Ethan Clevenger Avatar
      Ethan Clevenger

      Hey Shawn,

      Divi usually handles the enqueueing of fonts, but you want a non-Google font, so you’re going to have to enqueue it yourself in functions.php. However, you obviously don’t want to do that all the time – only if that font has been selected.

      Unfortunately, Divi doesn’t appear to offer any actions within the lifecycle of a page builder module to write your own enqueue, nor does it offer a filter on the URL being used to fetch the font. So this will get messy, but add a really late hook to wp_enqueue_style. Use `wp_style_is` to see if your font has been enqueued (the handle will be the slugified version of your font name), and if it has, deregister and reregister it with the correct src.

      For the site-wide customizer, do the same thing. The handle will be the same as the previous, but prefixed with `et-gf-`.

      This is all untested, but should get you going.

  2. Manuel Avatar
    Manuel

    Thank you very much for this detailed and useful blog post.
    It really saved me a lot of time digging around.

    Some additions:
    1. I had to adapt the admin css’s selector to also match when you selected the font as your choice and it just displays the currently selected font:
    `.et_google_font_custom_select span.et_filter_text.et_gf_vidaloka,
    .et_google_font_options li.et_gf_vidaloka`

    2. I found the correct proportions to be 216×40 px, and also it’s important to use a PNG file with transparency – so that it displays correctly when selected (grey background).

    Thank you again!

    1. Ethan Clevenger Avatar
      Ethan Clevenger

      Great additions, I’ll be sure to update with that information!

  3. Sidjay Avatar
    Sidjay

    Thanks a lot, it is very helpful !! Everything works perfectly !
    One question : I’m very new in PHP… what would be the code to add several fonts in the functions.php file ? Thanks !

    1. Ethan Clevenger Avatar
      Ethan Clevenger

      Hey Sidjay,

      Simpy continue to append to the array, like so:

      “`
      $fonts[‘Vidaloka’] = [
      ‘styles’ => ‘400’,
      ‘character_set’ => ‘latin’,
      ‘type’ => ‘serif’,
      ];
      $fonts[‘Another’] = [
      ‘styles’ => ‘400’,
      ‘character_set’ => ‘latin’,
      ‘type’ => ‘serif’,
      ];
      “`

      1. Sidjay Avatar
        Sidjay

        Thank you Ethan !

  4. Thanks for this article. It is very helpful and I like the fact that it will add to the existing Divi fonts and make them accessible in the normal way.
    One thing that I’m struggling with is getting different weights of the same font to work. I want to use Montserrat Extra-Light for headings and Montserrat Regular for body. The regular version is already in Divi as standard so I just need to add the extra-light version. If I set the style to 200 to get extra-light this overrides the default Montserrat font. Is there a way to create multiple versions of the same font?

  5. Thank you, exactly what I needed! :)

Leave a Reply to Sidjay Cancel reply

Your email address will not be published. Required fields are marked *