← All posts

Tutorials

Swap the fonts on any website with CSS

17 May 2026 · by JustZix Team

Typography makes or breaks a reading experience. If a site forces a thin, low-contrast typeface, you can override it. A single JustZix CSS rule swaps every font on the page for one you actually enjoy.

Force a system font everywhere

The simplest, fastest swap uses the operating system font stack. It loads instantly because nothing is downloaded, and it looks native on every platform.

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

The universal selector is deliberate. Sites apply fonts to dozens of elements, and trying to catch each one individually is a losing game. Override everything, then make exceptions.

Keep code in monospace

After the blanket override above, code blocks lose their monospace font. Restore it so snippets stay aligned.

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

Use a custom web font

Want something more distinctive? Pull a font with @font-face from a CDN, then apply it. This loads Inter, a clean and highly legible sans-serif.

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

Because JustZix injects this CSS into the page, the @font-face rule works just like the site author wrote it. Pick any WOFF2 URL you trust.

Improve readability while you are here

Swapping the typeface is a good moment to fix weight and rendering. Many sites set body text far too thin.

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

A dyslexia-friendly option

If standard fonts are hard to read, switch to a typeface designed for it and loosen the spacing.

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

Things to watch

• Always re-declare monospace for code, or snippets become misaligned.
• Use font-display: swap so text never disappears while a web font loads.
• Test icon fonts — some sites render icons via a font family, and the blanket rule can hide them. Exclude their selectors.
• Keep one font stack saved so you can reuse it across every rule.

Next, tune the size and spacing in our guide to comfortable reading. Grab more snippets from the ready-made examples, or download JustZix if you are setting up for the first time.