reddit-tweaks-ffe/docs/superpowers/specs/2026-08-27-reddit-fonts-design.md

Reddit Fonts Override

Replace old Reddit's default fonts with Reddit's modern typeface family (Reddit Sans, Reddit Sans Condensed, Reddit Mono) from the reddit/redditsans repository.

Scope

• Full page override — all text on old.reddit.com and www.reddit.com.
• Toggleable from the extension popup (one switch for all three families).
• Font files bundled in the extension (no external network requests).

Font Assets

Three variable-weight woff2 files stored in content/fonts/:

File	Family	Approx Size
RedditSans[wght].woff2	Reddit Sans	96KB
RedditSansCondensed[wght].woff2	Reddit Sans Condensed	94KB
RedditMono[wght].woff2	Reddit Mono	81KB

Variable fonts only — each covers all weights (Light through ExtraBold) via the wght axis. No italic variants initially; can be added later if needed.

Licensed under SIL Open Font License 1.1.

CSS Architecture

New file: content/styles/fonts.css, registered in manifest.json in the css array.

@font-face Declarations

Three @font-face blocks, one per family. Extension-relative paths (e.g., url("../fonts/RedditSans[wght].woff2")). Each declares font-display: swap and the full font-weight range (300–800).

Override Rules

All overrides gated on html.rt-fonts-enabled:

• html.rt-fonts-enabled sets font-family: 'Reddit Sans', sans-serif on the root.
• Body, content, sidebar, footer inherit from root.
• code, pre, and .md code elements use font-family: 'Reddit Mono', monospace.
• Reddit Sans Condensed is declared but not force-applied — available as 'Reddit Sans Condensed' for future tweaks or user stylesheets.

Settings & Toggle

Default

fontOverride: true added to DEFAULTS in lib/settings.js. On by default.

Class Toggle

content/main.js toggles html.rt-fonts-enabled on init and on settings change, following the same pattern as rt-card-enabled and rt-badges-enabled.

Popup

New checkbox "Reddit fonts" in the top section of popup/popup.html, alongside "Enabled" and "Badge layout". Wired in popup/popup.js the same way as existing toggles.

No per-family granularity — one switch controls all three families on or off.

Files Changed

File	Change
content/fonts/RedditSans[wght].woff2	New — bundled font asset
content/fonts/RedditSansCondensed[wght].woff2	New — bundled font asset
content/fonts/RedditMono[wght].woff2	New — bundled font asset
content/styles/fonts.css	New — @font-face declarations and override rules
manifest.json	Add content/styles/fonts.css to css array
lib/settings.js	Add fontOverride: true to DEFAULTS
content/main.js	Toggle rt-fonts-enabled class
popup/popup.html	Add "Reddit fonts" checkbox
popup/popup.js	Wire the new checkbox