Google Fonts
Typography setup for web projects. Font pairings + performance optimization.
When to Use
-
Setting up project fonts
-
Need font pairing recommendations
-
Optimizing font loading
Process
SELECT → CONFIGURE → APPLY
-
Choose fonts for project type
-
Configure in Next.js
-
Add to Tailwind
Quick Start (Next.js)
// lib/fonts.ts import { Inter, Plus_Jakarta_Sans } from 'next/font/google'
export const inter = Inter({ subsets: ['latin'], display: 'swap', variable: '--font-inter', })
export const jakarta = Plus_Jakarta_Sans({ subsets: ['latin'], display: 'swap', variable: '--font-jakarta', })
// app/layout.tsx
<html className={${inter.variable} ${jakarta.variable}}>
// tailwind.config.ts fontFamily: { sans: ['var(--font-inter)'], display: ['var(--font-jakarta)'], }
Font Pairing Presets
Modern SaaS: Heading: Plus Jakarta Sans Body: Inter
Corporate: Heading: Source Sans 3 Body: Source Serif 4
Editorial: Heading: Playfair Display Body: Lora
Tech/Dev: Heading: Geist Body: Inter Code: Geist Mono
Startup/Friendly: Heading: Outfit Body: Nunito
Top Font Choices
Font Category Best For
Inter Sans Universal default
Plus Jakarta Sans Sans Modern SaaS
DM Sans Sans Clean startups
Geist Sans Dev tools
Playfair Display Serif Elegant headlines
Lora Serif Long-form reading
JetBrains Mono Mono Code blocks
Performance Tips
Variable fonts: Use Inter, not Roboto with weight array Subset: Only 'latin' unless multilingual Display swap: Always set display: 'swap' Self-host: next/font auto self-hosts (no external requests)
Typography Scale
text-xs: 12px text-sm: 14px text-base: 16px text-lg: 18px text-xl: 20px text-2xl: 24px text-3xl: 30px text-4xl: 36px
Decision by Project Type
Type Heading Body
SaaS Dashboard Inter Inter
Marketing Site Plus Jakarta Inter
Blog Playfair Display Lora
Dev Docs Geist Inter
Enterprise Source Sans Source Serif
Resources: