Run any Skill in Manus with one click

fonts

Stars58

Forks12

UpdatedJuly 8, 2026 at 17:59

Add, swap, or remove a self-hosted web font (latin variable woff2 from fontsource, localized via next/font/local). Use when adding a font role, or debugging font loading, preload, or CLS.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

nrjdalal

nrjdalal/zerostarter

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	fonts
description	Add, swap, or remove a self-hosted web font (latin variable woff2 from fontsource, localized via next/font/local). Use when adding a font role, or debugging font loading, preload, or CLS.

Fonts

Fonts are self-hosted through next/font/local, which generates the metric-adjusted "<family> Fallback" faces that hold CLS near zero. Do NOT switch to fontsource CSS imports: the bundler resolves their url() references to node_modules paths that 404 in dev, and they cannot emit the compiler-only fallback metrics.

Layout

web/next/src/fonts/*.woff2, vendored latin variable files
web/next/src/lib/fonts.ts, one localFont per family, each exporting a CSS variable
web/next/src/app/layout.tsx, the variables applied on <html>
web/next/src/app/globals.css @theme inline, roles chain to the font variables (--font-sans: var(--font-dm-sans), sans-serif)

Add or swap a font

Fetch the latin variable file straight from the fontsource CDN, no dependency needed:

curl -L -o web/next/src/fonts/<name>-latin-wght-normal.woff2 \
  https://cdn.jsdelivr.net/npm/@fontsource-variable/<name>/files/<name>-latin-wght-normal.woff2

Define it in web/next/src/lib/fonts.ts: localFont({ src: "../fonts/<file>", variable: "--font-<name>", weight: "<min> <max>" }). The weight range is MANDATORY for variable fonts: omit it and the face defaults to 400, so every bold glyph becomes faux-bold synthesis. Read the range from the fontsource CSS: curl -s https://cdn.jsdelivr.net/npm/@fontsource-variable/<name>/index.css | grep font-weight. A serif also sets adjustFontFallback: "Times New Roman" (the default fallback metrics are Arial).
Apply the export's .variable on <html> in layout.tsx.
Wire the role in globals.css @theme inline: --font-<role>: var(--font-<name>), <generic>.
Verify loading: dev CSS emits hashed /_next/static/media/*.woff2 urls plus generated "<family> Fallback" faces, and a production build (Vercel preview, protection-bypass header) emits one <link rel="preload" as="font"> per file. No font 404s.
If a public page changed, check CLS and LCP for layout shift before shipping.

Notes

Scoped preload: any font declared in web/next/src/lib/fonts.ts preloads on every page, because the root layout imports it. To scope a font's preload to specific routes, declare it in a module only those routes import: author-only fonts live in web/next/src/lib/marketing/fonts.ts with woff2 under web/next/src/fonts/marketing/.
DM Sans vendors italics: src is an array of { path, style } entries and one top-level weight covers both. Mono renders synthetic oblique for italics, chosen.
Non-variable font: fetch the per-weight files and pass src as an array with a weight per entry.
Remove a font: delete the woff2, its localFont definition, the <html> variable, and the globals.css role, then grep the variable name to catch stragglers.

More from this repository

same repository

add-package

nrjdalal/zerostarter

Add a new shared workspace package under packages/*. Use when creating a new @packages/<name>, whether a bundled library other workspaces import or a build-only script package that runs during a build.

2026-07-1758

codebase-map

nrjdalal/zerostarter

Orient in this repo: which file to edit for a change, how a change ripples across the stack, and how to search the code. Use at the start of a task in an unfamiliar area, or before a cross-cutting change.

2026-07-1758

runtime-apis

nrjdalal/zerostarter

Prefer Bun-native APIs, else Node built-ins with the node: prefix. Use when importing a Node built-in (fs, path, child_process, crypto, os, util), reading or writing files, spawning a process, or choosing between a Bun and a Node API.

2026-07-1758

icebox

nrjdalal/zerostarter

Icebox a raised-but-undecided concern instead of forcing a plan-or-dismiss call: record it with no verdict so the context survives. Use when a review, PR, audit, or eval surfaces something real-maybe that should not be scheduled or closed yet, or when the user says to icebox or park an item.

2026-07-1458

api-endpoint

nrjdalal/zerostarter

Add a typed Hono API endpoint or WebSocket route: router, OpenAPI docs, validation envelope, and RPC client wiring. Use when adding or modifying routes in api/hono.

2026-07-1458

dev

nrjdalal/zerostarter

Start, restart, and verify the ZeroStarter dev stack. `bun run dev` serves portless named `.localhost` URLs (branch-prefixed in a worktree); resolve them with `bunx portless get`. Use when asked to run the app, when the API returns NOT_FOUND for routes that exist in source, or before browser testing.

2026-07-1458

Fonts

Layout

web/next/src/fonts/*.woff2, vendored latin variable files

web/next/src/lib/fonts.ts, one localFont per family, each exporting a CSS variable

web/next/src/app/layout.tsx, the variables applied on <html>

web/next/src/app/globals.css @theme inline, roles chain to the font variables (--font-sans: var(--font-dm-sans), sans-serif)

Add or swap a font

Fetch the latin variable file straight from the fontsource CDN, no dependency needed:

curl -L -o web/next/src/fonts/<name>-latin-wght-normal.woff2 \
  https://cdn.jsdelivr.net/npm/@fontsource-variable/<name>/files/<name>-latin-wght-normal.woff2

Define it in web/next/src/lib/fonts.ts: localFont({ src: "../fonts/<file>", variable: "--font-<name>", weight: "<min> <max>" }). The weight range is MANDATORY for variable fonts: omit it and the face defaults to 400, so every bold glyph becomes faux-bold synthesis. Read the range from the fontsource CSS: curl -s https://cdn.jsdelivr.net/npm/@fontsource-variable/<name>/index.css | grep font-weight. A serif also sets adjustFontFallback: "Times New Roman" (the default fallback metrics are Arial).

Apply the export's .variable on <html> in layout.tsx.

Wire the role in globals.css @theme inline: --font-<role>: var(--font-<name>), <generic>.

Verify loading: dev CSS emits hashed /_next/static/media/*.woff2 urls plus generated "<family> Fallback" faces, and a production build (Vercel preview, protection-bypass header) emits one <link rel="preload" as="font"> per file. No font 404s.

If a public page changed, check CLS and LCP for layout shift before shipping.

Notes

Scoped preload: any font declared in web/next/src/lib/fonts.ts preloads on every page, because the root layout imports it. To scope a font's preload to specific routes, declare it in a module only those routes import: author-only fonts live in web/next/src/lib/marketing/fonts.ts with woff2 under web/next/src/fonts/marketing/.

DM Sans vendors italics: src is an array of { path, style } entries and one top-level weight covers both. Mono renders synthetic oblique for italics, chosen.

Non-variable font: fetch the per-weight files and pass src as an array with a weight per entry.

Remove a font: delete the woff2, its localFont definition, the <html> variable, and the globals.css role, then grep the variable name to catch stragglers.