Divi : ajouter police de caractère/typo/Google Font

par Jean - netologiste.com | Mis à jour le 3 Août 2020 | Divi | 0 commentaires

Divi Google Fonts. Divi travaille avec les typographies offertes gratuitement par Google : les Google Fonts. Ce sont des polices de caractères.

Seule une petite partie de ces polices de caractère est disponible par défaut dans Divi. On peut vouloir en utiliser d’autres.

Utilisation standard en CSS

Pour ajouter d’autres Google Fonts à Divi pour les utiliser normalement en CSS : suivez simplement les instructions habituelles de Google Fonts.

Ajout aux polices par défaut de Divi

Ajouter des typographies dans la liste de Divi permet de les sélectionner dans les options et dans les modules.

Attention, ces manipulations sont avancées.

Google Fonts Divi

Pour ce faire : copier la fonction function et_builder_get_google_fonts() { depuis /wp-content/themes/Divi/includes/builder/core.php dans le fichier functions.php de votre Child theme :

function et_builder_get_google_fonts() {
$google_fonts = array(
'Pathway Gothic One' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'sans-serif',
),
'Abel' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'sans-serif',
),
'Amatic SC' =&gt; array(
'styles' =&gt; '400,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Arimo' =&gt; array(
'styles' =&gt; '400,400italic,700italic,700',
'character_set' =&gt; 'latin,cyrillic-ext,latin-ext,greek-ext,cyrillic,greek,vietnamese',
'type' =&gt; 'sans-serif',
),
'Arvo' =&gt; array(
'styles' =&gt; '400,400italic,700,700italic',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Bevan' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Bitter' =&gt; array(
'styles' =&gt; '400,400italic,700',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'serif',
),
'Black Ops One' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'cursive',
),
'Boogaloo' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Bree Serif' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'serif',
),
'Calligraffitti' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Cantata One' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'serif',
),
'Cardo' =&gt; array(
'styles' =&gt; '400,400italic,700',
'character_set' =&gt; 'latin,greek-ext,greek,latin-ext',
'type' =&gt; 'serif',
),
'Changa One' =&gt; array(
'styles' =&gt; '400,400italic',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Cherry Cream Soda' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Chewy' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Comfortaa' =&gt; array(
'styles' =&gt; '400,300,700',
'character_set' =&gt; 'latin,cyrillic-ext,greek,latin-ext,cyrillic',
'type' =&gt; 'cursive',
),
'Coming Soon' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Covered By Your Grace' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Crafty Girls' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Crete Round' =&gt; array(
'styles' =&gt; '400,400italic',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'serif',
),
'Crimson Text' =&gt; array(
'styles' =&gt; '400,400italic,600,600italic,700,700italic',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Cuprum' =&gt; array(
'styles' =&gt; '400,400italic,700italic,700',
'character_set' =&gt; 'latin,latin-ext,cyrillic',
'type' =&gt; 'sans-serif',
),
'Dancing Script' =&gt; array(
'styles' =&gt; '400,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Dosis' =&gt; array(
'styles' =&gt; '400,200,300,500,600,700,800',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'sans-serif',
),
'Droid Sans' =&gt; array(
'styles' =&gt; '400,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'sans-serif',
),
'Droid Serif' =&gt; array(
'styles' =&gt; '400,400italic,700,700italic',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Francois One' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'sans-serif',
),
'Fredoka One' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'The Girl Next Door' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Gloria Hallelujah' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Happy Monkey' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'cursive',
),
'Indie Flower' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Josefin Slab' =&gt; array(
'styles' =&gt; '400,100,100italic,300,300italic,400italic,600,700,700italic,600italic',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Judson' =&gt; array(
'styles' =&gt; '400,400italic,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Kreon' =&gt; array(
'styles' =&gt; '400,300,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Lato' =&gt; array(
'styles' =&gt; '400,100,100italic,300,300italic,400italic,700,700italic,900,900italic',
'character_set' =&gt; 'latin',
'type' =&gt; 'sans-serif',
),
'Lato Light' =&gt; array(
'parent_font' =&gt; 'Lato',
'styles' =&gt; '300',
),
'Leckerli One' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Lobster' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,cyrillic-ext,latin-ext,cyrillic',
'type' =&gt; 'cursive',
),
'Lobster Two' =&gt; array(
'styles' =&gt; '400,400italic,700,700italic',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Lora' =&gt; array(
'styles' =&gt; '400,400italic,700,700italic',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Luckiest Guy' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Merriweather' =&gt; array(
'styles' =&gt; '400,300,900,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Metamorphous' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'cursive',
),
'Montserrat' =&gt; array(
'styles' =&gt; '400,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'sans-serif',
),
'Noticia Text' =&gt; array(
'styles' =&gt; '400,400italic,700,700italic',
'character_set' =&gt; 'latin,vietnamese,latin-ext',
'type' =&gt; 'serif',
),
'Nova Square' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Nunito' =&gt; array(
'styles' =&gt; '400,300,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'sans-serif',
),
'Old Standard TT' =&gt; array(
'styles' =&gt; '400,400italic,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Open Sans' =&gt; array(
'styles' =&gt; '300italic,400italic,600italic,700italic,800italic,400,300,600,700,800',
'character_set' =&gt; 'latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic',
'type' =&gt; 'sans-serif',
),
'Open Sans Condensed' =&gt; array(
'styles' =&gt; '300,300italic,700',
'character_set' =&gt; 'latin,cyrillic-ext,latin-ext,greek-ext,greek,vietnamese,cyrillic',
'type' =&gt; 'sans-serif',
),
'Open Sans Light' =&gt; array(
'parent_font' =&gt; 'Open Sans',
'styles' =&gt; '300',
),
'Oswald' =&gt; array(
'styles' =&gt; '400,300,700',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'sans-serif',
),
'Pacifico' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Passion One' =&gt; array(
'styles' =&gt; '400,700,900',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'cursive',
),
'Patrick Hand' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,vietnamese,latin-ext',
'type' =&gt; 'cursive',
),
'Permanent Marker' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Play' =&gt; array(
'styles' =&gt; '400,700',
'character_set' =&gt; 'latin,cyrillic-ext,cyrillic,greek-ext,greek,latin-ext',
'type' =&gt; 'sans-serif',
),
'Playfair Display' =&gt; array(
'styles' =&gt; '400,400italic,700,700italic,900italic,900',
'character_set' =&gt; 'latin,latin-ext,cyrillic',
'type' =&gt; 'serif',
),
'Poiret One' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext,cyrillic',
'type' =&gt; 'cursive',
),
'PT Sans' =&gt; array(
'styles' =&gt; '400,400italic,700,700italic',
'character_set' =&gt; 'latin,latin-ext,cyrillic',
'type' =&gt; 'sans-serif',
),
'PT Sans Narrow' =&gt; array(
'styles' =&gt; '400,700',
'character_set' =&gt; 'latin,latin-ext,cyrillic',
'type' =&gt; 'sans-serif',
),
'PT Serif' =&gt; array(
'styles' =&gt; '400,400italic,700,700italic',
'character_set' =&gt; 'latin,cyrillic',
'type' =&gt; 'serif',
),
'Raleway' =&gt; array(
'styles' =&gt; '400,100,200,300,600,500,700,800,900',
'character_set' =&gt; 'latin',
'type' =&gt; 'sans-serif',
),
'Raleway Light' =&gt; array(
'parent_font' =&gt; 'Raleway',
'styles' =&gt; '300',
),
'Reenie Beanie' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Righteous' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'cursive',
),
'Roboto' =&gt; array(
'styles' =&gt; '400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic',
'character_set' =&gt; 'latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese',
'type' =&gt; 'sans-serif',
),
'Roboto Condensed' =&gt; array(
'styles' =&gt; '400,300,300italic,400italic,700,700italic',
'character_set' =&gt; 'latin,cyrillic-ext,latin-ext,greek-ext,cyrillic,greek,vietnamese',
'type' =&gt; 'sans-serif',
),
'Roboto Light' =&gt; array(
'parent_font' =&gt; 'Roboto',
'styles' =&gt; '100',
),
'Rock Salt' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Rokkitt' =&gt; array(
'styles' =&gt; '400,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Sanchez' =&gt; array(
'styles' =&gt; '400,400italic',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'serif',
),
'Satisfy' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Schoolbell' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Shadows Into Light' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Source Sans Pro' =&gt; array(
'styles' =&gt; '400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900,900italic',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'sans-serif',
),
'Source Sans Pro Light' =&gt; array(
'parent_font' =&gt; 'Source Sans Pro',
'styles' =&gt; '300',
),
'Special Elite' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Squada One' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Tangerine' =&gt; array(
'styles' =&gt; '400,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Ubuntu' =&gt; array(
'styles' =&gt; '400,300,300italic,400italic,500,500italic,700,700italic',
'character_set' =&gt; 'latin,cyrillic-ext,cyrillic,greek-ext,greek,latin-ext',
'type' =&gt; 'sans-serif',
),
'Unkempt' =&gt; array(
'styles' =&gt; '400,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Vollkorn' =&gt; array(
'styles' =&gt; '400,400italic,700italic,700',
'character_set' =&gt; 'latin',
'type' =&gt; 'serif',
),
'Walter Turncoat' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin',
'type' =&gt; 'cursive',
),
'Yanone Kaffeesatz' =&gt; array(
'styles' =&gt; '400,200,300,700',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'sans-serif',
),

);

return apply_filters( 'et_builder_google_fonts', $google_fonts );
}

Ajouter une valeur à ce tableau avec le nom de la Google Font que vous souhaitez ajouter à Divi, exemple pour ajouter cette font : https://fonts.google.com/specimen/Pathway+Gothic+One :

'Pathway Gothic One' =&gt; array(
'styles' =&gt; '400',
'character_set' =&gt; 'latin,latin-ext',
'type' =&gt; 'sans-serif',
),

Vérifier les paramètres (graisses disponibles : 400,200 … et les languages character set).

Ajoutée en début de la liste elle apparaîtra en premier dans les listes de typo Divi.

Cette nouvelle police de caractère s’affichera dans le sélecteur de police Divi du visual builder.

Les options du thèmes utilisent un format différent : la police est présentée en utilisant l’image /themes/Divi/epanel/google-fonts/images/all-fonts.png

A ce stade, notre font ajoutée « Pathway » apparaîtra avec le fond d’image qui écrit « Default » dans le backoffice.

On ajoute donc un CSS à l’admin WP :

Dans functions.php :

add_action('admin_print_styles', 'admin_css', 11 );&lt;/code&gt;

function admin_css() {
$admin_handle = 'admin_css';
$admin_stylesheet = get_stylesheet_directory_uri() . '/admin.css';
wp_enqueue_style( $admin_handle, $admin_stylesheet );
}

On crée admin.css dans le child theme, on va chercher le nom de la classe utilisée dans le dropdown des themes options :

Dans le fichier child-theme/admin.css qu’on vient de créer :

.et_gf_pathway_gothic_one { background-image: url(images/pathway.png) !important; }

On crée l’image, et le tour est joué.

Notes : dans /themes/Divi/epanel/custom-functions.php : on trouve aussi une function et_get_google_fonts() (nous avons changé et_builder_get_google_fonts() )