How to Properly Add Custom Fonts to Divi

Divi has native support for Google Fonts, but what if you want to use a custom web font — a brand typeface, a licensed family, something that isn't in Google's library?

There are three ways to do it. I'll go from the easiest to the most robust, so you can stop at whichever level suits you.

1. Divi's built-in font uploader

Divi lets you upload your own fonts, and they show up in the Theme Customizer alongside the Google Fonts.

The uploader lives inside the Visual Builder. Open the Design tab on any module with text options — the Text module is the simplest — and open the font menu. At the top you'll find the Upload option.

Choose Add font, drag and drop your font file, and hit Upload. Divi accepts .ttf and .otf out of the box; to allow .woff/.woff2 you can enable them from the WordPress dashboard.

The one thing to get right: a font family with several weights is several files. Regular, Bold, Italic and Bold Italic are four separate uploads, grouped under one family name — not one file. This tripped people up in older Divi versions, but as long as you upload every variation, the built-in uploader handles a full family fine.

If that covers you, you're done. The next two methods are for when you want more control.

2. Use a plugin

If you'd rather not think about file formats at all, the Use Any Font plugin is the path of least resistance. It converts whatever you upload into every format browsers need and registers the font for you. There's a small one-time fee, starting around $10 for a single site.

It's the right choice when you just want the job done and don't want to touch code.

3. Do it yourself with code

Prefer no plugins, and want the font available inside Divi's font menu like a native option? A few lines in your child theme do it.

First, generate a web-font kit — a set of .woff2/.woff files plus a stylesheet — with a free tool like Transfonter. Upload the kit to a folder in your Divi child theme (say /webfonts/).

Make sure each weight and style is defined as the same font family in the kit's CSS:

@font-face {
    font-family: 'Bergen Sans';
    src: url('BergenSans-Regular.woff2') format('woff2'),
         url('BergenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bergen Sans';
    src: url('BergenSans-Bold.woff2') format('woff2'),
         url('BergenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Bergen Sans';
    src: url('BergenSans-Italic.woff2') format('woff2'),
         url('BergenSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Bergen Sans';
    src: url('BergenSans-BoldItalic.woff2') format('woff2'),
         url('BergenSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

Then enqueue the stylesheet and add the family to Divi's font list from your child theme's functions.php:

add_filter('et_websafe_fonts', 'load_divi_custom_font', 10, 2);

function load_divi_custom_font($fonts) {
    // Load the stylesheet from your web-font kit
    wp_enqueue_style('divi-child', get_stylesheet_directory_uri() . '/webfonts/stylesheet.css');

    // Add the font to Divi's font menu
    $custom_font = array('Bergen Sans' => array(
        'styles'        => '400italic,700italic,400,700',
        'character_set' => 'latin',
        'type'          => 'sans-serif',
        'standard'      => 1,
    ));

    return array_merge($custom_font, $fonts);
}

The font now appears in Divi's font selector everywhere, exactly like a built-in one.

Adding more than one font

Need several families? Upload each kit and add another entry to the array:

add_filter('et_websafe_fonts', 'load_divi_custom_font', 10, 2);

function load_divi_custom_font($fonts) {
    wp_enqueue_style('divi-child', get_stylesheet_directory_uri() . '/webfonts/stylesheet.css');

    $custom_font = array(
        'Bergen Sans' => array(
            'styles'        => '400italic,700italic,400,700',
            'character_set' => 'latin',
            'type'          => 'sans-serif',
            'standard'      => 1,
        ),
        'Your Second Font' => array(
            'styles'        => '400italic,700italic,400,700',
            'character_set' => 'latin',
            'type'          => 'sans-serif',
            'standard'      => 1,
        ),
    );

    return array_merge($custom_font, $fonts);
}

That's it. For most sites the built-in uploader is enough; reach for the code method when you want a licensed family to behave like a first-class citizen inside Divi.

Disclosure: I only recommend products I'd use myself. This post contains an affiliate link, and I may earn a small commission if you purchase through it — at no extra cost to you.