Thèmes & Design

Polices par niveau de titre (H1–H6)

polices par niveau de titre h1 h6

Jusqu'à la version précédente, QuietCMS n'exposait qu'un seul réglage de police pour l'ensemble des titres (H1–H6) et un autre pour le corps du texte. La configuration du thème permet désormais de définir une police Google Fonts différente pour chacun des six niveaux de titre, indépendamment les uns des autres.

Pourquoi différencier les polices par niveau

En typographie web, il est courant de distinguer les hiérarchies visuelles par la famille de police, pas seulement par la taille. Un H1 de page d'accueil peut adopter une police serif expressive comme Playfair Display ou Cormorant Garamond ; les H2 et H3, utilisés pour structurer les sections de contenu, peuvent préférer une police sans-serif neutre comme Inter ou DM Sans pour la lisibilité ; les H4–H6, souvent des libellés d'éléments d'interface, peuvent hériter simplement de la police du corps.

Cette granularité est particulièrement utile pour les sites juridiques, éditoriaux ou d'agences, où la hiérarchie typographique contribue directement à la perception de qualité et à l'identité visuelle.

Interface de configuration

L'onglet Typographie de /admin/theme-settings.php présente trois sections distinctes :

  1. Corps de texte — police, graisses et variante italique pour le corps de texte (font_body)
  2. Titres par défaut (H1–H6) — police de référence appliquée à tous les niveaux de titre (font_heading), avec sélection des graisses à télécharger et option italique
  3. Overrides par niveau — grille de six lignes (H1 à H6), chacune avec un sélecteur de police indépendant et une prévisualisation en temps réel de la police sélectionnée

Laisser la valeur — Hérite de la police des titres — pour un niveau revient à utiliser font_heading pour ce niveau : aucune police supplémentaire n'est téléchargée.

Auto-hébergement des polices Google Fonts

À la sauvegarde, chaque police sélectionnée est téléchargée depuis l'API Google Fonts v2 et stockée localement dans /fonts/{slug}/ sous forme de fichiers .woff2. Un fichier fonts.css regroupant tous les blocs @font-face est régénéré automatiquement par FontManager.

Ce mécanisme élimine la dépendance à des serveurs tiers en production et améliore les performances : les polices sont servies depuis le même domaine que le site, sans aucune requête vers fonts.googleapis.com ni fonts.gstatic.com. Il supprime également la problématique RGPD liée au transfert d'adresses IP vers des serveurs Google.

Génération des variables CSS et règles directes

La méthode ThemeManager::getFontVarsHtml() génère un bloc <style> injecté dans le <head> après le style.css du thème actif. Ce placement garantit que les valeurs surpassent les règles du thème par priorité de cascade :

:root {
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;
  --font-h1:      'Cormorant Garamond', serif;
  --font-h3:      'Inter', sans-serif;
}
h1 { font-family: var(--font-h1, var(--font-heading, serif)); }
h3 { font-family: var(--font-h3, var(--font-heading, serif)); }

Deux mécanismes complémentaires sont utilisés :

  • Variables CSS (--font-h1…--font-h6) dans :root — disponibles pour les thèmes qui souhaitent les consommer directement dans leur propre CSS
  • Règles directes (h1 { font-family: ... }) — s'appliquent après les règles du thème grâce à l'ordre de cascade (même spécificité, source order postérieur), sans nécessiter de modification des fichiers de thème

Chaîne de fallback

La valeur de repli est construite dynamiquement selon la configuration :

  • Si font_heading est défini : var(--font-h1, var(--font-heading, serif))
  • Si seul l'override par niveau est défini, sans police de titres globale : var(--font-h1, serif)

Cette chaîne garantit qu'un niveau non overridé hérite toujours de la police de titres globale, qui elle-même dispose d'un fallback générique. Retirer une override revient à vider le champ dans l'interface ; aucune règle directe n'est alors émise pour ce niveau.

Prévisualisation en temps réel

Dans l'interface, chaque ligne de la grille H1–H6 affiche une prévisualisation immédiate de la police sélectionnée (Aa Bb Cc 123). La police est chargée depuis Google Fonts uniquement pour la prévisualisation dans le navigateur via une balise <link> injectée dynamiquement dans le <head>. L'auto-hébergement côté serveur n'intervient qu'à la sauvegarde du formulaire, pas à la prévisualisation.

Compatibilité avec les thèmes existants

Les thèmes qui utilisent var(--font-heading) dans leur CSS continuent de fonctionner sans modification : la variable CSS --font-heading reste produite exactement comme avant. Les overrides par niveau s'y superposent de manière additive, sans effet de bord sur les thèmes qui ne les consomment pas.

Articles similaires