boostorg / boostorg/website-v2
Migrate V3 fonts from `.ttf` to `.woff2` and remove unused font weights
- Dominant language
- HTML
- Stars
- 18
- Forks
- 28
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 77
Description
## Context
- V3 font files for `mona-sans`, `mona-sans-display`, and `mona-sans-neon` currently use `.ttf`, but the recommended web format is `.woff2` — which the legacy fonts already use. V3 should follow the same pattern.
- `monaspace-xenon` already uses the legacy `.woff2` variable font — no format change needed, but see the note below on static files.
- Font weights 100–900 are declared, but Figma only uses a subset per font (see below). Removing unused weights reduces bundle size with no visual impact.
See [Boost Typography Guidelines](https://www.figma.com/design/h4bsiGjDgAJny4A3LQU6Td/Brand-Deliverables?node-id=0-2761&m=dev).
⭐️ Our ultimate goal is to ensure the font file sizes are the smallest and therefore most optimized for performance.
## Font usage summary from Guidelines
| Font | Variant | Weights | Style |
|------|---------|---------|-------|
| `mona-sans` | Variable font | 400, 500 | Normal |
| `mona-sans-display` | SemiCondensed | 500 | Normal |
| `mona-sans-neon` | — | 400 | Normal |
| `monaspace-xenon` | — | 400 | Italic |
## Font file options
Evaluate each font individually, but static files are the preferred starting point given the significant size difference, to give an example, see Mona Sans below.
### Mona Sans
Source: https://github.com/github/mona-sans
**Option A: Static files per weight ← Recommended starting point**
- `MonaSans-Regular.woff2` — weight 400
- `MonaSans-Medium.woff2` — weight 500
**Option B: Variable font (single file)**
- `MonaSansVF[wdth,wght,opsz,ital].woff2`
> **⚠ Verify `font-stretch: 95%` support** Static files may not include stretch axis data — the variable font definitely does. If any static file lacks stretch axis support, use the variable font instead.
### Mona Sans Display
Source: https://github.com/github/mona-sans, search for `MonaSansDisplaySemiCondensed`
### Monaspace Neon
Source: https://github.com/githubnext/monaspace
### Monaspace Xenon
Source: https://github.com/githubnext/monaspace
Currently V3 reuses the `.woff2` variable font from the legacy implementation — no format migration needed. Figma uses italic style at weight 400 only. If we move to static files for the other fonts, consider loading a dedicated V3 static file for Xenon as well for consistency.
## Tasks
- [ ] Confirm exact filenames and availability of `.woff2` files for Mona Sans & Mona Sans Display SemiCondensed in the [mona-sans repo](https://github.com/github/mona-sans)
- [ ] Confirm exact filenames and availability of `.woff2` files for Monaspace Neon & Monaspace Xenon in the [monaspace repo](https://github.com/githubnext/monaspace)
- [ ] For Mona Sans font, verify `font-stretch: 95%` support on static files; fall back to the variable font if the stretch axis is absent
- [ ] Replace `.ttf` references in V3 with the chosen `.woff2` file(s) for `mona-sans`, `mona-sans-display`, and `mona-sans-neon`
- [ ] If switching to static files, also load a dedicated static file for `monaspace-xenon` rather than reusing the legacy variable font
- [ ] Update `@font-face` declarations per font to only declare the weights and styles Figma uses (see usage summary above)
- [ ] Smoke-test the UI to confirm visual parity with the current implementation
## Acceptance criteria
- [ ] V3 font files are `.woff2` for `mona-sans`, `mona-sans-display`, and `mona-sans-neon`, consistent with legacy font setup
(https://www.figma.com/design/h4bsiGjDgAJny4A3LQU6Td/Brand-Deliverables?node-id=0-2761&m=dev)
- [ ] `monaspace-xenon` either continues to use the legacy variable font, or is updated to a dedicated static file if that approach is adopted for the other fonts
- [ ] `@font-face` declarations match [Figma](https://www.figma.com/design/h4bsiGjDgAJny4A3LQU6Td/Brand-Deliverables?node-id=0-2761&m=dev): `mona-sans` (400, 500), `mona-sans-display` (500), `mona-sans-neon` (400), `monaspace-xenon` (400 italic)
- [ ] `font-stretch: 95%` renders correctly for Mona Sans
- [ ] UI looks identical to the current implementation
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.