71 lines
2.8 KiB
Markdown
71 lines
2.8 KiB
Markdown
# 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](https://github.com/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 |
|