Pourquoi vos polices personnalisées ne s’affichent pas correctement et sur tout le site avec Divi 5 & WooCommerce ?

Vous avez voulu bien faire : pour respecter la RGPD et booster vos scores Google PageSpeed, vous avez désactivé les Google Fonts dans les options de Divi. Vous avez téléchargé votre police préférée sur Google Fonts, vous l'avez injectée dans votre site... et là, c'est le drame. Rien ne s'affiche, ou pire, des chiffres apparaissent à la place de vos icônes !

Voici la méthode infaillible pour reprendre le contrôle total sur votre typographie.

1. Le piège de Google Fonts en téléchargement direct

C'est contre-intuitif, mais ne téléchargez pas vos fichiers de polices directement sur le site Google Fonts pour un usage local.

Les fichiers fournis par Google sont souvent des "Variable Fonts" ou utilisent des encodages spécifiques qui ne sont pas toujours bien interprétés par le système de téléchargement de polices de Divi (surtout avec la nouvelle structure de Divi 5).

La solution : Utilisez des plateformes comme Dafont ou FontSquirrel. Les fichiers .ttf ou .otf y sont plus "propres" et complets pour une installation serveur.

2. Le protocole d'installation propre

1. Récupérez les fichiers : Téléchargez votre police (ex: Comfortaa) sur Dafont. Prenez bien la version "Regular" et la version "Bold".
2. Importez dans Divi : Ouvrez l'édition Divi d'une page, sélectionnez un bloc de texte et allez dans > Style > Police > Télécharger. Nommez-les clairement : Comfortaa-Regular et Comfortaa-Bold.
3. Désactivez Google Fonts : Dans Divi > Options du thème>Performances, assurez-vous que "Utiliser les polices Google" est sur Désactivé.

3. Le problème WooCommerce : Pourquoi la police ne change pas partout ?

WooCommerce est têtu. Il possède ses propres feuilles de style qui ignorent souvent les réglages généraux de Divi. Pour forcer votre nouvelle police (notamment en Bold sur les titres), vous devez ajouter un CSS "musclé".

Code à insérer dans vos options de thème :

/* --- 1. PROTECTION DES ICONES (Priorité absolue) --- */
/* On empêche Comfortaa de s'appliquer aux icônes Divi, sinon elles disparaissent */
.et-pb-icon,
[data-icon]:before,
[class^="et-"]:before,
[class*=" et-"]:before,
.et-fb-icon {
font-family: "ETmodules" !important;
text-transform: none !important;
font-weight: normal !important;
font-style: normal !important;
font-variant: normal !important;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

/* --- 2. TYPOGRAPHIE GLOBALE (Corps de texte) --- */
/* On cible les balises de texte sans écraser les icônes */
body, p, li, a, input, select, textarea, .woocommerce-message, .woocommerce-info {
font-family: 'Comfortaa-Regular', 'Comfortaa', sans-serif !important;
}

/* --- 3. TITRES ET MISE EN AVANT (Bold) --- */
/* On applique la version Bold aux titres du site et de WooCommerce */
h1, h2, h3, h4, h5, h6,
.product_title,
.woocommerce-loop-product__title,
.woocommerce-column__title,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-order-details__title,
.woocommerce-cart-calculation-title {
font-family: 'Comfortaa-Bold', 'Comfortaa', sans-serif !important;
font-weight: 700 !important;
}

/* --- 4. RÉGLAGES SPÉCIFIQUES WOOCOMMERCE --- */
/* Prix et Boutons en Regular pour la lisibilité */
.price, .amount, .woocommerce-Price-amount,
.button, .checkout-button, .woocommerce-tabs ul.tabs li a {
font-family: 'Comfortaa-Regular', sans-serif !important;
}

/* --- 5. INTERFACE D'ÉDITION DIVI 5 --- */
/* Pour ne pas perdre les outils quand on modifie une page */
#et-fb-app, .et-db-app, .et-fb-editable-element, [contenteditable="true"] {
font-family: inherit !important;
}

/* --- 6. FIX FLÈCHE RETOUR EN HAUT --- */
.et_pb_scroll_top:before {
content: "2" !important;
font-family: "ETmodules" !important;
}

• La spécificité WooCommerce : WooCommerce charge ses styles après Divi. Sans ces sélecteurs précis (.price, .button), les éléments de vente ne prendront jamais votre police personnalisée.

• Le double appel de police : On sépare bien l'appel de Comfortaa-Regular pour le texte et Comfortaa-Bold pour les titres pour être sûr que le navigateur ne tente pas de "bricoler" un faux gras.

4. Attention au bug d'affichage du Retour en Haut de divi 5 et du "Chiffre 2" qui apparaît !

Si vous voyez un chiffre 2 à la place de votre flèche de "Retour en haut", c'est que votre CSS a été trop agressif et a forcé votre police d'écriture sur la police d'icônes de Divi.

Utilisez toujours le sélecteur :not(.et-pb-icon) dans votre code pour protéger les icônes natives du thème.

En résumé

"En résumé, ne cherchez pas à être trop global dans votre CSS. Sur Divi 5, le sélecteur universel * est votre pire ennemi. Ciblez précisément vos textes, vos titres et vos éléments WooCommerce, tout en créant un 'sanctuaire' pour la police d'icônes ETModules. C'est le seul moyen d'avoir un site beau, rapide, conforme au RGPD et surtout... avec des icônes qui fonctionnent !"

• Fuyez le bouton download de Google Fonts pour l'auto-hébergement.

• Privilégiez Dafont pour des fichiers .ttf standards.

• Forcez WooCommerce via le CSS, car il ne suit pas toujours le Customizer.

• Videz vos caches (surtout le cache CSS statique de Divi) après chaque modification !

En espérant que ce guide évitera quelques cheveux blancs à mes confrères dev !