Font Explorer

An interactive web app for browsing, previewing, and discovering Google Fonts. Explore 1900+ fonts with real-time typography controls, favorites, and shareable URLs.

Features

• Browse 1900+ Google Fonts — Navigate through the full catalog with keyboard arrows or swipe gestures
• Live typography controls — Adjust font size, weight, and letter spacing in real time
• Filter by category — Sans-serif, Serif, Display, Handwriting, Monospace
• Search — Find fonts by name instantly
• Favorites — Save fonts you like (persisted in localStorage)
• Copy CSS — One-click copy of the @import snippet for any font
• Shareable URLs — Every font/text/category combination has a unique URL
• Dark / Light theme — Toggle with persistent preference
• Keyboard shortcuts — ← → navigate, F favorite, C copy CSS, Esc close modal
• Mobile-friendly — Responsive layout with swipe navigation

Tech Stack

• Next.js 15 (App Router)
• React 19
• TypeScript
• Tailwind CSS 4
• Framer Motion
• nuqs (URL query state)
• Vitest + Testing Library

Getting Started

Prerequisites

• Node.js >= 18
• pnpm

Install

pnpm install

Development

pnpm dev

Open http://localhost:3000.

Build

pnpm build
pnpm start

Tests

pnpm test          # single run
pnpm test:watch    # watch mode

Lint

pnpm lint

Project Structure

src/
├── app/             # Next.js pages & layout
├── components/      # UI components (header, filter bar, font preview, etc.)
├── hooks/           # Custom React hooks (state, keyboard, swipe, favorites)
├── lib/             # Utilities (font catalog, CSS generation, constants)
├── providers/       # Theme context provider
└── types/           # TypeScript interfaces
data/
└── fonts-catalog.json   # Google Fonts metadata (1900+ entries)

License

MIT