Comment changer la taille de la police dans WordPress : Gutenberg, Plugins, CSS et Theme Customizer

Modifier la taille de police dans WordPress signifie ajuster l’échelle typographique des éléments textuels de votre site — titres, corps de texte, légendes et libellés de navigation — soit au niveau du bloc, du thème, ou globalement via CSS. La méthode choisie détermine la portée du changement : un seul paragraphe, un type de contenu sur toutes les pages, ou chaque élément textuel sur l’ensemble du site.

Ce guide couvre toutes les méthodes pratiques disponibles dans une installation WordPress moderne, notamment l’éditeur de blocs Gutenberg, les plugins de typographie, le Personnalisateur de thème natif et les remplacements CSS directs. Chaque approche a un cas d’utilisation distinct, et choisir la mauvaise méthode crée une dette technique qui s’accumule avec le temps.

Pourquoi les décisions relatives à la taille de police sont plus techniques qu’elles n’y paraissent

La typographie n’est pas une question esthétique. La taille de police affecte directement les scores des Core Web Vitals, notamment la métrique Cumulative Layout Shift (CLS) lorsque les polices se chargent de manière asynchrone, et le Largest Contentful Paint (LCP) lorsqu’un grand titre est l’élément principal du viewport. Des règles font-size mal délimitées — par exemple, appliquer font-size à l’élément body sans tenir compte de l’héritage basé sur em — se propagent de manière imprévisible aux éléments enfants, perturbant l’espacement, les ratios d’interligne et les mises en page des composants.

Si vous exécutez WordPress sur un environnement VPS Hosting avec accès root, vous avez également la possibilité de modifier directement les fichiers du thème et de gérer les couches de cache qui affectent la propagation des modifications CSS aux utilisateurs finaux. Ce niveau de contrôle n’est pas disponible sur une infrastructure mutualisée, ce qui rend le choix de la méthode encore plus important.

Comparaison : aperçu des quatre méthodes

Utilisez ce tableau comme matrice de décision avant de modifier tout paramètre. La bonne méthode dépend de la portée, de votre niveau de confort technique et de si vous travaillez sur un thème enfant.

Méthode 1 : Éditeur de blocs Gutenberg

L’éditeur de blocs Gutenberg, introduit dans WordPress 5.0, gère la taille de police au niveau du bloc individuel. C’est l’approche correcte lorsque vous devez ajuster la taille d’un paragraphe, d’un titre ou d’un groupe d’éléments spécifiques sans toucher aux styles globaux.

Étape par étape : ajuster la taille de police dans un bloc

1. Connectez-vous à votre tableau de bord WordPress et ouvrez l’article ou la page que vous souhaitez modifier.
2. Cliquez sur le bloc de texte que vous souhaitez modifier — généralement un bloc Paragraphe, Titre ou Liste.
3. Dans la barre latérale droite, repérez l’onglet Bloc (et non l’onglet Document). Si la barre latérale est masquée, cliquez sur l’icône d’engrenage dans la barre d’outils en haut à droite pour l’afficher.
4. Faites défiler jusqu’à la section Typographie dans le panneau des paramètres du bloc.
5. Vous verrez des options de taille prédéfinies : Petite, Moyenne, Grande et Très grande. Ces valeurs sont définies par le fichier theme.json de votre thème actif.
6. Pour définir une valeur précise, cliquez sur l’option Personnalisée et saisissez une taille en pixels (par ex. 18px) ou utilisez des unités relatives comme rem (par ex. 1.125rem).
7. Cliquez sur Mettre à jour ou Publier pour enregistrer.

Utiliser theme.json pour définir des préréglages personnalisés (WordPress 5.8+)

Si vous gérez un thème de blocs ou un thème classique avec un fichier theme.json, vous pouvez définir les tailles prédéfinies exactes qui apparaissent dans la barre latérale de l’éditeur. C’est l’approche la plus maintenable pour les environnements de développement.

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "14px" },
        { "name": "Regular", "slug": "regular", "size": "16px" },
        { "name": "Large", "slug": "large", "size": "22px" },
        { "name": "Extra Large", "slug": "x-large", "size": "32px" }
      ]
    }
  }
}

Placer ce fichier dans le répertoire racine de votre thème enfant garantit que les préréglages persistent lors des mises à jour du thème et sont accessibles à tous les éditeurs du site sans nécessiter de connaissances en CSS.

Cas particulier : conflit entre la taille de police au niveau du bloc et les styles globaux

Un problème courant survient lorsqu’un bloc a une taille de police explicite définie via l’éditeur, mais que la feuille de style globale du thème cible également le même élément avec une règle CSS de spécificité plus élevée. L’éditeur de blocs injecte des styles inline comme style="font-size:22px", ce qui remplace généralement la plupart des règles de la feuille de style. Cependant, si un thème utilise des déclarations !important dans son CSS, le style inline est perdant. Inspectez toujours l’élément rendu dans les DevTools du navigateur pour confirmer quelle règle l’emporte.

Méthode 2 : Plugins de typographie

Les plugins sont le bon choix lorsque vous avez besoin d’un contrôle typographique à l’échelle du site sans écrire manuellement du CSS. Ils sont particulièrement utiles pour les non-développeurs gérant des sites sur un hébergement mutualisé ou un VPS avec cPanel où l’accès direct aux fichiers est moins courant.

Plugin recommandé : Easy Google Fonts

Easy Google Fonts s’intègre directement au Personnalisateur WordPress et vous offre un contrôle de la taille de police par élément sur l’ensemble du site.

Installation et configuration :

1. Dans votre tableau de bord WordPress, accédez à Extensions > Ajouter.
2. Recherchez Easy Google Fonts et cliquez sur Installer maintenant, puis sur Activer.
3. Accédez à Apparence > Personnaliser.
4. Sélectionnez Typographie dans le menu du Personnalisateur.
5. Choisissez l’élément que vous souhaitez modifier : Corps, Titres (H1–H6), Paragraphes, ou tout sélecteur personnalisé que vous définissez.
6. Utilisez le curseur ou le champ de saisie Taille de police pour définir la valeur.
7. Cliquez sur Publier pour appliquer les modifications en direct.

Plugin alternatif : Fonts Plugin | Google Fonts Typography

Ce plugin offre une interface plus granulaire et prend en charge les polices variables, de plus en plus pertinentes pour les sites optimisés en termes de performances. Les polices variables réduisent les requêtes HTTP en servant un seul fichier de police couvrant plusieurs graisses et styles.

Avertissement critique : conflits de plugins avec les thèmes de blocs

Si vous utilisez un thème de blocs Full Site Editing (FSE) (tel que Twenty Twenty-Three ou Twenty Twenty-Four), les plugins de typographie qui injectent du CSS dans <head> via wp_enqueue_style peuvent entrer en conflit avec les styles globaux du thème définis dans theme.json. Le résultat est des conflits de spécificité imprévisibles. Dans les environnements FSE, utilisez l’Éditeur de site (Apparence > Éditeur) pour les modifications typographiques globales plutôt qu’un plugin.

Méthode 3 : Personnalisateur de thème

Le Personnalisateur de thème WordPress (Appearance > Customize) est l’interface intégrée pour effectuer des ajustements au niveau du thème. Tous les thèmes n’exposent pas les contrôles typographiques ici — cela dépend entièrement de ce que le développeur du thème a enregistré à l’aide de l’API Customizer de WordPress.

Étape par étape : ajuster la taille de police via le Personnalisateur

1. Accédez à Apparence > Personnaliser dans votre tableau de bord WordPress.
2. Recherchez une section Typographie, Polices ou Texte dans le panneau de gauche. Si aucune section de ce type n’existe, votre thème ne prend pas en charge cette fonctionnalité nativement.
3. Sélectionnez le type d’élément : texte du corps, H1, H2, navigation, pied de page, etc.
4. Ajustez la taille de police à l’aide du curseur ou de la saisie numérique fournis.
5. L’aperçu en direct sur la droite se met à jour en temps réel.
6. Cliquez sur Publier pour valider les modifications.

Limitation importante : les paramètres du Personnalisateur de thème ne sont pas portables

Les paramètres du Personnalisateur sont stockés dans la base de données WordPress en tant que modifications de thème (theme_mods). Si vous changez de thème, toutes les modifications de taille de police basées sur le Personnalisateur sont perdues. Elles ne sont pas non plus transférables via les outils d’exportation standard, sauf si vous utilisez un plugin spécifiquement conçu pour la migration des données du Personnalisateur. C’est une considération critique lors de la planification d’une migration de thème sur des sites en production.

Méthode 4 : CSS personnalisé

Le CSS personnalisé est la méthode la plus précise et la plus flexible. Elle est appropriée lorsque les trois autres méthodes ne peuvent pas cibler l’élément spécifique dont vous avez besoin, ou lorsque vous devez appliquer un dimensionnement de police responsive à l’aide de media queries.

Ajouter du CSS via le Personnalisateur (sans modification de fichiers)

1. Accédez à Apparence > Personnaliser > CSS additionnel.
2. Saisissez vos règles CSS directement dans l’éditeur.
3. Cliquez sur Publier.

Cette approche stocke le CSS dans la base de données et est sûre pour les non-développeurs. Cependant, elle a une limite de taille et ne prend pas en charge les préprocesseurs comme Sass.

Cibler des éléments spécifiques avec CSS

/* Set base body font size */
body {
  font-size: 17px;
  line-height: 1.7;
}

/* Override heading sizes */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Target a specific Gutenberg block class */
.wp-block-paragraph.is-style-lead {
  font-size: 1.25rem;
}

Dimensionnement de police responsive avec clamp()

Le CSS moderne prend en charge la typographie fluide à l’aide de la fonction clamp(), qui élimine le besoin de plusieurs points de rupture de media queries :

body {
  font-size: clamp(15px, 1.5vw, 18px);
}

h1 {
  font-size: clamp(28px, 5vw, 56px);
}

Cette approche fait évoluer la taille de police de manière fluide entre une valeur minimale et maximale en fonction de la largeur du viewport. C’est la meilleure pratique actuelle pour la typographie responsive et elle est prise en charge par tous les navigateurs modernes.

Modifier directement les fichiers du thème (thème enfant requis)

Si vous devez ajouter du CSS à la feuille de style du thème de manière permanente et éviter la surcharge de base de données du champ CSS additionnel, ajoutez des règles au fichier style.css de votre thème enfant. Ne modifiez jamais directement les fichiers du thème parent — les mises à jour écraseront vos modifications.

Sur un serveur avec accès SSH, vous pouvez modifier le fichier directement :

nano /var/www/html/wp-content/themes/your-child-theme/style.css

Après l’enregistrement, videz votre cache côté serveur et tout cache CDN pour vous assurer que les styles mis à jour sont servis aux visiteurs. Dans un environnement VPS Hosting, cela signifie généralement exécuter une commande de vidage de cache pour votre plugin de cache ou votre proxy inverse (Nginx, Varnish, etc.).

Pièges de spécificité à éviter

• Évitez !important comme solution par défaut. Cela crée une course à la spécificité qui rend la maintenance future extrêmement difficile.
• Ne définissez pas les tailles de police en pixels sur l’élément html si votre thème utilise un dimensionnement basé sur em. Modifier html { font-size: 20px; } mettra à l’échelle chaque valeur basée sur em sur l’ensemble du site, perturbant souvent l’espacement et la mise en page.
• Utilisez les unités rem pour la scalabilité. Les valeurs rem sont relatives à l’élément html racine, les rendant prévisibles et accessibles. Les utilisateurs qui augmentent la taille de police par défaut de leur navigateur bénéficieront des mises en page basées sur rem, ce qui est une exigence d’accessibilité WCAG.

Accessibilité et taille de police : ce que Google évalue

L’audit Lighthouse de Google signale le texte trop petit à lire comme un problème d’utilisabilité. La taille de police minimale recommandée pour le corps de texte est 16px pour le bureau et 14px pour le mobile, bien que 16px sur tous les viewports soit la référence la plus sûre. Le critère de succès WCAG 2.1 1.4.4 exige que le texte puisse être redimensionné jusqu’à 200 % sans perte de contenu ni de fonctionnalité — une exigence que les unités rem et em satisfont par défaut, tandis que les mises en page utilisant uniquement px échouent souvent.

Si vous hébergez un site qui dessert un public mondial ou nécessite une conformité en matière d’accessibilité, ces considérations doivent guider vos décisions d’implémentation de taille de police, et non la seule préférence visuelle.

Considérations relatives au cache et au déploiement sur VPS

Lorsque vous modifiez du CSS sur un site WordPress hébergé sur un environnement VPS Hosting ou Dedicated Servers, les modifications peuvent ne pas être immédiatement visibles en raison de plusieurs couches de cache :

• Cache d’objets WordPress (Redis, Memcached)
• Plugins de mise en cache de pages (WP Rocket, W3 Total Cache, LiteSpeed Cache)
• Cache FastCGI Nginx
• Cache de périphérie CDN (Cloudflare, BunnyCDN)

Après toute modification de taille de police, videz tous les caches actifs en séquence — le cache du plugin en premier, puis le cache au niveau du serveur, puis le CDN. Ne pas le faire est la raison la plus courante pour laquelle les développeurs signalent que les modifications CSS « ne fonctionnent pas ».

Pour vider manuellement le cache FastCGI Nginx sur un VPS Linux :

sudo rm -rf /var/cache/nginx/*
sudo systemctl reload nginx

Pour LiteSpeed Cache via WP-CLI :

wp litespeed-purge all

Liste de contrôle pratique pour la prise de décision

Utilisez cette liste de contrôle pour sélectionner la méthode correcte selon votre situation :

• Modifier un paragraphe ou un titre sur une seule page — Utilisez le panneau Typographie de l’éditeur de blocs Gutenberg.
• Modifier la taille de police de tout le texte du corps ou de tous les titres sur l’ensemble du site — Utilisez un plugin de typographie ou le Personnalisateur de thème si votre thème le prend en charge.
• Utiliser un thème de blocs Full Site Editing — Utilisez l’Éditeur de site (Apparence > Éditeur > Styles) et les préréglages theme.json.
• Besoin d’une typographie responsive et fluide — Écrivez du CSS personnalisé en utilisant clamp() dans une feuille de style de thème enfant ou dans le CSS additionnel.
• Les modifications doivent survivre aux mises à jour du thème — Utilisez un thème enfant, un plugin ou theme.json dans un thème de blocs personnalisé.
• La conformité en matière d’accessibilité est requise — Utilisez des unités rem ou em ; évitez les déclarations uniquement en px pour le texte du corps.
• Les modifications n’apparaissent pas après modification — Videz toutes les couches de cache : plugin, serveur et CDN.
• Conflit entre l’éditeur de blocs et les styles du thème — Inspectez l’élément dans les DevTools du navigateur, identifiez la règle CSS gagnante et ajustez la spécificité en conséquence.

FAQ

Quelle est la meilleure unité pour les tailles de police WordPress : px, em ou rem ?

rem est l’unité recommandée pour les tailles de police dans WordPress. Elle est relative à l’élément html racine, la rendant prévisible dans les composants imbriqués et intrinsèquement accessible — les préférences de taille de police au niveau du navigateur définies par l’utilisateur sont automatiquement respectées. Utilisez px uniquement pour les éléments décoratifs fixes où le redimensionnement est indésirable.

Pourquoi ma modification de taille de police dans l’éditeur Gutenberg n’apparaît-elle pas sur le front-end ?

Les causes les plus courantes sont une couche de cache servant une version obsolète de la page, une règle de feuille de style du thème avec une spécificité CSS plus élevée remplaçant le style inline du bloc, ou un plugin de typographie qui réinitialise les tailles de police globalement. Ouvrez la page dans une fenêtre de navigation privée et inspectez l’élément dans les DevTools pour isoler la cause.

Puis-je modifier les tailles de police dans WordPress sans plugin ni code ?

Oui. Le panneau Typographie de l’éditeur de blocs Gutenberg permet des modifications de taille de police par bloc sans aucun code requis. Le Personnalisateur de thème fournit également des contrôles de taille de police si votre thème actif les enregistre. Aucune de ces approches ne nécessite l’installation d’un plugin ni de connaissances en CSS.

La modification des tailles de police dans le Personnalisateur de thème affectera-t-elle mon site après une mise à jour du thème ?

Les paramètres eux-mêmes sont stockés dans la base de données WordPress et ne seront pas supprimés par une mise à jour du thème. Cependant, si la mise à jour du thème modifie la structure CSS sous-jacente ou supprime l’option du Personnalisateur qui contrôlait la taille de police, le rendu visuel peut changer. L’utilisation d’un thème enfant et de CSS personnalisé est plus résistante aux modifications du thème parent.

Comment définir des tailles de police différentes pour mobile et bureau dans WordPress ?

Utilisez des media queries CSS dans le panneau CSS additionnel ou une feuille de style de thème enfant, ou utilisez la fonction clamp() pour un dimensionnement fluide. L’éditeur de blocs Gutenberg prend également en charge les paramètres typographiques par point de rupture dans certains thèmes via la configuration theme.json layout, bien que cette fonctionnalité dépende du niveau d’implémentation du thème.