Pourquoi héberger localement vos polices d’écriture ?
Pour des raisons de performances, tout d’abord. Après plusieurs tests, je me suis rendu compte qu’utiliser les polices hébergées par Google Fonts donnait de mauvais résultats dans PageSpeed Insights (un comble, non ?), alors que les polices hébergées localement permettaient d’obtenir de meilleures notes de performance.
La deuxième raison est le respect du RGPD. En 2022, une cour de justice allemande a rendu un verdict stipulant que les polices hébergées par Google Fonts ne respectaient pas le RGPD (source). Bien que ce soit le seul verdict à ce jour, si vous avez, comme moi, à cœur de respecter la confidentialité de vos visiteurs, vous souhaiterez peut-être héberger vous-même vos polices.
La troisième raison est esthétique : vous pouvez tout simplement avoir besoin d’une police d’écriture qui n’est pas proposée par Divi ou Google. Dans cet article, je vais vous expliquer pas à pas comment héberger localement vos polices quelles soient de Google Fonts ou non et comment les utiliser sur votre site Divi.
Introduction à Divi et aux polices d’écriture
Divi (lien affilié), le célèbre constructeur de pages (Builder en anglais) pour WordPress, utilise par défaut la police Open Sans en version variable de Google Fonts. La version variable d’une police d’écriture permet de modifier dynamiquement plusieurs paramètres (comme l’épaisseur et la largeur) avec un seul fichier, ce qui est plus performant pour le chargement de la page. Toutefois, une police dite statique possède un fichier distinct pour chaque style et épaisseur, ce qui augmente le nombre de fichiers mais assure une compatibilité accrue avec tous les navigateurs.
Désactiver Google Fonts dans Divi
Avant toute chose, désactivez Google Fonts dans Divi (lien affilié) pour éviter les conflits entre les polices Google Fonts intégrées et vos polices Google Fonts locales (vous pouvez passer cette étape si votre police n’est pas une police Google Fonts) :
- Allez dans Divi > Options du thème.
- Dans les options, trouvez « Utiliser Google Fonts » et basculez l’option sur DÉSACTIVER.
- Désactivez également « Sous-ensembles de Google Fonts ».
Méthode 1 : Ajout et utilisation des polices via le Builder de Divi
Télécharger la version statique ou variable de la police Open Sans (ou celle de votre choix)
- Pour la version statique, utilisez le site https://gwfh.mranftl.com/fonts pour télécharger la version .ttf statique d’Open Sans ou d’une autre police Google Fonts. Choisissez le mode de compatibilité Legacy Support pour obtenir le format .ttf, compatible avec le Builder Divi (lien affilié).
- Pour la version variable, rendez-vous directement sur Google Fonts pour obtenir la version variable d’Open Sans, par exemple.
- Pour convertir la police au format .otf, utilisez un convertisseur en ligne comme CloudConvert ou Transfonter.
Autoriser le téléversement de fichiers .ttf et .otf
Pour pouvoir téléverser ces fichiers dans le builder Divi (lien affilié), ajoutez le code suivant au fichier « functions.php » de votre thème enfant :
// UPLOAD FONTS IN DIVI
function allow_unfiltered_uploads() {
define( 'ALLOW_UNFILTERED_UPLOADS', true );
}
add_action( 'init', 'allow_unfiltered_uploads' );
Ce Snippet autorise l’upload de tous les types de fichiers dans WordPress.
Ajouter la police via le Divi Builder
- Ouvrez le Divi Builder et ajoutez un module de texte.
- Allez dans Styles > Texte Titre et cliquez sur « Téléverser une police » pour ajouter votre nouvelle police.
- Si vous utilisez une police variable, cochez la case « TOUT » pour activer toutes les options. Sinon, décochez-la pour sélectionner les styles statiques individuels.
- Pour les polices statiques, n’ajoutez pas un par un les fichiers pour chaque épaisseur. Chargez simultanément les deux extensions .ttf et .otf de la même police pour les importer ensemble. Sélectionnez bien l’épaisseur en désactivant « TOUT » et en choisissant le « font-weight » correspondant.
Supprimer le snippet du fichier functions.php
Pour des raisons de sécurité, il est vivement recommandé de supprimer le snippet ajouté précédemment dans le fichier functions.php une fois vos polices téléversées. Autoriser tous types de fichiers peut poser de graves risques de sécurité.
Paramétrer les polices dans le menu Apparence
Pour appliquer les polices sur l’ensemble de votre site :
- Ouvrez le Divi (lien affilié) Builder et ajoutez un module de texte.
- Allez dans Styles > Texte Titre et cliquez sur « Téléverser une police » pour ajouter votre nouvelle police.
- Si vous utilisez une police variable, cochez la case « TOUT » pour activer toutes les options. Sinon, décochez-la pour sélectionner les styles statiques individuels.
- Pour les fichiers de fonts Statiques, n’ajoutez pas un à un les fichiers Pour chaque épaisseurs chargez les 2 extensions en même temps « .ttf » et « .otf » de la même police pour les importer en même temps. Sélectionnez bien l’épaisseur dont il s’agit en désactivant « TOUT » et en sélectionnant le « font-weight » correspondant.
Attention : bug sur Extra
Si vous utilisez le thème Extra, un bug peut empêcher les nouvelles polices d’être ajoutées aux pages. Ce problème est spécifique au thème Extra et nécessite un contournement avec du CSS personnalisé (voir plus bas).
Vérification de la police avec Google Fonts Checker
Pour vérifier que vos polices sont bien appliquées et pour éviter tout chargement involontaire de polices Google Fonts, utilisez l’outil Google Fonts Checker. Cet outil vous aidera à confirmer que le chargement de Google Fonts est désactivé et que seules vos polices locales sont actives.
Méthode 2 : Insérer manuellement les polices sur votre site Divi
Pourquoi insérer manuellement vos polices dans Divi (lien affilié) ? Parce que le Builder de Divi 4 ne permet d’utiliser que des polices aux formats .ttf et .otf, qui n’offrent pas les mêmes performances que les formats modernes .woff et .woff2. Pour une compatibilité totale avec tous les navigateurs, vous pouvez également utiliser plusieurs autres formats de fichiers pour vos polices.
Cette méthode manuelle contourne aussi le bug d’appel de police dans le thème Extra construit avec le Divi Builder. Cependant, elle ne permet pas de sélectionner une police locale dans la section « Styles » des modules du Builder de Divi, et nécessite donc l’usage de CSS.
Télécharger la police Open Sans ou celle de votre choix
- Utilisez https://gwfh.mranftl.com/fonts pour télécharger les fichiers de la police statique d’Open Sans ou d’autres Google Fonts. Ce site est pratique, car il permet d’alléger les fichiers en ne téléchargeant que l’alphabet « latin » ou seulement les styles (épaisseurs) que vous souhaitez utiliser. Ce site génère également le code @font-face à insérer dans votre CSS, et vous permet de choisir le mode de compatibilité pour les anciens navigateurs.
- Pour obtenir la version variable d’Open Sans, rendez-vous directement sur Google Fonts. Utilisez un convertisseur en ligne comme Transfonter pour convertir la police dans tous les formats désirés. Le format .woff2 est particulièrement léger et adapté aux navigateurs modernes, mais il est recommandé d’utiliser plusieurs formats pour être rétro-compatible avec les navigateurs plus anciens.
Téléversez vos fichiers de polices via FTP
Utilisez votre logiciel FTP préféré pour uploader vos fichiers de polices dans un dossier de votre répertoire wp-content > uploads. Créez un sous-dossier (par exemple fonts) pour organiser vos polices.
Insérer le code dans le head de vos pages
- Allez dans Divi > Options du thème > Intégration > Activer le code d’en-tête.
- Ajoutez votre code dans la section « Ajouter le code à la <head> de votre blog ».
<style id="css-fonts">
@font-face {
font-display: swap;
font-family: '[LE_NOM_DE_VOTRE_FONT]';
font-style: normal;
font-weight: 300;
src: url('[URL_VERS_VOTRE_FONT].eot');
src: url('[URL_VERS_VOTRE_FONT].eot?#iefix') format('embedded-opentype'),
url('[URL_VERS_VOTRE_FONT].woff2') format('woff2'),
url('[URL_VERS_VOTRE_FONT].woff') format('woff'),
url('[URL_VERS_VOTRE_FONT].ttf') format('truetype'),
url('[URL_VERS_VOTRE_FONT].svg#[LE_NOM_DE_VOTRE_FONT]') format('svg');
}
@font-face {
font-display: swap;
font-family: '[LE_NOM_DE_VOTRE_FONT]';
font-style: normal;
font-weight: 400;
src: url('[URL_VERS_VOTRE_FONT].eot');
src: url('[URL_VERS_VOTRE_FONT].eot?#iefix') format('embedded-opentype'),
url('[URL_VERS_VOTRE_FONT].woff2') format('woff2'),
url('[URL_VERS_VOTRE_FONT].woff') format('woff'),
url('[URL_VERS_VOTRE_FONT].ttf') format('truetype'),
url('[URL_VERS_VOTRE_FONT].svg#[LE_NOM_DE_VOTRE_FONT]') format('svg');
}
@font-face {
font-display: swap;
font-family: '[LE_NOM_DE_VOTRE_FONT]';
font-style: normal;
font-weight: 800;
src: url('[URL_VERS_VOTRE_FONT].eot');
src: url('[URL_VERS_VOTRE_FONT].eot?#iefix') format('embedded-opentype'),
url('[URL_VERS_VOTRE_FONT].woff2') format('woff2'),
url('[URL_VERS_VOTRE_FONT].woff') format('woff'),
url('[URL_VERS_VOTRE_FONT].ttf') format('truetype'),
url('[URL_VERS_VOTRE_FONT].svg#[LE_NOM_DE_VOTRE_FONT]') format('svg');
}
</style>
Appliquer les polices dans votre CSS
Pour utiliser vos Google Fonts locales, appelez-les dans votre CSS de cette façon : Divi > Options du thème > Général > Personnaliser CSS (en bas de la page d’options).
body {
font-family: '[LE_NOM_DE_VOTRE_FONT]' !important;
}
h1, h2, h3, h4, h5, h6{
font-family: '[LE_NOM_DE_VOTRE_FONT]' !important;
}
Conclusion
Héberger soi-même ses polices d’écriture dans Divi (lien affilié) présente de nombreux avantages, tant sur le plan de la performance que du respect de la confidentialité de vos visiteurs. En évitant le chargement des polices depuis des serveurs externes, vous améliorez non seulement la rapidité de votre site, mais vous respectez également les exigences du RGPD, réduisant ainsi les risques de non-conformité.
Que vous choisissiez la méthode d’intégration via le Divi Builder ou l’approche manuelle, vous avez maintenant toutes les clés pour personnaliser efficacement la typographie de votre site. En hébergeant localement vos polices, vous avez un contrôle total sur leur chargement, leur compatibilité, et leur performance, contribuant ainsi à une expérience utilisateur plus fluide et à un design qui se démarque.
N’oubliez pas de vérifier régulièrement l’application correcte de vos polices avec des outils comme Google Fonts Checker pour garantir qu’aucune ressource externe n’est involontairement chargée. En suivant ces étapes, vous créez un site à la fois esthétique, performant et respectueux de la confidentialité des données de vos visiteurs.
