feat: rename font-cal to font-heading and centralize font loading

[eunjae-lee]

What does this PR do?

This is a partial reapplication of #26064, bringing back the class/variable renaming while keeping Inter for body text (instead of switching body text to Cal Sans UI which caused the original PR to be reverted in #26759).

Changes:

• Rename --font-cal CSS variable to --font-heading
• Rename font-cal Tailwind class to font-heading
• Centralize font loading in @coss/ui/fonts package with fontSans (Inter) and fontHeading (Cal Sans SemiBold)
• Move CalSans-SemiBold.woff2 from apps/web/fonts/ to packages/coss-ui/src/fonts/
• Remove redundant font-weight classes (font-semibold, font-medium, font-extrabold) from elements using font-heading since Cal Sans SemiBold is inherently semibold
• Remove inline <style> tags for CSS variables in favor of using font .variable properties on body class

This fixes the DialogTitle font weight issue where titles appeared thin/normal after the original PR was reverted.

Link to Devin run: https://app.devin.ai/sessions/ccf24fb0875d405db9f35802a2afb12f
Requested by: @eunjae-lee

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - internal font changes only, README added in packages/coss-ui/src/fonts/.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Verify headings throughout the app render with Cal Sans SemiBold font (should appear bold/semibold)
2. Verify body text still uses Inter font
3. Check DialogTitle in modals - should now appear with proper semibold weight
4. Verify font loading works in both App Router (app/layout.tsx) and Pages Router (pages/_document.tsx)
5. Check platform atoms/embeds still render fonts correctly

Human Review Checklist

• Verify headings look correct with Cal Sans SemiBold (should appear bold/semibold without explicit font-weight classes)
• Confirm font loading works across web app and platform atoms
• Check that no font-cal or --font-cal references were missed in the rename
• Verify DialogTitle font weight is fixed (original issue)
• Verify the font file move from apps/web/fonts/ to packages/coss-ui/src/fonts/ works correctly

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[cubic-dev-ai]

1 issue found across 73 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/modules/onboarding/components/OnboardingCard.tsx">

<violation number="1" location="apps/web/modules/onboarding/components/OnboardingCard.tsx:68">
P2: Replacing `[container-type:size]` with `@container-[size]` removes the `container-type` property, so this card is no longer a queryable container and any child container queries will no longer fire.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[github-actions]

Devin AI is addressing Cubic AI's review feedback

A Devin session has been created to address the issues identified by Cubic AI.

View Devin Session