← Alle Beiträge

Anleitungen

Die Schriften auf jeder Website mit CSS austauschen

17 Mai 2026 · von JustZix Team

Typografie macht oder bricht ein Leseerlebnis. Wenn eine Seite eine dünne, kontrastarme Schriftart erzwingt, können Sie sie überschreiben. Eine einzige JustZix-CSS-Regel tauscht jede Schrift auf der Seite gegen eine aus, die Ihnen tatsächlich gefällt.

Überall eine Systemschrift erzwingen

Der einfachste, schnellste Austausch verwendet den Schriftstapel des Betriebssystems. Er lädt sofort, weil nichts heruntergeladen wird, und sieht auf jeder Plattform nativ aus.

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

Der Universalselektor ist gewollt. Seiten wenden Schriften auf Dutzende von Elementen an, und zu versuchen, jedes einzeln zu erfassen, ist ein aussichtsloses Spiel. Überschreiben Sie alles, machen Sie dann Ausnahmen.

Code in Monospace halten

Nach der pauschalen Überschreibung oben verlieren Code-Blöcke ihre Monospace-Schrift. Stellen Sie sie wieder her, damit Snippets ausgerichtet bleiben.

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

Eine benutzerdefinierte Webschrift verwenden

Wollen Sie etwas Markanteres? Holen Sie eine Schrift mit @font-face von einem CDN und wenden Sie sie dann an. Dies lädt Inter, eine saubere und hochgradig lesbare serifenlose Schrift.

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

Da JustZix dieses CSS in die Seite einfügt, funktioniert die @font-face-Regel genau so, als hätte der Seitenautor sie geschrieben. Wählen Sie eine beliebige WOFF2-URL, der Sie vertrauen.

Die Lesbarkeit verbessern, wenn Sie schon dabei sind

Die Schriftart auszutauschen ist ein guter Moment, um Stärke und Darstellung zu beheben. Viele Seiten setzen den Fließtext viel zu dünn.

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

Eine legasthenie-freundliche Option

Wenn Standardschriften schwer zu lesen sind, wechseln Sie zu einer dafür entworfenen Schriftart und lockern Sie den Abstand.

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

Worauf man achten sollte

• Deklarieren Sie Monospace für Code immer neu, sonst werden Snippets falsch ausgerichtet.
• Verwenden Sie font-display: swap, damit Text nie verschwindet, während eine Webschrift lädt.
• Testen Sie Symbolschriften — manche Seiten rendern Symbole über eine Schriftfamilie, und die pauschale Regel kann sie ausblenden. Schließen Sie ihre Selektoren aus.
• Behalten Sie einen Schriftstapel gespeichert, damit Sie ihn über jede Regel hinweg wiederverwenden können.

Als Nächstes stimmen Sie Größe und Abstand in unserer Anleitung zum angenehmen Lesen ab. Holen Sie sich mehr Snippets aus den fertigen Beispielen oder laden Sie JustZix herunter, wenn Sie sich zum ersten Mal einrichten.