← Wszystkie wpisy

Poradniki

Podmień czcionki na dowolnej stronie za pomocą CSS

17 maja 2026 · autor JustZix Team

Typografia tworzy lub psuje doświadczenie czytania. Jeśli strona narzuca cienki krój o niskim kontraście, możesz go nadpisać. Pojedyncza reguła CSS JustZix podmienia każdą czcionkę na stronie na taką, która naprawdę ci się podoba.

Wymuś czcionkę systemową wszędzie

Najprostsza, najszybsza podmiana używa stosu czcionek systemu operacyjnego. Ładuje się natychmiast, bo nic nie jest pobierane, i wygląda natywnie na każdej platformie.

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

Selektor uniwersalny jest celowy. Strony stosują czcionki do dziesiątek elementów, a próba złapania każdego z osobna to przegrana gra. Nadpisz wszystko, a potem zrób wyjątki.

Zachowaj kod w monospace

Po powyższym ogólnym nadpisaniu bloki kodu tracą czcionkę monospace. Przywróć ją, aby fragmenty pozostały wyrównane.

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

Użyj własnej czcionki webowej

Chcesz czegoś bardziej charakterystycznego? Pobierz czcionkę przez @font-face z CDN, a następnie ją zastosuj. To ładuje Inter, czysty i bardzo czytelny krój bezszeryfowy.

@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;
}

Ponieważ JustZix wstrzykuje ten CSS do strony, reguła @font-face działa tak, jakby napisał ją autor strony. Wybierz dowolny zaufany adres URL WOFF2.

Popraw czytelność przy okazji

Podmiana kroju to dobry moment, by naprawić grubość i renderowanie. Wiele stron ustawia tekst zbyt cienki.

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

Opcja przyjazna dla dyslektyków

Jeśli standardowe czcionki są trudne do czytania, przełącz się na krój zaprojektowany w tym celu i poluzuj odstępy.

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

Na co uważać

• Zawsze ponownie zadeklaruj monospace dla kodu, bo inaczej fragmenty stracą wyrównanie.
• Używaj font-display: swap, aby tekst nigdy nie znikał, gdy ładuje się czcionka webowa.
• Przetestuj czcionki ikon — niektóre strony renderują ikony przez rodzinę czcionek, a ogólna reguła może je ukryć. Wyklucz ich selektory.
• Trzymaj jeden zapisany stos czcionek, aby móc używać go ponownie w każdej regule.

Następnie dostrój rozmiar i odstępy w naszym poradniku o wygodnym czytaniu. Zdobądź więcej fragmentów z gotowych przykładów lub pobierz JustZix, jeśli konfigurujesz po raz pierwszy.