A modern font exploration and comparison tool for browsing fonts from Google Fonts and Fontshare with real-time visual comparisons, advanced filtering, and customizable typography.

Features

Multi-Provider Catalog: Browse fonts from Google Fonts and Fontshare in one place
Side-by-Side Comparison: Compare up to 4 fonts simultaneously with customizable text, size, and typography settings
Advanced Filtering: Filter by category, provider, character subsets, and weight
Virtual Scrolling: Fast, smooth browsing of thousands of fonts
Responsive UI: Beautiful interface built with shadcn components and Tailwind CSS
Type-Safe: Full TypeScript coverage with strict mode enabled

Tech Stack

Framework: Svelte 5 with reactive primitives (runes)
Styling: Tailwind CSS v4
Components: shadcn-svelte (via bits-ui)
State Management: TanStack Query for async data
Architecture: Feature-Sliced Design (FSD)
Quality: oxlint (linting), dprint (formatting), lefthook (git hooks)

Project Structure

src/
├── app/          # App shell, layout, providers
├── widgets/      # Composed UI blocks (ComparisonSlider, SampleList, FontSearch)
├── features/     # Business features (filters, search, display)
├── entities/     # Domain models and stores (Font, Breadcrumb)
├── shared/       # Reusable utilities, UI components, helpers
└── routes/       # Page-level components

Quick Start

# Install dependencies
yarn install

# Start development server
yarn dev

# Build for production
yarn build

# Preview production build
yarn preview

Available Scripts

Command	Description
`yarn dev`	Start development server
`yarn build`	Build for production
`yarn preview`	Preview production build
`yarn check`	Run Svelte type checking
`yarn lint`	Run oxlint
`yarn format`	Format code with dprint
`yarn test:unit`	Run unit tests
`yarn test:unit:ui`	Run Vitest UI
`yarn storybook`	Start Storybook dev server

Code Style

Path Aliases: Use $app/, $shared/, $features/, $entities/, $widgets/, $routes/
Components: PascalCase (e.g., ComparisonSlider.svelte)
Formatting: 100 char line width, 4-space indent, single quotes
Type Safety: Strict TypeScript with JSDoc comments for public APIs

Architecture Notes

This project follows the Feature-Sliced Design (FSD) methodology for clean separation of concerns. The application uses Svelte 5's new runes system ($state, $derived, $effect) for reactive state management.

License

MIT