← Tous les articles

Tutoriels

Changez les polices de n'importe quel site web avec le CSS

17 mai 2026 · par JustZix Team

La typographie fait ou défait une expérience de lecture. Si un site impose une police fine et peu contrastée, vous pouvez la surcharger. Une seule règle CSS JustZix remplace chaque police de la page par une que vous appréciez réellement.

Forcer une police système partout

Le changement le plus simple et le plus rapide utilise la pile de polices du système d'exploitation. Elle se charge instantanément car rien n'est téléchargé, et elle a l'air native sur chaque plateforme.

*, *::before, *::after {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

Le sélecteur universel est délibéré. Les sites appliquent des polices à des dizaines d'éléments, et essayer de les attraper un par un est une cause perdue. Surchargez tout, puis faites des exceptions.

Gardez le code en monospace

Après la surcharge globale ci-dessus, les blocs de code perdent leur police monospace. Restaurez-la pour que les snippets restent alignés.

code, pre, kbd, samp, tt,
.hljs, [class*="language-"] {
  font-family: "JetBrains Mono", "Fira Code",
    Consolas, "SF Mono", Menlo, monospace !important;
}

Utilisez une police web personnalisée

Vous voulez quelque chose de plus distinctif ? Tirez une police avec @font-face depuis un CDN, puis appliquez-la. Ceci charge Inter, une police sans-serif propre et hautement lisible.

@font-face {
  font-family: "Inter Web";
  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
body, p, div, span, li, a, h1, h2, h3, h4 {
  font-family: "Inter Web", sans-serif !important;
}

Comme JustZix injecte ce CSS dans la page, la règle @font-face fonctionne exactement comme si l'auteur du site l'avait écrite. Choisissez n'importe quelle URL WOFF2 en laquelle vous avez confiance.

Améliorez la lisibilité tant que vous y êtes

Changer la police est un bon moment pour corriger la graisse et le rendu. Beaucoup de sites règlent le texte du corps bien trop fin.

body {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

Une option adaptée à la dyslexie

Si les polices standards sont difficiles à lire, passez à une police conçue pour cela et desserrez l'espacement.

* {
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
}

Points à surveiller

• Redéclarez toujours le monospace pour le code, sinon les snippets se désalignent.
• Utilisez font-display: swap pour que le texte ne disparaisse jamais pendant le chargement d'une police web.
• Testez les polices d'icônes — certains sites rendent les icônes via une famille de polices, et la règle globale peut les masquer. Excluez leurs sélecteurs.
• Gardez une pile de polices enregistrée pour pouvoir la réutiliser dans chaque règle.

Ensuite, ajustez la taille et l'espacement dans notre guide pour une lecture confortable. Récupérez plus de snippets dans les exemples prêts à l'emploi, ou téléchargez JustZix si vous vous installez pour la première fois.