Plans on weights?#21
Conversation
## Summary
Update the npm package entry point (`index.css`) and package manifest (`package.json`) to expose the full weight range (400–700) via the variable font. The previous configuration referenced a non-existent `fonts/webfonts/` directory and only declared a single static SemiBold (600) weight — a leftover from v1 before weights were added.
## Changes
- `index.css` — Replace the single-weight static `@font-face` with a variable font declaration using `font-weight: 400 700` range, sourcing from `fonts/calsans-var-full/CalSans-VariableFont.woff2` (with TTF fallback).
- `package.json` — Update `"files"` array to point to the actual variable font location (`fonts/calsans-var-full/`) instead of the non-existent `fonts/webfonts/` directory.
## Test Plan
- `python3 -c "import json; json.load(open('package.json'))"` → valid JSON, exits 0
- `file fonts/calsans-var-full/CalSans-VariableFont.woff2` → confirms WOFF2 font file exists
- Manual: consumers importing `cal-sans` now get all weights (Regular 400, Medium 500, SemiBold 600, Bold 700) through a single variable font file with `font-optical-sizing: auto` support
## Notes
The variable font includes all axes (`opsz`, `GEOM`, `wght`, `YTAS`, `SHRP`, `ital`), giving npm consumers access to the full design space — not just weight. The `font-weight: 400 700` range declaration enables the browser to use any weight in that range without additional `@font-face` rules.
Closes calcom#2
Bounty: calcom#2
[anti-stale]
|
Thanks for this — direction’s exactly right. One variable @font-face covering the whole 400–700 range is what we want, and good catch killing the dead fonts/webfonts/ path. One fix before it can merge: the new font files in the repo are CalSansVF.woff2 / CalSansVF.ttf (and what’s sitting at fonts/calsans-var-full/). This src: points to CalSans-VariableFont.woff2 / .ttf, which don’t exist anymore — so the @font-face would 404 and fall back. Can you update index.css to the real filenames: package.json is good as-is — the fonts/calsans-var-full/*.woff2 / .ttf globs already pick up CalSansVF., so no change needed there. Once the src filenames match, this is good to go 🙏 |
|
Good catch — I'll update |
Summary
Update the npm package entry point (
index.css) and package manifest (package.json) to expose the full weight range (400–700) via the variable font. The previous configuration referenced a non-existentfonts/webfonts/directory and only declared a single static SemiBold (600) weight — a leftover from v1 before weights were added.Changes
index.css— Replace the single-weight static@font-facewith a variable font declaration usingfont-weight: 400 700range, sourcing fromfonts/calsans-var-full/CalSans-VariableFont.woff2(with TTF fallback).package.json— Update"files"array to point to the actual variable font location (fonts/calsans-var-full/) instead of the non-existentfonts/webfonts/directory.Test Plan
python3 -c "import json; json.load(open('package.json'))"→ valid JSON, exits 0file fonts/calsans-var-full/CalSans-VariableFont.woff2→ confirms WOFF2 font file existscal-sansnow get all weights (Regular 400, Medium 500, SemiBold 600, Bold 700) through a single variable font file withfont-optical-sizing: autosupportNotes
The variable font includes all axes (
opsz,GEOM,wght,YTAS,SHRP,ital), giving npm consumers access to the full design space — not just weight. Thefont-weight: 400 700range declaration enables the browser to use any weight in that range without additional@font-facerules.Closes #2