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

Reddit Fonts Override Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Override old Reddit's fonts with Reddit Sans, Reddit Sans Condensed, and Reddit Mono, toggleable from the extension popup.

Architecture: Bundle three variable-weight woff2 files in the extension. A static CSS file declares @font-face for each family and applies font overrides when html.rt-fonts-enabled is present. The JS layer toggles that class based on a fontOverride setting, following the same pattern as card layout and badge layout.

Tech Stack: Firefox WebExtension (Manifest V2), vanilla CSS/JS, woff2 variable fonts.

Global Constraints

• No external network requests — fonts are bundled locally.
• SIL Open Font License 1.1 — no attribution in UI required, but license file ships with fonts.
• Variable fonts only (no static weight files) — one file per family covers all weights.
• Follow existing codebase patterns: IIFE modules, window.RedditTweaks namespace, class-toggle gating.

---

Task 1: Download and bundle font assets

Files:

• Create: content/fonts/RedditSans[wght].woff2
• Create: content/fonts/RedditSansCondensed[wght].woff2
• Create: content/fonts/RedditMono[wght].woff2
• Create: content/fonts/OFL.txt

Interfaces:

• Consumes: Nothing

• Produces: Font files at content/fonts/ referenced by CSS in Task 2

• Step 1: Create the fonts directory

mkdir -p content/fonts

• Step 2: Download the three variable-weight woff2 files from the reddit/redditsans repo

curl -L -o "content/fonts/RedditSans[wght].woff2" \
  "https://raw.githubusercontent.com/reddit/redditsans/main/fonts/sans/webfonts/RedditSans%5Bwght%5D.woff2"

curl -L -o "content/fonts/RedditSansCondensed[wght].woff2" \
  "https://raw.githubusercontent.com/reddit/redditsans/main/fonts/sans-condensed/webfonts/RedditSansCondensed%5Bwght%5D.woff2"

curl -L -o "content/fonts/RedditMono[wght].woff2" \
  "https://raw.githubusercontent.com/reddit/redditsans/main/fonts/mono/webfonts/RedditMono%5Bwght%5D.woff2"

The %5B and %5D are URL-encoded brackets for the variable font filenames.

• Step 3: Download the OFL license file

curl -L -o content/fonts/OFL.txt \
  "https://raw.githubusercontent.com/reddit/redditsans/main/OFL.txt"

• Step 4: Verify files downloaded correctly

ls -la content/fonts/

Expected: four files — three woff2 files (~81KB, ~94KB, ~96KB) and OFL.txt.

• Step 5: Commit

git add content/fonts/
git commit -m "feat: bundle Reddit Sans, Condensed, and Mono variable fonts"

---

Task 2: Create fonts CSS with @font-face and override rules

Files:

• Create: content/styles/fonts.css
• Modify: manifest.json:19 (add CSS to manifest)

Interfaces:

• Consumes: Font files at content/fonts/ from Task 1

• Produces: CSS classes gated on html.rt-fonts-enabled used by Task 3

• Step 1: Create content/styles/fonts.css

/* --- @font-face declarations --- */
@font-face {
  font-family: 'Reddit Sans';
  src: url("../fonts/RedditSans[wght].woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Sans Condensed';
  src: url("../fonts/RedditSansCondensed[wght].woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Mono';
  src: url("../fonts/RedditMono[wght].woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* --- Font overrides (gated on toggle class) --- */
html.rt-fonts-enabled,
html.rt-fonts-enabled body,
html.rt-fonts-enabled input,
html.rt-fonts-enabled textarea,
html.rt-fonts-enabled select,
html.rt-fonts-enabled button {
  font-family: 'Reddit Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html.rt-fonts-enabled .content,
html.rt-fonts-enabled .side,
html.rt-fonts-enabled .footer-parent,
html.rt-fonts-enabled .nav-buttons,
html.rt-fonts-enabled .tabmenu,
html.rt-fonts-enabled .morelink,
html.rt-fonts-enabled .titlebox,
html.rt-fonts-enabled .searchpane,
html.rt-fonts-enabled .infobar {
  font-family: inherit !important;
}

html.rt-fonts-enabled code,
html.rt-fonts-enabled pre,
html.rt-fonts-enabled .md code,
html.rt-fonts-enabled .md pre {
  font-family: 'Reddit Mono', 'SF Mono', 'Fira Code', Consolas, monospace !important;
}

• Step 2: Add fonts.css to the manifest CSS array

In manifest.json, add "content/styles/fonts.css" to the css array at line 19:

"css": ["content/styles/badges.css", "content/styles/cards.css", "content/styles/fonts.css"],

• Step 3: Verify the CSS file loads without syntax errors

Load the extension in Firefox (about:debugging → Load Temporary Add-on) and check the browser console for CSS parse errors. Confirm no errors related to font paths.

• Step 4: Commit

git add content/styles/fonts.css manifest.json
git commit -m "feat: add fonts CSS with @font-face and override rules"

---

Task 3: Wire settings, class toggle, and popup

Files:

• Modify: lib/settings.js:22 (add default)
• Modify: content/main.js:63-84 (add class toggle and storage listener)
• Modify: popup/popup.html:18-19 (add checkbox)
• Modify: popup/popup.js:71,288,313-314 (populate, save, listen)

Interfaces:

• Consumes: CSS class html.rt-fonts-enabled from Task 2

• Produces: Complete toggleable font override feature

• Step 1: Add fontOverride default to lib/settings.js

Add fontOverride: true, after line 22 (badgeLayout: true,):

const DEFAULTS = {
    // ... existing defaults ...
    badgeLayout: true,
    fontOverride: true,
    cardLayout: true,
    // ... rest ...
};

• Step 2: Add class toggle in content/main.js init function

After the badgeLayout class toggle block (line 67-69), add:

if (settings.fontOverride) {
  document.documentElement.classList.add("rt-fonts-enabled");
}

• Step 3: Add fontOverride to the storage change reload check in content/main.js

In the browser.storage.onChanged.addListener callback (around line 80-88), add fontOverride to the reload condition:

if (
  (changes.enabled && changes.enabled.newValue !== changes.enabled.oldValue) ||
  (changes.badgeLayout && changes.badgeLayout.newValue !== changes.badgeLayout.oldValue) ||
  (changes.fontOverride && changes.fontOverride.newValue !== changes.fontOverride.oldValue) ||
  (changes.cardLayout && changes.cardLayout.newValue !== changes.cardLayout.oldValue)
) {
  location.reload();
  return;
}

• Step 4: Add checkbox to popup/popup.html

After the "Badge layout" toggle (line 18-19), add:

<label class="toggle-row">
  <span>Reddit fonts</span>
  <input type="checkbox" id="fontOverride">
</label>

• Step 5: Wire the checkbox in popup/popup.js

In populateControls (after line 71), add:

document.getElementById("fontOverride").checked = settings.fontOverride;

In saveFromControls (after badgeLayout on line 288), add:

fontOverride: document.getElementById("fontOverride").checked,

In init (after the badgeLayout listener on line 314), add:

document.getElementById("fontOverride").addEventListener("change", saveFromControls);

• Step 6: Test the toggle

1. Load the extension in Firefox.
2. Open old.reddit.com.
3. Verify fonts are Reddit Sans by default (toggle is on).
4. Open popup, uncheck "Reddit fonts", confirm page reloads and fonts revert to old Reddit defaults.
5. Re-check "Reddit fonts", confirm page reloads and fonts switch back to Reddit Sans.
6. Verify monospace elements (code, pre) use Reddit Mono.

• Step 7: Commit

git add lib/settings.js content/main.js popup/popup.html popup/popup.js
git commit -m "feat: add fontOverride toggle for Reddit Sans fonts"