Installer facilement une police de caractères personnalisée dans Divi (et respectez les règles RGDP)

Pour quelles raisons vouloir installer une police personnalisée dans Divi :

1. C’est la police choisie lors de la phase de création graphique
2. Vous utilisez une police Google fonts, mais vous souhaitez être conforme au RGDP.

Nous vous expliquons dans cet article comment intégrer des polices dans Divi. Restez ainsi fidèle à la vision graphique du site, et conforme au RGDP. Nous passerons en revue 3 méthodes :

1. Utiliser la fonction du Divi builder pour ajouter une police
2. Les limites de l’ajout de police via le Divi Builder
3. Chargez manuellement votre police en CSS via votre thème enfant

Quelque soit la méthode utilisée, vérifiez que vous disposez bien des droits pour l’utilisation web de vos polices.

Pourquoi l’utilisation des polices Google dans Divi ne respecte par le RGDP

En sélectionnant les polices Google directement via Divi, ces polices sont appelés depuis les serveurs Google. La conséquence est que l’adresse IP de chaque visiteur du site sera transmise à Google, ce qui n’est pas conforme au RGDP.

Pour se mettre en conformité, il est nécessaire que la police soit installée sur le serveur d’hébergement de votre site. Si vous ne savez pas si votre site utilise des polices Google hébergées sur les serveurs Google ou sur votre serveur web, rendez-vous sur Google font checker . L’outil vous indique si votre police est servi depuis Google ou non :

Pour désactiver l’utilisation des polices Google, vous devez dédactiver les options « Utiliser Google Fonts » et « Sous-ensembles de Google Fonts » qui se trouvent dans Divi>options du thème (onglet « Général »). Après avoir désactiver ces options, vous constaterez qu’il ne reste plus que quelques polices dans le déroulant de sélection (Arial, Verdana, Times New Roman, etc). Ces polices ne sont pas très séduisantes, d’où l’intérêt de pouvoir ajouter des polices de caractères personnalisées dans Divi.

Ajouter des polices personnalisées à Divi via Divi builder

La première méthode consiste à télécharger des polices sur Divi, directement depuis le constructeur lui-même :

Il se peut que vous rencontriez l’erreur suivante : « Désolé, vous n’avez pas l’autorisation de téléverser ce type de fichier ». Cela est dû à des permissions qui vous empêche de charger des fichiers .ttf ou .otf. Dans ce cas, il vous suffit de modifier votre fichier wp-config.php pour y ajouter le code ci-dessous.

define('ALLOW_UNFILTERED_UPLOADS', true);

Insérez cette ligne vers le bas du fichier wp-config, juste au-dessus de la ligne « C’est tout, ne touchez pas à ce qui suit ! Bonne publication. » Une fois vos polices chargées, pensez à retirer ce code pour éviter des brèches de sécurité.

Si vous ne savez pas comment modifier votre fichier wp-config.php

Si vous ne savez pas encore modifier vos fichiers, consulter notre tutoriel pour apprendre à modifier les fichiers présents sur votre serveur. Vous pouvez également utiliser des plugins comme Divi Pixel ou Divi Toolbox. Ils vous éviteront d’avoir à modifier le fichier wp-config.php et offrent beaucoup d’autres fonctionnalités (module complémentaires, effets de textes, imbrication de modules dans d’autres modules, … ). La liste est longue, vous pouvez consultez notre review sur ces deux plugins pour en savoir plus.

Une fois ajoutée, votre police sera disponible dans tous les modules textes, il vous suffit de la sélectionner dans le menu déroulant des polices. Pour la supprimer, cliquez sur l’icône « poubelle ». Si vous souhaitez la retrouver sur votre serveur, elle est stockée dans le dossier suivant : /wp-content/uploads/et-fonts.

Elle sera également disponible dans la configuration générale de Divi si vous souhaitez utiliser la police de manière transverse (voir notre tutoriel pour bien configurer Divi au démarrage).

Les limites de l’ajout de typographies via le Divi builder

Le problème de la première méthode est que vous pouvez définir une seule police pour tous les titres, et une seule police pour le texte des paragraphes. Dans certains cas, vous pouvez souhaiter plus de granularité :

1. Disposer de typographies différentes selons les niveaux de titres. Par exemple, une typographie pour les titres h1, et une autre typographie pour les titres h2.
2. Des extensions qui affichent du contenu texte qui ne tient pas compte des réglages de police par défaut dans Divi. Cela est dû à l’extension qui utilise des classes css spécifiques. Il faudra dans ce cas identifier ces classes pour leur affecter la police.

Même si Divi permet d’affecter une police spécifique module par module, ce peut être fastidieux. Notamment si vous devez effectuer un changement global de police, ou des changements de styles sur la police (tailles, couleurs, etc). Dans ce cas, Divi propose également une solution pour définir différents styles transverses (voir notre tutoriel sur la gestion des styles transverses sur Divi). Mais la méthode CSS peut rester avantageuse si vos styles graphiques restent globalement homogènes.

Comment ajouter des polices personnalisées manuellement en CSS, via le thème enfant

Cette seconde méthode, plus longue, est une alternative à la gestion des polices par Divi. Cela signifie que vous ne verrez pas les polices ajoutées dans la liste de typographies présente dans les modules textes ou la configuration par défaut. L’affectation des polices s’effectue en CSS via le thème enfant (voir notre article pour créer un thème enfant Divi), ou en ajoutant des classes dans vos modules Divi (voir notre article sur l’utilisation des classes et ID des modules Divi)

Étape 1 : Convertissez vos typographies dans des formats web

Rendez-vous sur des services comme Convertio ou Webfont Generator pour exporter les formats .woff et .woff2 de votre (ou vos) typographie(s). Il vous suffit de charger votre fichier initial en .ttf et .otf dans ces outils, qui vous permettront de télécharger deux nouveaux fichiers de police.

Étape 2 : Chargez vos fichiers dans votre thème enfant

En utilisant votre logiciel FTP, créer un dossier « fonts » à la racine de votre thème enfant. Ajouter ensuite dans ce dossier « fonts » les fichiers .ttf et/ou .otf, ainsi que les fichiers .woff et .woff2.

Étape 2 : Modifiez votre fichier style.css

Ensuite, ajoutez le code CSS ci-dessous dans le fichier style.css de votre thème enfant. Dans l’exemple ci-dessous, j’ai intégré deux polices différentes. Vous pouvez en ajouter davantage de la même manière, ou n’en conserver qu’une. Quelques précisions pour adapter ce code à votre projet :

• Déterminer le(s) nom(s) de votre/vos police(s) à la place de ‘demo-font-name’ et ‘demo-font-name-02’. N’utilisez que des minuscules, aucun espace ni caractères spéciaux ou accentués.
• Remplacer les noms des fichiers « demo-font.otf », « demo-font.ttf », « demo-font.woff » et « demo-font.woff2 » par les noms de vos fichiers, dans les chemins d’url. Il n’est pas nécessaire d’avoir à la fois le fichier .otf et le fichier .ttf. Un seul des deux est suffisant.
• Déterminer les styles de vos titres, textes et autres classes CSS. Notez que dans la déclaration des polices au début du code, on ajoute les signes ‘ avant et après le nom de la typographie. Ce n’est pas le cas dans la définition des styles.

/**je declare mes polices**/
@font-face {
font-family: 'demo-font-name';
src: url('/wp-content/themes/demo-child/fonts/demo-font.otf') format('ttf');
src: url('/wp-content/themes/demo-child/fonts/demo-font.ttf') format('ttf');
src: url('/wp-content/themes/demo-child/fonts/demo-font.woff') format('woff');
src: url('/wp-content/themes/demo-child/fonts/demo-font.woff2') format('woff2');
}
@font-face {
font-family: 'demo-font-name-02';
src: url('/wp-content/themes/demo-child/fonts/demo-font-02.otf') format('ttf');
src: url('/wp-content/themes/demo-child/fonts/demo-font-02.ttf') format('ttf');
src: url('/wp-content/themes/demo-child/fonts/demo-font-02.woff') format('woff');
src: url('/wp-content/themes/demo-child/fonts/demo-font-02.woff2') format('woff2');
}
/**je definis mes styles de titres**/
h1 {
font-family: demo-font-name;
font-size: 18px
color: black;
}
h2 {
font-family: demo-font-name-02;
font-size: 14px
color: blue;
}
/**je definis mes styles de texte**/
p {
font-family: demo-font-name-02;
font-size: 12px
color: blue;
}

Quelques points à noter :

• N’oubliez pas de vider votre cache navigateur après la modification du fichier style.css sinon vous ne verrez pas de changements.
• Si les polices ne sont pas prises en compte, vérifiez que la police de vos modules Divi est bien configurée sur la police « Default »

Où trouver des polices personnalisées de qualité

Vous trouverez ci-dessous des liens vers des ressources proposant des typographies à télécharger. Avant de retenir une police, pensez à vérifier que tous les caractères dont vous avez besoin sont disponibles. Par exemple, cela peut poser problème lorsque la langue de votre site contient des caractères non disponibles.

Vérifiez également la bonne adéquation des droits en fonction de votre utilisation. L’utilisation bureautique est différente de l’utilisation web. L’utilisation web peut avoir des licences commerciales ou personnelles, etc.

• Google Fonts : Une recherche de typographies intuitive et un aperçu possible de votre propre texte
• My fonts : Une approche « éditoriale » avec des sélections sur le type d’utilisation, les nouveautés, etc
• What font is : on aime la recherche d’une typographie sur la base d’une image
• Da Font : Une catorisation simple pour trouver une police par thème
• Velvetyne : polices libres de droit, site français
• Fontshare : polices libres de droit