← Back to Articles
2026-05-26frontend

Cookie-based font preference system added

  • Change: app/_component/font-preferences.ts defines available fonts. FontPreferenceProvider wraps the root layout and reads/writes the font cookie. /setting page exposes a font picker (font-selector.tsx). Font class is applied to <body> on SSR via the root layout.
  • Why: Allow users to choose their reading font as a persistent preference without a database account.
  • Affected Modules: app/_component/font-preferences.ts, app/_component/font-provider.tsx, app/_component/font-selector.tsx, app/setting/page.tsx, app/layout.tsx
  • Trade-offs:
    • Pro: Cookie-based preferences work without auth; zero-latency SSR application of the stored font avoids flash-of-wrong-font.
    • Con: Fonts are declared as static class names; adding a new font requires updating font-preferences.ts and ensuring the font is loaded in the layout.