36 lines
1.5 KiB
Markdown
36 lines
1.5 KiB
Markdown
# Brand fonts
|
|
|
|
These files are not in the repository. Drop them here and the app picks them up
|
|
with no code change — `web/styles.css` already declares the `@font-face` rules
|
|
and the fallback stacks.
|
|
|
|
| File | Face | Where it is used | Source |
|
|
| --- | --- | --- | --- |
|
|
| `Belleza-Regular.woff2` | Belleza | headings (`h1`, `h2`) | Google Fonts, SIL Open Font License |
|
|
| `NeueMontreal-Regular.woff2` | Neue Montreal | body copy, sub-headings | Pangram Pangram, commercial licence |
|
|
| `NeueMontreal-Medium.woff2` | Neue Montreal Medium | emphasis | as above |
|
|
| `NeueMontreal-Bold.woff2` | Neue Montreal Bold | strong emphasis | as above |
|
|
|
|
Belleza is already wired up. For Neue Montreal, uncomment the `@font-face`
|
|
block at the top of `web/styles.css` once the files are here.
|
|
|
|
## They have to be self-hosted
|
|
|
|
The app sends `Content-Security-Policy: default-src 'self'`, so a stylesheet
|
|
that pulls fonts from `fonts.gstatic.com` is blocked by the browser and the
|
|
page silently falls back. Converting to `.woff2` and serving them from this
|
|
directory is the only route.
|
|
|
|
To convert from `.ttf`/`.otf`:
|
|
|
|
```bash
|
|
pip install fonttools brotli
|
|
python -c "from fontTools.ttLib import TTFont; f=TTFont('Belleza-Regular.ttf'); f.flavor='woff2'; f.save('Belleza-Regular.woff2')"
|
|
```
|
|
|
|
## Until then
|
|
|
|
Headings fall back to Optima → Candara → Gill Sans → Trebuchet MS, and body
|
|
copy to the system UI sans. Both are chosen to sit close to the real faces, so
|
|
the layout does not shift when the files arrive.
|