Add implementation plan for Reddit fonts override
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
263
docs/superpowers/plans/2026-08-27-reddit-fonts.md
Normal file
263
docs/superpowers/plans/2026-08-27-reddit-fonts.md
Normal file
@@ -0,0 +1,263 @@
|
||||
# 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**
|
||||
|
||||
```bash
|
||||
mkdir -p content/fonts
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Download the three variable-weight woff2 files from the reddit/redditsans repo**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
curl -L -o content/fonts/OFL.txt \
|
||||
"https://raw.githubusercontent.com/reddit/redditsans/main/OFL.txt"
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Verify files downloaded correctly**
|
||||
|
||||
```bash
|
||||
ls -la content/fonts/
|
||||
```
|
||||
|
||||
Expected: four files — three woff2 files (~81KB, ~94KB, ~96KB) and OFL.txt.
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
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`**
|
||||
|
||||
```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:
|
||||
|
||||
```json
|
||||
"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**
|
||||
|
||||
```bash
|
||||
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,`):
|
||||
|
||||
```js
|
||||
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:
|
||||
|
||||
```js
|
||||
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:
|
||||
|
||||
```js
|
||||
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:
|
||||
|
||||
```html
|
||||
<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:
|
||||
|
||||
```js
|
||||
document.getElementById("fontOverride").checked = settings.fontOverride;
|
||||
```
|
||||
|
||||
In `saveFromControls` (after `badgeLayout` on line 288), add:
|
||||
|
||||
```js
|
||||
fontOverride: document.getElementById("fontOverride").checked,
|
||||
```
|
||||
|
||||
In `init` (after the `badgeLayout` listener on line 314), add:
|
||||
|
||||
```js
|
||||
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**
|
||||
|
||||
```bash
|
||||
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"
|
||||
```
|
||||
Reference in New Issue
Block a user