Typography: split the font catalog and load it in parts

Closed
  • Is something wrong?
#430 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
72/100
Issue type
Refactor
Clarity
Clearly specified
Activity status
Active
Tech stack
nextjs, typescript
Domain
frontend, performance

Research direction

Start with lib/typography/catalog.ts, catalog.json, and scripts/generate-font-catalog.mjs to see how the catalog is generated and consumed; then trace useFontMeta, useFonts, and the font browser. Generate an index plus category detail files, load and cache the needed details, and verify the generator output agrees in a test. Done means all listed catalog uses still work, the specified pages exclude the full catalog from first-load JS, and the offline font browser flow is unchanged.

Written by the indexing model from the issue text.

Description

area: typography difficulty: medium enhancement help wanted performance v2.0.0

Summary

The Google Fonts catalog (lib/typography/catalog.json, about 120 kB) is loaded whole whenever a typography feature needs one font's details. Load a small index first and the rest only when browsing, so most pages that name one font stay light.

Part of the 2.0.0 plan: fewer, better and fully tested studios, on a calmer and faster site.

Where to look

  • lib/typography/catalog.ts and catalog.json; scripts/generate-font-catalog.mjs
  • hooks/use-font-catalog.ts: useFontMeta and useFonts
  • components/typography/font-browser.tsx

Behaviour

  • Generate two files: an index (family, category, rank, weights count) and the details by category, loaded on demand.
  • useFontMeta(family) fetches only the part that holds the family, and caches it.
  • The generator script writes both files and a test checks they agree with each other.

Acceptance criteria

  • Every current use of the catalog works (browser, pairing, brand fonts, export).
  • The first-load JS of /brand, /colors and /export does not include the full catalog.
  • The offline behaviour of the font browser is unchanged (check in the offline e2e flow).

Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build (CI fails on unformatted files, so pnpm format first). See CONTRIBUTING.md and the first contribution walkthrough.

Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.

Dominant language
TypeScript
Stars
11
Forks
3
Avg merge
5h 23m
Merged PRs (30d)
74

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from yakew7/DesignHub

All issues in yakew7/DesignHub

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.