Question posted in
The full documentation can be found here.

Divi theme – How do I add a font to the Divi WordPress theme?

How do I add a font to the Divi wordPress theme? The font is from fonts.com and is called Vectora. Should I use a plugin or custom code? The site I would like to add it to is stewards.degrootdesign.com

Tags:

4

Answers


  1. 0

    Divi is a commercial WordPress theme that not everyone has access to, so we don’t know the particulars of how the theme is designed; so this is the wrong place to ask, and you should to ask Divi theme support for help. You bought the theme, and support is included in the cost.

    Their advice will probably include making a child theme; see Child Themes « WordPress Codex. And/or possibly a plugin to make CSS (and font) changes easy, such as https://wordpress.org/plugins/simple-custom-css/

    Login or Signup to reply.
  2. 0

    (Assuming that you have the latest version update of Divi):

    Go to Appearance -> Customize -> General Settings -> Typography

    You should see what is in the screenshot below. From there you can change the header and body font

    🙂 Hope this helps

    Screenshot for Typography

    Login or Signup to reply.
  3. 0

    Late answer – but I’ll bet it’s helpful to someone as i still couldn’t find an answer to this anywhere today:

    To add a custom font to the Divi theme (i’m on V3) font selector dropdowns, you’ll need to follow the following steps:

    Add your webfont folder to the Divi theme folder eg:
    Divi/webfonts

    Then reference it from header.php before the closing head tag eg:

    <link rel="stylesheet" href="<?php echo $template_directory_uri; ?>/webfonts/customfontname.css" type="text/css" charset="utf-8">

    Now, in both: themes/Divi/includes/builder/core.php and themes/Divi/epanel/custom_functions.php
    – find the following line:

    $google_fonts = array(

    and add your font after it, as per the other fonts listed – eg:

    'customfontname'             => array(
            'styles'        => '400',
            'character_set' => 'latin',
            'type'          => 'sans-serif',
        ),

    This worked a charm for me. The font should be usable and also should appear in the Font selection dropdowns in the Divi Editor with the other google fonts.

    Note: I know this should be done via a child theme and will be overwritten with a Divi theme update but my php and wordpress-fu is too poor to work out how to manage this just yet.

    Login or Signup to reply.
  4. 0

    Best approach to override the function in child theme by simply adding this code in child theme and your font will be appear in Divi theme editor. 

    /*
 * Fonts Function for fetching all fonts.
 *
 */
if ( ! function_exists( 'et_builder_get_google_fonts' ) ) :
    function et_builder_get_google_fonts() {
       $google_fonts = array(
            'customfontname' => array(
                'styles'        => '400',
                'character_set' => 'latin',
                'type'          => 'sans-serif',
            ),
        );

        return apply_filters( 'et_builder_google_fonts', $google_fonts );
    }
endif;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search