Font Loading Fix — Noto Sans + Cormorant Garamond (2 Fonts)

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Properly load Cormorant Garamond via next/font/google, fix CSS variables, and consolidate all font-display usage to font-serif — leaving exactly 2 font tokens: font-sans (Noto Sans) and font-serif (Cormorant Garamond).

Architecture: Three changes: (1) Add Cormorant Garamond to layout.tsx as --font-cormorant. (2) Update globals.css so --font-serif → --font-cormorant and --font-sans → --font-noto-sans; remove --font-display entirely. (3) Replace all font-display classes with font-serif across the codebase.

Tech Stack: Next.js 16, Tailwind CSS v4, next/font/google

Files to Modify

File	Change
`apps/frontend/app/layout.tsx`	Add `Cormorant_Garamond` via `next/font/google`
`apps/frontend/app/globals.css`	`--font-serif` → `--font-cormorant`, `--font-sans` → `--font-noto-sans`, remove `--font-display`
`apps/frontend/components/ui/typography.tsx`	Replace `font-display` with `font-serif` in `headingVariants`
~25 component files	Replace `font-display` → `font-serif`
`apps/frontend/components/design-system/typography-data.ts`	Update to 2 fonts: Noto Sans + Cormorant Garamond

Task 1: Add Cormorant Garamond to layout.tsx

Files:

Modify: apps/frontend/app/layout.tsx:15, 24-29, 140
Step 1: Read current layout.tsx lines 1-35 and line 140

cat -n apps/frontend/app/layout.tsx | head -35
sed -n '138,142p' apps/frontend/app/layout.tsx

Step 2: Add Cormorant_Garamond import

Change:

import { Noto_Sans } from "next/font/google";

to:

import { Noto_Sans, Cormorant_Garamond } from "next/font/google";

Step 3: Add cormorantGaramond declaration after notoSans

Add after line 29:

const cormorantGaramond = Cormorant_Garamond({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
  style: ["normal", "italic"],
  variable: "--font-cormorant",
  display: "swap",
});

Step 4: Add cormorant className to html element

Change line 140 from:

<html lang="en" className={notoSans.variable}>

to:

<html lang="en" className={`${notoSans.variable} ${cormorantGaramond.variable}`}>

Step 5: Verify build passes

cd apps/frontend && bun run build 2>&1 | tail -10

Expected: Clean build.

Step 6: Commit

git add apps/frontend/app/layout.tsx
git commit -m "feat(fonts): add Cormorant_Garamond via next/font/google"

Task 2: Fix CSS variables in globals.css

Files:

Modify: apps/frontend/app/globals.css:127-130
Step 1: Read current font variable definitions

sed -n '127,132p' apps/frontend/app/globals.css

Current:

--font-sans: var(--font-noto-sans), ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-noto-sans), ui-serif, Georgia, serif;
--font-display: var(--font-noto-sans), ui-serif, Georgia, serif;

Step 2: Update to 2 fonts — serif = Cormorant, sans = Noto Sans

Replace lines 127-130 with:

--font-sans: var(--font-noto-sans), ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-cormorant), ui-serif, Georgia, serif;

Remove --font-display entirely.

Step 3: Verify build passes

cd apps/frontend && bun run build 2>&1 | tail -10

Expected: Clean build.

Step 4: Commit

git add apps/frontend/app/globals.css
git commit -m "fix(fonts): map --font-serif to --font-cormorant, remove --font-display"

Task 3: Replace font-display and arbitrary Cormorant classes with font-serif

Files (all in apps/frontend/):

Modify: components/ui/typography.tsx
Modify: components/home/journey-section.tsx
Modify: components/home/hero-bottom.tsx
Modify: components/marketing/page-hero.tsx
Modify: components/marketing/service-card.tsx
Modify: components/marketing/journey-card.tsx
Modify: components/layout/mobile-bottom-dock.tsx
Modify: components/layout/header.tsx
Modify: components/admin/dashboard-bottom-nav.tsx
Modify: components/design-system/special-components-section.tsx
Modify: components/design-system/premium-components-section.tsx
Modify: components/design-system/overlay-components-section.tsx
Modify: components/design-system/media-components-section.tsx
Modify: components/design-system/form-components-section.tsx
Modify: components/design-system/data-display-section.tsx
Modify: components/design-system/booking-components-section.tsx
Modify: components/design-system/icons-section.tsx
Modify: components/design-system/typography-section.tsx
Modify: components/design-system/spacing-section.tsx
Modify: components/design-system/navigation-components-section.tsx
Modify: components/design-system/feedback-section.tsx
Modify: components/design-system/components-section.tsx
Modify: components/design-system/colors-section.tsx
Modify: components/design-system/animation-section.tsx
Modify: components/design-system/advanced-components-section.tsx
Modify: components/design-system/admin-components-section.tsx
Modify: components/experiences/french-mentalist/*.tsx (all 13 files)
Modify: components/booking/selectable-card.tsx
Modify: components/booking/summary-row.tsx
Modify: components/booking/reservation-success.tsx
Step 1: Replace all font-display with font-serif

cd apps/frontend
 
find . \( -name "*.tsx" -o -name "*.ts" \) | grep -v "node_modules" | grep -v "raw/" | xargs sed -i '' 's/font-display/font-serif/g'

Step 2: Replace all arbitrary font-['Cormorant_Garamond'] with font-serif

cd apps/frontend
 
find . \( -name "*.tsx" -o -name "*.ts" \) | grep -v "node_modules" | grep -v "raw/" | xargs sed -i '' "s/font-\['Cormorant_Garamond'\]/font-serif/g"
find . \( -name "*.tsx" -o -name "*.ts" \) | grep -v "node_modules" | grep -v "raw/" | xargs sed -i '' 's/font-\[Cormorant_Garamond\]/font-serif/g'

Step 3: Verify no arbitrary font classes or font-display remain

cd apps/frontend
 
echo "=== font-display remaining ==="
grep -r "font-display" --include="*.tsx" --include="*.ts" . 2>/dev/null | grep -v "node_modules" | grep -v "raw/" | wc -l | tr -d ' '
 
echo "=== font-['Cormorant_Garamond'] remaining ==="
grep -r "font-\[.*Cormorant" --include="*.tsx" --include="*.ts" . 2>/dev/null | grep -v "node_modules" | grep -v "raw/" | wc -l | tr -d ' '
 
echo "=== font-serif usage count ==="
grep -r "font-serif" --include="*.tsx" --include="*.ts" . 2>/dev/null | grep -v "node_modules" | grep -v "raw/" | wc -l | tr -d ' '

Expected: font-display = 0, arbitrary Cormorant = 0, font-serif > 0.

Step 4: Verify build passes

cd apps/frontend && bun run build 2>&1 | tail -10

Expected: Clean build.

Step 5: Commit

git add apps/frontend
git commit -m "refactor(fonts): replace font-display and arbitrary Cormorant classes with font-serif"

Task 4: Update typography-data.ts to reflect reality

Files:

Modify: apps/frontend/components/design-system/typography-data.ts:13-53
Step 1: Read current fonts array

cat -n apps/frontend/components/design-system/typography-data.ts

Step 2: Replace fonts array with 2 fonts

Replace the fonts array with:

export const fonts = [
  {
    name: "Cormorant Garamond",
    token: "--font-serif",
    usage: "Headings, display text, elegant serif",
    sample: "The Magic Begins",
    className: "font-serif",
  },
  {
    name: "Noto Sans",
    token: "--font-sans",
    usage: "Body text, UI text",
    sample: "Experience the magic of Vietnamese theater",
    className: "font-sans",
  },
] as const;

Step 3: Commit

git add apps/frontend/components/design-system/typography-data.ts
git commit -m "docs: update typography-data to reflect actual loaded fonts"

Final State

CSS variable	Font	Used by
`--font-sans`	Noto Sans	Body, UI text
`--font-serif`	Cormorant Garamond	Headings, display, decorative

Removed: --font-display (consolidated into --font-serif)

Verification:

# No font-display remaining
grep -r "font-display" --include="*.tsx" --include="*.ts" apps/frontend 2>/dev/null | grep -v "node_modules" | grep -v "raw/"
 
# Build clean
cd apps/frontend && bun run build 2>&1 | tail -5

2026 05 12 Booking Section Enhancement Architecture