Professional Font Pairing Lab for Designers & Developers
Stop guessing font pairings. Explore curated, professional combinations with real web + editorial previews, smart filters, and one-click developer exports.
Live Demo · Report Bug · Request Feature
- 34 hand-picked combinations - Not random generators, real design decisions
- Multiple preview modes - Web UI, editorial layouts, and hero sections
- Vibe tags & filters - Find pairings by mood: minimal, bold, elegant, playful
- Timelessness ratings - Classic, modern classic, or trending
- Multi-field input - Test with your own headline, subhead, and body text
- Real-time preview - See changes instantly across all specimens
- Mobile-optimized - Bottom sheet UI on mobile devices
- Build your own type system - Select fonts for H1-H3, body, and caption
- Fine-tune everything - Weight, size, line-height, letter-spacing
- Live preview - See changes as you adjust sliders
- 4 export formats - CSS, Tailwind, Google Fonts, AI Prompts
- CSS - Variables and class definitions
- Tailwind Config - Ready-to-paste configuration
- Google Fonts - HTML link tags with correct weights
- AI Prompts - Structured prompts for ChatGPT/Claude design handoff
- Side-by-side comparison - Compare up to 3 pairings
- Synced previews - Same sample text across all
- Quick decision making - See differences at a glance
- Save your picks - Heart any pairing to save it
- Local storage - No account needed, persists in browser
- Dedicated page - View all favorites in one place
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Animations: Framer Motion
- Fonts: Google Fonts via
next/font - Icons: Lucide React
- Deployment: Vercel
- Analytics: Google Analytics 4, Microsoft Clarity (optional)
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/ObiBat/fontkin.git cd fontkin -
Install dependencies
npm install
-
Run the development server
npm run dev
Create a .env.local file for analytics:
# Google Analytics 4 (optional - hardcoded in production)
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
# Microsoft Clarity (optional)
NEXT_PUBLIC_CLARITY_ID=xxxxxxxxxx
# Plausible Analytics (optional)
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=fontkin.comfontkin/
├── app/
│ ├── builder/ # Custom combo builder
│ ├── combo/[slug]/ # Individual pairing pages
│ ├── compare/ # Comparison tool
│ ├── explore/ # Main gallery
│ ├── favorites/ # Saved pairings
│ ├── layout.tsx # Root layout with SEO
│ ├── page.tsx # Homepage
│ ├── not-found.tsx # Custom 404
│ ├── sitemap.ts # Dynamic sitemap
│ └── robots.ts # Robots.txt
├── components/
│ ├── analytics.tsx # GA4, Clarity, Plausible
│ ├── combo-card.tsx # Pairing card component
│ ├── combo-specimen.tsx # Detailed pairing view
│ ├── custom-text-input.tsx # Text preview input
│ ├── header.tsx # Navigation
│ ├── hero-typography-theater.tsx # Homepage hero
│ ├── structured-data.tsx # JSON-LD schemas
│ └── ...
├── contexts/
│ └── app-state.tsx # Global state (favorites, compare, custom text)
├── lib/
│ ├── data/
│ │ ├── fonts.ts # Font definitions (50+ fonts)
│ │ └── combos.ts # Curated pairings (34 combos)
│ ├── fonts.ts # next/font loaders
│ ├── samples.ts # Sample text templates
│ └── export-utils.ts # Export generators
└── public/
└── ...
- Serif: Playfair Display, Merriweather, Crimson Pro, Lora, and more
- Sans-Serif: Inter, Work Sans, Plus Jakarta Sans, Space Grotesk, and more
- Display: Anton, Bebas Neue, Oswald, Clash Display
- Monospace: JetBrains Mono, Fira Code, IBM Plex Mono
- Editorial: Magazine and blog typography
- Corporate: Professional business sites
- Creative: Portfolio and agency sites
- Startup: Modern SaaS applications
- E-commerce: Product and retail sites
WebsiteSchema- Site-wide search actionOrganizationSchema- Brand identitySoftwareApplicationSchema- App store listingFAQSchema- Common questionsFontPairingSchema- Individual pairing metadataBreadcrumbSchema- Navigation breadcrumbs
- Open Graph for social sharing
- Twitter Cards
- Canonical URLs
- Robots directives
- Dynamic sitemap with all 34+ pairing URLs
- robots.txt configuration
- Dynamic OG images per pairing
- Google Search Console verified
Tracks:
- Page views with anonymized IP
- Font pairing views
- Favorites and unfavorites
- Export copies (CSS, Tailwind, AI)
- Filter usage
- Builder interactions
import { events } from '@/components/analytics';
events.viewCombo('playfair-inter');
events.favoriteCombo('playfair-inter');
events.copyExport('css', 'playfair-inter');- Push to GitHub
- Import project in Vercel
- Deploy automatically
npx vercel --prodnpm run build
npm startContributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- More font pairings (50+ goal)
- Variable font controls
- Dark mode toggle
- Export to Figma
- User accounts for cloud sync
- API for programmatic access
If Fontkin saves you time, consider supporting the project:
This project is open source and available under the MIT License.
- Google Fonts for the incredible font library
- Vercel for hosting
- The design and developer community for inspiration
Obi Batbileg
- Website: obicreative.dev
- Twitter: @obibatbileg
- GitHub: @ObiBat
- Email: obi@craefto.com
Made with care for designers & developers
fontkin.com