On configure un thème WordPress, on choisit une Google Font sans-serif pour les titres, une serif pour le corps de texte, et le résultat à l’écran ne ressemble pas du tout à la maquette. Le problème vient rarement du goût : il vient de la façon dont les polices sont chargées, combinées et rendues par le navigateur. Associer serif et sans-serif dans WordPress demande quelques réglages techniques que le panneau « Apparence » ne montre pas.
Font-display swap et hébergement local : ce qui change vraiment la vitesse de page
Avant de choisir entre Playfair Display et Inter, on a intérêt à régler la tuyauterie. Sur un site WordPress chargé via Google Fonts, chaque variante de police (regular, bold, italic) génère une requête HTTP vers les serveurs de Google. Multiplier les graisses, c’est multiplier le temps de chargement.
Le premier levier concret : charger uniquement les graisses réellement utilisées. Si le thème n’affiche du gras que dans les titres, inutile d’importer les variantes 300, 400, 500, 600, 700. Deux ou trois suffisent dans la plupart des cas.
Le second levier, souvent négligé dans les thèmes par défaut, est la directive CSS font-display: swap. Sans elle, le navigateur peut afficher un texte invisible pendant le chargement de la police distante. Avec swap, le texte apparaît immédiatement dans une police système, puis bascule vers la webfont dès qu’elle est prête. Le rendu saute légèrement, mais la page reste lisible tout de suite.
Pour aller plus loin, on peut héberger les fichiers de polices directement sur le serveur WordPress au format WOFF2. On supprime la dépendance au CDN de Google, on réduit les requêtes DNS, et on garde le contrôle total sur la mise en cache. Des extensions comme OMGF (Optimize My Google Fonts) automatisent cette conversion. Le gain en temps de chargement dépend de la configuration serveur, mais la réduction du nombre de requêtes externes est systématique.
Associer une police serif et une sans-serif dans un thème WordPress sans casser la hiérarchie
La règle opérationnelle la plus fiable pour combiner serif et sans-serif : attribuer chaque famille à un niveau hiérarchique précis et ne pas mélanger à l’intérieur d’un même niveau.
Titres en serif, corps en sans-serif (ou l’inverse)
Le schéma classique fonctionne parce qu’il crée un contraste visuel immédiat entre les niveaux de lecture. Un titre en Merriweather (serif) suivi d’un paragraphe en Open Sans (sans-serif) produit une distinction nette sans effort de mise en page. L’inverse, titres en Montserrat et corps en Georgia, fonctionne aussi, avec une tonalité plus éditoriale.
Ce qui pose problème, c’est d’utiliser deux sans-serif trop proches (Roboto + Open Sans, par exemple) ou deux serifs du même registre. Le contraste disparaît, le lecteur ne sait plus ce qui est titre et ce qui est texte courant. Le contraste entre les deux familles doit être visible en un coup d’oeil.
Où configurer ça dans WordPress
Sur un thème bloc (Full Site Editing), la configuration passe par le fichier theme.json, section typography. On y déclare les familles, les tailles et les graisses. Sur un thème classique, c’est le Customizer ou un champ dans les options du thème. Dans les deux cas, il faut vérifier que le thème ne force pas une troisième police en dur dans sa feuille de style, ce qui arrive souvent avec les thèmes premium.
- Vérifier dans l’inspecteur du navigateur (onglet « Computed ») quelle police est réellement appliquée sur chaque élément HTML (h1, h2, p, blockquote).
- S’assurer que la font-stack CSS inclut une police système de secours cohérente (par exemple,
Georgia, "Times New Roman", serifpour une serif,system-ui, Arial, sans-serifpour une sans-serif). - Limiter le total à deux familles de polices sur l’ensemble du site, trois au grand maximum pour un cas justifié (une display pour le logo, par exemple).
Tester serif et sans-serif sur mobile et avec des caractères accentués
Un piège fréquent sur WordPress : la paire de polices rend bien sur un écran 24 pouces, mais le corps de texte serif devient difficile à lire sur un smartphone de 6 pouces. Les empattements fins d’une serif légère comme Crimson Text perdent en netteté sur les petits écrans à basse densité de pixels.
Tester chaque police sur un contenu réel, pas sur du Lorem Ipsum, en conditions mobile, change souvent la décision finale. Un paragraphe de quatre lignes avec des accents (é, è, ê, ë, ç, ù) révèle vite si la police gère correctement le français. Certaines Google Fonts populaires affichent des accents décalés ou des caractères manquants dans les variantes moins courantes (small caps, italique gras).
Ce test prend cinq minutes : ouvrir la page sur un téléphone, lire un paragraphe entier, vérifier les titres, les boutons et le menu. Si on hésite entre deux polices serif, c’est ce test sur mobile qui tranche, pas la preview dans Google Fonts.
Typographie WordPress et SEO : le lien technique souvent mal compris
Le choix entre serif et sans-serif n’a pas d’impact SEO direct. Google n’accorde pas de bonus à une page parce qu’elle utilise Lora plutôt que Roboto. En revanche, la façon dont les polices sont chargées affecte deux métriques que Google mesure : le Largest Contentful Paint (LCP) et le Cumulative Layout Shift (CLS).
Un LCP dégradé par des polices lourdes ou mal chargées repousse l’affichage du contenu principal. Un CLS élevé, causé par le remplacement visible de la police système par la webfont (le fameux « flash of unstyled text »), dégrade l’expérience utilisateur mesurée par les Core Web Vitals.
Héberger les polices en local au format WOFF2 et activer font-display swap réduit ces deux problèmes. Sur un site WordPress avec plusieurs pages de contenu, l’effet cumulé sur la performance globale n’est pas négligeable.
Checklist typographie pour un site WordPress propre
- Deux familles maximum : une pour les titres, une pour le texte courant. Pas de troisième sauf cas précis (logotype).
- Charger uniquement les graisses utilisées (regular et bold couvrent la majorité des besoins).
- Déclarer font-display: swap dans le CSS ou via le fichier theme.json.
- Héberger les fichiers WOFF2 en local pour supprimer la dépendance à un CDN externe.
- Tester la paire de polices sur mobile avec du texte accentué réel avant de publier.
- Contrôler dans l’inspecteur navigateur que la police affichée correspond bien à celle déclarée, pas à la police de secours système.
Le choix entre serif et sans-serif dans WordPress n’est pas une question de mode. C’est une décision qui touche à la lisibilité, à la cohérence visuelle et à la performance technique du site. Deux polices bien configurées valent mieux que cinq mal chargées, quel que soit le thème utilisé.
