Polices personnalisées Divi : comment ça marche ?

Publié le 09/09/2020 | 0 commentaires

Une police personnalisée Divi est une police qui n’est pas disponible nativement au sein de l’éditeur Divi ou même celui de WordPress (Gutenberg). Pourtant, selon votre projet ou celui de votre client, il est probable d’avoir à utiliser des polices spécifiques qui ont été élaborées sur-mesure pour le projet ou qui ont été achetées sur une plateforme dédiée. On est donc bien loin des éternelles Google Fonts que l’on retrouve partout.

Dans cet article, je vais vous expliquer comment implémenter une police personnalisée dans vos projets Divi. Vous verrez qu’il existe plusieurs manières, certaines simples et d’autres plus complexes.

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Pourquoi utiliser une police personnalisée dans Divi ?

Tous les projets Web ne se ressemblent pas, ou du moins ne devraient pas se ressembler… C’est pourquoi l’utilisation d’une police personnalisée – aussi appelée Custom Font – est un bon point de départ pour différencier votre site des sites « communs ».

Une police personnalisée vous permet de coller parfaitement à votre charte graphique. Par exemple, la police utilisée pour votre logo pourrait être utilisée sur votre site web. Ainsi, une homogénéité se crée entre vos divers supports de communication.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

2 – Les formats de polices pour le Web

Les fichiers de polices sont disponibles en plusieurs formats pris en charge plus ou moins bien par les navigateurs (Chrome, Firefox, Opéra, Safari…).

TTF (TrueType Font) et OTF (OpenType Font) sont les formats de police les mieux pris en charge :

Version des navigateursEOTOTF/TTFWOFFWOFF2SVG
IE 8x
IE 9 à 11xxx
EDGE 12 à 14xx
FIREFOX 40 à 45xxx
CHROME 43 à 49xxx
SAFARI 8 à 9xxx
OPERA 32 à 35xxx
iOS SAFARI 8.4 à 9.1xxx
ANDROID 4.4 à 44xx
CHROME for Android 46xxx
Compatibilité des formats de polices en fonction des navigateurs (source).

Donc en fonction de ce tableau, vous comprenez que selon les fichiers de polices que vous importerez dans votre site, certains navigateurs ne pourront pas les interpréter.

Par exemple, si vous importez des polices au format EOT ou SVG, très peu d’utilisateurs les verront.

La solution serait alors d’importer tous les formats de police au sein de votre site afin que tous vos utilisateurs puissent en bénéficier.

Si vous n’êtes pas en possession de tous ces formats, il vous suffira alors de les générer via FontSquirrel (nous verrons cela après). Mais concrètement, si vous utilisez des polices TTF ou OTF, cela devrait largement suffire (qui utilise encore Internet Explorer ? Sérieux ! Pour ma part, je n’ai plus touché à ça depuis 1998).

L’autre solution, qui est plutôt une solution de secours, est d’indiquer dans votre code les polices de base qui doivent être prises en charge par le navigateur dans le cas où il n’arriverait pas à afficher votre police personnalisée. Par exemple, vous pourrez indiquer Arial, Times New Roman, Verdana, Cursive, etc.

Ne tardez plus ! Découvrez le thème Divi ici !

3 – Police personnalisée vs Google Font

Voilà une question que vous pouvez vous poser : pourquoi s’embêter à utiliser une custom font puisque la plupart des thèmes WordPress, dont Divi, permet d’utiliser le catalogue des Polices Google (Google Fonts) ?

Il est vrai que le choix est bien vaste et il est rare de ne pas trouver chaussure à son pied avec la multitude de polices disponibles. Pourtant, la plupart d’entre elles sont vues et revues. C’est vrai… Mais il y a aussi un autre point à aborder : la confidentialité.

En effet, en utilisant ce service, l’API Google Fonts fourni les polices demandées lors de la visite d’une page web depuis les serveurs de Google. Le tout est stocké dans le cache du navigateur de votre visiteur et est mis à jour si nécessaire. De ce fait, Google récupère l’adresse IP de votre visiteur qui n’est rien d’autre qu’une donnée personnelle. Dans ce cas, le RGDP devrait être respecté et vous devriez obtenir le consentement du visiteur pour pouvoir afficher vos polices.

Utiliser Google Font n’est pas illégal mais votre page de politique de confidentialité devra en informer votre visiteur, comme le requiert le RGPD. Vous devrez également faire un lien vers la politique de confidentialité de Google. Pour en savoir davantage à ce sujet, je vous conseille de lire cet article bien détaillé.

C’est aussi pour ces raisons que Divi propose la désactivation des polices Google Fonts pour votre projet :

Desactiver Google Fonts Divi
Désactiver Google Fonts dans Divi

Pour désactiver les Google Fonts de Divi, il suffit de vous rendre à l’onglet Divi > Options du Thème > Général et de décocher l’option d’utilisation des Google Fonts.

Si vous décidez de vous passer de ce service, vous aurez certainement besoin de la suite de cet article…

4 – Où trouver des polices personnalisées ?

Il existe des tas de sites pour trouver des polices personnalisées mais n’oubliez pas de respecter les droits d’auteur. En effet, les polices gratuites ne sont pas forcément libres de droits, c’est la première des choses à retenir.

Ensuite, il faut savoir qu’il existe des polices premiums, c’est-à-dire des polices payantes. Dans ce cas, référez-vous bien à la licence de ces polices car certaines peuvent être utilisées dans vos projets commerciaux et d’autres seulement dans vos projets personnels. Donc, veillez à bien vous renseigner.

Enfin, voici une liste de sites où vous pourrez trouver de magnifiques polices :

Dans le Web, il est assez courant d’utiliser une police classique pour le corps du texte et une police un peu plus sophistiquée pour vos polices de titres. Des sites comme Typespiration ou FontJoy permettent de trouver le bon équilibre entre les deux.

plus de ressources pour Divi

5 – Police personnalisée via le Divi Builder

C’est l’option la plus facile ! Une fois que vous avez trouvé votre ou vos polices idéales et que vous êtes en possession de leurs fichiers, voici les quelques étapes pour les installer dans Divi :

5.1 – Être en possession des fichiers .ttf et .otf au minimum

Selon les plateformes sur lesquelles vous avez trouvé vos polices, vous pouvez être en possession d’une police au format .ttf ou .otf. Par sécurité, il vous faudrait les deux, au moins vous êtes tranquille…

Donc, si vous n’en possédez qu’un sur deux, vous pouvez utiliser un convertisseur de fichiers :

Convertir une police TTF en OTF
Convertir une police OTF en TTF avec Convertio.co
  1. Rendez-vous sur le convertisseur Convertio.co et téléchargez votre fichier TTF ou OTF. Pour mon exemple, il s’agit de AlexBrush-Regular.ttf.
  2. Choisissez le format dans lequel ce fichier doit être converti. Dans mon cas, je choisis OTF car je suis déjà en possession du fichier TTF.
  3. Validez en cliquant sur Convertir.
  4. Téléchargez votre fichier, vous allez en avoir besoin…

Voilà, vous êtes à présent en possession des fichiers OTF et TTF.

5.2 – Importer les polices personnalisées via le Divi Builder

Le reste du processus est simple :

Insérer des Polices Personnalisées Divi
Importer les polices dans le Divi Builder
  1. Ouvrez une publication (page ou article) avec le Divi Builder et insérez un module Texte. Allez à l’onglet Style pour définir la police en cliquant sur le menu déroulant.
  2. Dans le menu déroulant, choisissez « Mettre en ligne ».
  3. Choisissez les fichiers de la police personnalisée. Pensez également à nommer votre police. Pour mon exemple, je l’ai nommée Alexa.
  4. Importez au minimum les fichiers OTF et TTF.
  5. Validez en cliquant sur mettre en ligne.

Voilà, votre police personnalisée devrait être fonctionnelle…

5.3 – Définir une police personnalisée par défaut

Maintenant que vous êtes en possession de votre police personnalisée, vous pourriez lui attribuer le rôle « par défaut » pour l’ensemble de votre site.

Ainsi, vous n’avez pas besoin de définir votre nouvelle police à chaque fois que vous utilisez le Divi Builder, vous gagnerez ainsi beaucoup de temps.

Police Par Defaut
Définir les polices pour l’ensemble du site.

Allez simplement à l’onglet Apparence > Personnaliser > Paramètres généraux > Typographie et sélectionnez votre nouvelle police. Vous pouvez définir votre police pour l’ensemble des titres de votre site (police d’en-tête) ainsi que votre police pour le corps du site.

5.4 – Problème lors de l’import de votre police dans Divi

Probleme Import Police Divi
Problème lors de l’import de la police personnalisée au sein du Divi Builder

Il peut arriver que vous n’arrivez pas à importer votre police personnalisée dans le Divi Builder, qui indique :

« Désolé, ce type de fichier n’est pas autorisé pour des raisons de sécurité ».

Deux solutions s’offrent à vous pour corriger le problème :

5.4.1 – Solution n°1 : corriger via le wp-config.php

Si vous êtes à l’aise avec WordPress, votre serveur et votre logiciel FTP, il vous suffira d’éditer le fichier wp-config.php présent à la racine de votre site et d’y inscrire la ligne de code suivante, en fin de fichier :

define('ALLOW_UNFILTERED_UPLOADS', true);
Wp Config Fichier
Éditer le wp-config.php pour autoriser les imports de polices personnalisées dans Divi

Attention, pour des raisons de sécurité, justement, vous devrez supprimer cette ligne de code dès que vous aurez fini d’importer vos polices personnalisées dans Divi !

5.4.2 – Solution n°2 : corriger à l’aide d’une extension

Si vous n’êtes pas du tout à l’aise avec la manipulation des fichiers au sein de votre serveur, préférez alors l’utilisation d’une extension dédiée :

Autoriser Ttf Otf WordPress
Autoriser les fichiers OTF et TTF dans WordPress
  1. Allez à l’onglet Extensions > Ajouter et recherchez l’extension Mime Types Plus. Installez-la et activez-la.
  2. Rendez-vous à l’onglet Mime Types Plus > Edit Mime Type.
  3. Pour autoriser les fichiers OTF : notez otf dans le champ extension, font/otf dans le champ Mime Type et choisissez Document comme type de fichier.
  4. Pour autoriser les fichiers TTF : notez ttf dans le champ extension, font/ttf dans le champ Mime Type et choisissez Document comme type de fichier.

Voilà, vous pouvez recommencer l’import (étape 5.2 de cet article) et vous devriez ne plus rencontrer le problème.

6 – Police personnalisée dans un thème enfant (méthode @font-face)

Une autre solution existe pour implémenter une nouvelle police dans votre site WordPress, il s’agit de la méthode @font-face. Celle-ci fonctionne pour n’importe quel thème, pas seulement Divi.

Vous devez simplement ajouter les fichiers de vos polices personnalisées au sein de votre thème enfant et ajouter quelques lignes de code dans son fichier style.css.

Font Squirrel Converter
Convertir les polices avec FontSquirrel
  1. Rendez-vous sur le site officiel de FontSquirrel et téléchargez le fichier de la police personnalisée que vous avez en votre possession (OTF ou TTF par exemple).
  2. Sélectionnez le mode EXPERT.
  3. Cochez tous les formats de fichier.
  4. Laissez les autres options telles quelles et acceptez les conditions. Cliquez sur DOWNLOAD YOUR KIT.
  5. Vous êtes à présent en possession d’un dossier contenant plusieurs fichiers. Sélectionnez les 5 formats de police (EOT, SVG, TTF, WOFF et WOFF2) et placez-les à la racine de votre thème enfant Divi.
Css Divi Police
Feuille de style CSS pour les polices personnalisées
  1. Ouvrez ensuite le fichier style.css de votre thème enfant et placez-y le code contenu dans le fichier stylesheet.css fourni par FontSquirrel. Ce code ressemble à celui-ci :
@font-face {
    font-family: 'goldie_rainbowregular';
    src: url('goldie_rainbow-webfont.eot');
    src: url('goldie_rainbow-webfont.eot?#iefix') format('embedded-opentype'),
         url('goldie_rainbow-webfont.woff2') format('woff2'),
         url('goldie_rainbow-webfont.woff') format('woff'),
         url('goldie_rainbow-webfont.ttf') format('truetype'),
         url('goldie_rainbow-webfont.svg#goldie_rainbowregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
  1. Définissez ensuite quelles sont les balises HTML qui doivent utiliser cette police personnalisée. Le code CSS pourrait ressembler à cela :
h1 {
font-family: goldie_rainbowregular, Arial, sans-serif;
font-size: 48px;
}

h2 {
font-family: goldie_rainbowregular, Arial, sans-serif;
font-size: 36px;
}

h3 {
font-family: goldie_rainbowregular, Arial, sans-serif;
font-size: 24px;
}

Comme vous le voyez dans le code ci-dessus, la police « goldie_rainbowregular » est utilisée pour les titres de niveau 1, 2 et 3. La deuxième valeur (Arial) et la troisième valeur (sans-serif) sont des polices de secours qui seront prises en compte par les navigateurs dans le cas où ils n’arriveraient pas à charger votre police personnalisée.

Je peux concevoir que cette méthode est bien plus complexe que la précédente mais c’est la manière classique et universelle d’ajouter une police personnalisée dans un thème WordPress.

7 – Police personnalisée via les réglages de Divi

Il reste une dernière solution pour ajouter des polices personnalisées dans Divi. Cela est valable si votre police est hébergée ailleurs sur le Web ou si vous avez besoin d’une police Google Font qui n’est pas encore disponible dans le Divi Builder (cela peut arriver).

Voici comment faire :

Custom Font Divi
Ajouter une police personnalisée via le thème Divi
  1. Rendez-vous sur le site des Google Fonts. Recherchez votre police et sélectionnez-la en cliquant sur +Select this style.
  2. Un panneau latéral s’ouvre.
  3. Dans l’onglet Embed, vous trouverez le code à implémenter dans Divi. Copiez le premier.
  4. Retournez dans l’administration de votre site à l’onglet Divi > Options du thème > Intégration et collez ce code dans le premier champ, la section <head> du site. Le code devrait ressembler à cela :
 <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
  1. Ensuite, il faudra définir dans votre feuille de style CSS quels sont les éléments qui doivent utiliser cette nouvelle police. Par exemple, si je veux que mes titres H4 utilisent la police Lobster, voici le code à ajouter à l’onglet Apparence > Personnaliser > CSS Additionnel :
h4 {
font-family: 'Lobster', cursive;
font-size: 24px;
}
  1. Maintenant, peu importe l’éditeur utilisé (Gutenberg ou Divi), toutes les polices définies dans la feuille de style doivent être fonctionnelles sur le site entier.

8 – En conclusion…

Les polices, les couleurs et les images sont les éléments les plus importants dans une charte graphique et dans une conception de site Web. Comme tout le temps avec WordPress, il existe diverses manières pour arriver à ses fins. J’espère que ce tutoriel vous aura aidé à mieux comprendre le fonctionnement de WordPress et Divi et vous aura aidé à avancer dans vos projets de site.

Pour aller plus loin, voici une liste de lecture qui devrait vous intéresser :

Polices Perso Divi
Ajouter Polices personnalisées Divi
Add custom font in Divi

2,320 mots

9

Ça devrait vous plaire aussi :

Images rognées (recadrées) dans Divi : comment éviter cela ?

Images rognées (recadrées) dans Divi : comment éviter cela ?

Pourquoi Divi affiche des images rognées ? C’est souvent le cas des vignettes des modules Blog et Portefeuille… Sans oublier la Galerie Divi… Dans ces 3 modules les images sont retaillées, rognées, recadrées ! Voici comment remédier à cela…

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This