Skip to content

Plans on weights?#21

Open
qlufiq-collab wants to merge 2 commits into
calcom:mainfrom
qlufiq-collab:bounty/calcom/font-2
Open

Plans on weights?#21
qlufiq-collab wants to merge 2 commits into
calcom:mainfrom
qlufiq-collab:bounty/calcom/font-2

Conversation

@qlufiq-collab

@qlufiq-collab qlufiq-collab commented Jun 11, 2026

Copy link
Copy Markdown

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 #2

lufiaq and others added 2 commits June 11, 2026 09:05
## 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
@MarkFonts

Copy link
Copy Markdown
Collaborator

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:

@font-face {
    font-family: "Cal Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("./fonts/calsans-var-full/CalSansVF.woff2") format("woff2"),
        url("./fonts/calsans-var-full/CalSansVF.ttf") format("truetype");
}

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 🙏

@qlufiq-collab

Copy link
Copy Markdown
Author

Good catch — I'll update index.css to use CalSansVF.woff2 and CalSansVF.ttf as the src filenames to match what's actually in fonts/calsans-var-full/. Pushing the fix now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Plans on weights?

2 participants