[
{
"No": "1",
"Font Pairing Name": "Classic Elegant",
"Category": "Serif + Sans",
"Heading Font": "Playfair Display",
"Body Font": "Inter",
"Mood/Style Keywords": "elegant, luxury, sophisticated, timeless, premium, editorial",
"Best For": "Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700|Playfair+Display:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Playfair Display', 'serif'], sans: ['Inter', 'sans-serif'] }",
"Notes": "High contrast between elegant heading and clean body. Perfect for luxury/premium."
},
{
"No": "2",
"Font Pairing Name": "Modern Professional",
"Category": "Sans + Sans",
"Heading Font": "Poppins",
"Body Font": "Open Sans",
"Mood/Style Keywords": "modern, professional, clean, corporate, friendly, approachable",
"Best For": "SaaS, corporate sites, business apps, startups, professional services",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Open+Sans:wght@300;400;500;600;700|Poppins:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Poppins', 'sans-serif'], body: ['Open Sans', 'sans-serif'] }",
"Notes": "Geometric Poppins for headings, humanist Open Sans for readability."
},
{
"No": "3",
"Font Pairing Name": "Tech Startup",
"Category": "Sans + Sans",
"Heading Font": "Space Grotesk",
"Body Font": "DM Sans",
"Mood/Style Keywords": "tech, startup, modern, innovative, bold, futuristic",
"Best For": "Tech companies, startups, SaaS, developer tools, AI products",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700|Space+Grotesk:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }",
"Notes": "Space Grotesk has unique character, DM Sans is highly readable."
},
{
"No": "4",
"Font Pairing Name": "Editorial Classic",
"Category": "Serif + Serif",
"Heading Font": "Cormorant Garamond",
"Body Font": "Libre Baskerville",
"Mood/Style Keywords": "editorial, classic, literary, traditional, refined, bookish",
"Best For": "Publishing, blogs, news sites, literary magazines, book covers",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Cormorant+Garamond:wght@400;500;600;700|Libre+Baskerville:wght@400;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Libre Baskerville', 'serif'] }",
"Notes": "All-serif pairing for traditional editorial feel."
},
{
"No": "5",
"Font Pairing Name": "Minimal Swiss",
"Category": "Sans + Sans",
"Heading Font": "Inter",
"Body Font": "Inter",
"Mood/Style Keywords": "minimal, clean, swiss, functional, neutral, professional",
"Best For": "Dashboards, admin panels, documentation, enterprise apps, design systems",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Inter', 'sans-serif'] }",
"Notes": "Single font family with weight variations. Ultimate simplicity."
},
{
"No": "6",
"Font Pairing Name": "Playful Creative",
"Category": "Display + Sans",
"Heading Font": "Fredoka",
"Body Font": "Nunito",
"Mood/Style Keywords": "playful, friendly, fun, creative, warm, approachable",
"Best For": "Children's apps, educational, gaming, creative tools, entertainment",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Fredoka:wght@400;500;600;700|Nunito:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Fredoka', 'sans-serif'], body: ['Nunito', 'sans-serif'] }",
"Notes": "Rounded, friendly fonts perfect for playful UIs."
},
{
"No": "7",
"Font Pairing Name": "Bold Statement",
"Category": "Display + Sans",
"Heading Font": "Bebas Neue",
"Body Font": "Source Sans 3",
"Mood/Style Keywords": "bold, impactful, strong, dramatic, modern, headlines",
"Best For": "Marketing sites, portfolios, agencies, event pages, sports",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Bebas+Neue|Source+Sans+3:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Bebas Neue', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }",
"Notes": "Bebas Neue for large headlines only. All-caps display font."
},
{
"No": "8",
"Font Pairing Name": "Wellness Calm",
"Category": "Serif + Sans",
"Heading Font": "Lora",
"Body Font": "Raleway",
"Mood/Style Keywords": "calm, wellness, health, relaxing, natural, organic",
"Best For": "Health apps, wellness, spa, meditation, yoga, organic brands",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Lora:wght@400;500;600;700|Raleway:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Lora', 'serif'], sans: ['Raleway', 'sans-serif'] }",
"Notes": "Lora's organic curves with Raleway's elegant simplicity."
},
{
"No": "9",
"Font Pairing Name": "Developer Mono",
"Category": "Mono + Sans",
"Heading Font": "JetBrains Mono",
"Body Font": "IBM Plex Sans",
"Mood/Style Keywords": "code, developer, technical, precise, functional, hacker",
"Best For": "Developer tools, documentation, code editors, tech blogs, CLI apps",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700|JetBrains+Mono:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['IBM Plex Sans', 'sans-serif'] }",
"Notes": "JetBrains for code, IBM Plex for UI. Developer-focused."
},
{
"No": "10",
"Font Pairing Name": "Retro Vintage",
"Category": "Display + Serif",
"Heading Font": "Abril Fatface",
"Body Font": "Merriweather",
"Mood/Style Keywords": "retro, vintage, nostalgic, dramatic, decorative, bold",
"Best For": "Vintage brands, breweries, restaurants, creative portfolios, posters",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Abril+Fatface|Merriweather:wght@300;400;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Abril Fatface', 'serif'], body: ['Merriweather', 'serif'] }",
"Notes": "Abril Fatface for hero headlines only. High-impact vintage feel."
},
{
"No": "11",
"Font Pairing Name": "Geometric Modern",
"Category": "Sans + Sans",
"Heading Font": "Outfit",
"Body Font": "Work Sans",
"Mood/Style Keywords": "geometric, modern, clean, balanced, contemporary, versatile",
"Best For": "General purpose, portfolios, agencies, modern brands, landing pages",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Outfit:wght@300;400;500;600;700|Work+Sans:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Work Sans', 'sans-serif'] }",
"Notes": "Both geometric but Outfit more distinctive for headings."
},
{
"No": "12",
"Font Pairing Name": "Luxury Serif",
"Category": "Serif + Sans",
"Heading Font": "Cormorant",
"Body Font": "Montserrat",
"Mood/Style Keywords": "luxury, high-end, fashion, elegant, refined, premium",
"Best For": "Fashion brands, luxury e-commerce, jewelry, high-end services",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Cormorant:wght@400;500;600;700|Montserrat:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Cormorant', 'serif'], sans: ['Montserrat', 'sans-serif'] }",
"Notes": "Cormorant's elegance with Montserrat's geometric precision."
},
{
"No": "13",
"Font Pairing Name": "Friendly SaaS",
"Category": "Sans + Sans",
"Heading Font": "Plus Jakarta Sans",
"Body Font": "Plus Jakarta Sans",
"Mood/Style Keywords": "friendly, modern, saas, clean, approachable, professional",
"Best For": "SaaS products, web apps, dashboards, B2B, productivity tools",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Plus+Jakarta+Sans:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }",
"Notes": "Single versatile font. Modern alternative to Inter."
},
{
"No": "14",
"Font Pairing Name": "News Editorial",
"Category": "Serif + Sans",
"Heading Font": "Newsreader",
"Body Font": "Roboto",
"Mood/Style Keywords": "news, editorial, journalism, trustworthy, readable, informative",
"Best For": "News sites, blogs, magazines, journalism, content-heavy sites",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Newsreader:wght@400;500;600;700|Roboto:wght@300;400;500;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Newsreader', 'serif'], sans: ['Roboto', 'sans-serif'] }",
"Notes": "Newsreader designed for long-form reading. Roboto for UI."
},
{
"No": "15",
"Font Pairing Name": "Handwritten Charm",
"Category": "Script + Sans",
"Heading Font": "Caveat",
"Body Font": "Quicksand",
"Mood/Style Keywords": "handwritten, personal, friendly, casual, warm, charming",
"Best For": "Personal blogs, invitations, creative portfolios, lifestyle brands",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Caveat:wght@400;500;600;700|Quicksand:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { script: ['Caveat', 'cursive'], sans: ['Quicksand', 'sans-serif'] }",
"Notes": "Use Caveat sparingly for accents. Quicksand for body."
},
{
"No": "16",
"Font Pairing Name": "Corporate Trust",
"Category": "Sans + Sans",
"Heading Font": "Lexend",
"Body Font": "Source Sans 3",
"Mood/Style Keywords": "corporate, trustworthy, accessible, readable, professional, clean",
"Best For": "Enterprise, government, healthcare, finance, accessibility-focused",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Lexend:wght@300;400;500;600;700|Source+Sans+3:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Lexend', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }",
"Notes": "Lexend designed for readability. Excellent accessibility."
},
{
"No": "17",
"Font Pairing Name": "Brutalist Raw",
"Category": "Mono + Mono",
"Heading Font": "Space Mono",
"Body Font": "Space Mono",
"Mood/Style Keywords": "brutalist, raw, technical, monospace, minimal, stark",
"Best For": "Brutalist designs, developer portfolios, experimental, tech art",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');",
"Tailwind Config": "fontFamily: { mono: ['Space Mono', 'monospace'] }",
"Notes": "All-mono for raw brutalist aesthetic. Limited weights."
},
{
"No": "18",
"Font Pairing Name": "Fashion Forward",
"Category": "Sans + Sans",
"Heading Font": "Syne",
"Body Font": "Manrope",
"Mood/Style Keywords": "fashion, avant-garde, creative, bold, artistic, edgy",
"Best For": "Fashion brands, creative agencies, art galleries, design studios",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Manrope:wght@300;400;500;600;700|Syne:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Syne', 'sans-serif'], body: ['Manrope', 'sans-serif'] }",
"Notes": "Syne's unique character for headlines. Manrope for readability."
},
{
"No": "19",
"Font Pairing Name": "Soft Rounded",
"Category": "Sans + Sans",
"Heading Font": "Varela Round",
"Body Font": "Nunito Sans",
"Mood/Style Keywords": "soft, rounded, friendly, approachable, warm, gentle",
"Best For": "Children's products, pet apps, friendly brands, wellness, soft UI",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700|Varela+Round",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Varela Round', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }",
"Notes": "Both rounded and friendly. Perfect for soft UI designs."
},
{
"No": "20",
"Font Pairing Name": "Premium Sans",
"Category": "Sans + Sans",
"Heading Font": "Satoshi",
"Body Font": "General Sans",
"Mood/Style Keywords": "premium, modern, clean, sophisticated, versatile, balanced",
"Best For": "Premium brands, modern agencies, SaaS, portfolios, startups",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['DM Sans', 'sans-serif'] }",
"Notes": "Note: Satoshi/General Sans on Fontshare. DM Sans as Google alternative."
},
{
"No": "21",
"Font Pairing Name": "Vietnamese Friendly",
"Category": "Sans + Sans",
"Heading Font": "Be Vietnam Pro",
"Body Font": "Noto Sans",
"Mood/Style Keywords": "vietnamese, international, readable, clean, multilingual, accessible",
"Best For": "Vietnamese sites, multilingual apps, international products",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Be+Vietnam+Pro:wght@300;400;500;600;700|Noto+Sans:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Be Vietnam Pro', 'Noto Sans', 'sans-serif'] }",
"Notes": "Be Vietnam Pro excellent Vietnamese support. Noto as fallback."
},
{
"No": "22",
"Font Pairing Name": "Japanese Elegant",
"Category": "Serif + Sans",
"Heading Font": "Noto Serif JP",
"Body Font": "Noto Sans JP",
"Mood/Style Keywords": "japanese, elegant, traditional, modern, multilingual, readable",
"Best For": "Japanese sites, Japanese restaurants, cultural sites, anime/manga",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Noto+Sans+JP:wght@300;400;500;700|Noto+Serif+JP:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Noto Serif JP', 'serif'], sans: ['Noto Sans JP', 'sans-serif'] }",
"Notes": "Noto fonts excellent Japanese support. Traditional + modern feel."
},
{
"No": "23",
"Font Pairing Name": "Korean Modern",
"Category": "Sans + Sans",
"Heading Font": "Noto Sans KR",
"Body Font": "Noto Sans KR",
"Mood/Style Keywords": "korean, modern, clean, professional, multilingual, readable",
"Best For": "Korean sites, K-beauty, K-pop, Korean businesses, multilingual",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Noto+Sans+KR:wght@300;400;500;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Noto Sans KR', 'sans-serif'] }",
"Notes": "Clean Korean typography. Single font with weight variations."
},
{
"No": "24",
"Font Pairing Name": "Chinese Traditional",
"Category": "Serif + Sans",
"Heading Font": "Noto Serif TC",
"Body Font": "Noto Sans TC",
"Mood/Style Keywords": "chinese, traditional, elegant, cultural, multilingual, readable",
"Best For": "Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Noto+Sans+TC:wght@300;400;500;700|Noto+Serif+TC:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Noto Serif TC', 'serif'], sans: ['Noto Sans TC', 'sans-serif'] }",
"Notes": "Traditional Chinese character support. Elegant pairing."
},
{
"No": "25",
"Font Pairing Name": "Chinese Simplified",
"Category": "Sans + Sans",
"Heading Font": "Noto Sans SC",
"Body Font": "Noto Sans SC",
"Mood/Style Keywords": "chinese, simplified, modern, professional, multilingual, readable",
"Best For": "Simplified Chinese sites, mainland China market, business apps",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Noto+Sans+SC:wght@300;400;500;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }",
"Notes": "Simplified Chinese support. Clean modern look."
},
{
"No": "26",
"Font Pairing Name": "Arabic Elegant",
"Category": "Serif + Sans",
"Heading Font": "Noto Naskh Arabic",
"Body Font": "Noto Sans Arabic",
"Mood/Style Keywords": "arabic, elegant, traditional, cultural, RTL, readable",
"Best For": "Arabic sites, Middle East market, Islamic content, bilingual sites",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Noto+Naskh+Arabic:wght@400;500;600;700|Noto+Sans+Arabic:wght@300;400;500;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Noto Naskh Arabic', 'serif'], sans: ['Noto Sans Arabic', 'sans-serif'] }",
"Notes": "RTL support. Naskh for traditional, Sans for modern Arabic."
},
{
"No": "27",
"Font Pairing Name": "Thai Modern",
"Category": "Sans + Sans",
"Heading Font": "Noto Sans Thai",
"Body Font": "Noto Sans Thai",
"Mood/Style Keywords": "thai, modern, readable, clean, multilingual, accessible",
"Best For": "Thai sites, Southeast Asia, tourism, Thai restaurants",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Noto+Sans+Thai:wght@300;400;500;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Noto Sans Thai', 'sans-serif'] }",
"Notes": "Clean Thai typography. Excellent readability."
},
{
"No": "28",
"Font Pairing Name": "Hebrew Modern",
"Category": "Sans + Sans",
"Heading Font": "Noto Sans Hebrew",
"Body Font": "Noto Sans Hebrew",
"Mood/Style Keywords": "hebrew, modern, RTL, clean, professional, readable",
"Best For": "Hebrew sites, Israeli market, Jewish content, bilingual sites",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Noto+Sans+Hebrew:wght@300;400;500;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Noto Sans Hebrew', 'sans-serif'] }",
"Notes": "RTL support. Clean modern Hebrew typography."
},
{
"No": "29",
"Font Pairing Name": "Legal Professional",
"Category": "Serif + Sans",
"Heading Font": "EB Garamond",
"Body Font": "Lato",
"Mood/Style Keywords": "legal, professional, traditional, trustworthy, formal, authoritative",
"Best For": "Law firms, legal services, contracts, formal documents, government",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=EB+Garamond:wght@400;500;600;700|Lato:wght@300;400;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['EB Garamond', 'serif'], sans: ['Lato', 'sans-serif'] }",
"Notes": "EB Garamond for authority. Lato for clean body text."
},
{
"No": "30",
"Font Pairing Name": "Medical Clean",
"Category": "Sans + Sans",
"Heading Font": "Figtree",
"Body Font": "Noto Sans",
"Mood/Style Keywords": "medical, clean, accessible, professional, healthcare, trustworthy",
"Best For": "Healthcare, medical clinics, pharma, health apps, accessibility",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Figtree:wght@300;400;500;600;700|Noto+Sans:wght@300;400;500;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Figtree', 'sans-serif'], body: ['Noto Sans', 'sans-serif'] }",
"Notes": "Clean, accessible fonts for medical contexts."
},
{
"No": "31",
"Font Pairing Name": "Financial Trust",
"Category": "Sans + Sans",
"Heading Font": "IBM Plex Sans",
"Body Font": "IBM Plex Sans",
"Mood/Style Keywords": "financial, trustworthy, professional, corporate, banking, serious",
"Best For": "Banks, finance, insurance, investment, fintech, enterprise",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['IBM Plex Sans', 'sans-serif'] }",
"Notes": "IBM Plex conveys trust and professionalism. Excellent for data."
},
{
"No": "32",
"Font Pairing Name": "Real Estate Luxury",
"Category": "Serif + Sans",
"Heading Font": "Cinzel",
"Body Font": "Josefin Sans",
"Mood/Style Keywords": "real estate, luxury, elegant, sophisticated, property, premium",
"Best For": "Real estate, luxury properties, architecture, interior design",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Cinzel:wght@400;500;600;700|Josefin+Sans:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Cinzel', 'serif'], sans: ['Josefin Sans', 'sans-serif'] }",
"Notes": "Cinzel's elegance for headlines. Josefin for modern body."
},
{
"No": "33",
"Font Pairing Name": "Restaurant Menu",
"Category": "Serif + Sans",
"Heading Font": "Playfair Display SC",
"Body Font": "Karla",
"Mood/Style Keywords": "restaurant, menu, culinary, elegant, foodie, hospitality",
"Best For": "Restaurants, cafes, food blogs, culinary, hospitality",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Karla:wght@300;400;500;600;700|Playfair+Display+SC:wght@400;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display+SC:wght@400;700&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Playfair Display SC', 'serif'], sans: ['Karla', 'sans-serif'] }",
"Notes": "Small caps Playfair for menu headers. Karla for descriptions."
},
{
"No": "34",
"Font Pairing Name": "Art Deco",
"Category": "Display + Sans",
"Heading Font": "Poiret One",
"Body Font": "Didact Gothic",
"Mood/Style Keywords": "art deco, vintage, 1920s, elegant, decorative, gatsby",
"Best For": "Vintage events, art deco themes, luxury hotels, classic cocktails",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Didact+Gothic|Poiret+One",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Poiret One', 'sans-serif'], sans: ['Didact Gothic', 'sans-serif'] }",
"Notes": "Poiret One for art deco headlines only. Didact for body."
},
{
"No": "35",
"Font Pairing Name": "Magazine Style",
"Category": "Serif + Sans",
"Heading Font": "Libre Bodoni",
"Body Font": "Public Sans",
"Mood/Style Keywords": "magazine, editorial, publishing, refined, journalism, print",
"Best For": "Magazines, online publications, editorial content, journalism",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Libre+Bodoni:wght@400;500;600;700|Public+Sans:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Libre Bodoni', 'serif'], sans: ['Public Sans', 'sans-serif'] }",
"Notes": "Bodoni's editorial elegance. Public Sans for clean UI."
},
{
"No": "36",
"Font Pairing Name": "Crypto/Web3",
"Category": "Sans + Sans",
"Heading Font": "Orbitron",
"Body Font": "Exo 2",
"Mood/Style Keywords": "crypto, web3, futuristic, tech, blockchain, digital",
"Best For": "Crypto platforms, NFT, blockchain, web3, futuristic tech",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Exo+2:wght@300;400;500;600;700|Orbitron:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Orbitron', 'sans-serif'], body: ['Exo 2', 'sans-serif'] }",
"Notes": "Orbitron for futuristic headers. Exo 2 for readable body."
},
{
"No": "37",
"Font Pairing Name": "Gaming Bold",
"Category": "Display + Sans",
"Heading Font": "Russo One",
"Body Font": "Chakra Petch",
"Mood/Style Keywords": "gaming, bold, action, esports, competitive, energetic",
"Best For": "Gaming, esports, action games, competitive sports, entertainment",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Chakra+Petch:wght@300;400;500;600;700|Russo+One",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Russo One', 'sans-serif'], body: ['Chakra Petch', 'sans-serif'] }",
"Notes": "Russo One for impact. Chakra Petch for techy body text."
},
{
"No": "38",
"Font Pairing Name": "Indie/Craft",
"Category": "Display + Sans",
"Heading Font": "Amatic SC",
"Body Font": "Cabin",
"Mood/Style Keywords": "indie, craft, handmade, artisan, organic, creative",
"Best For": "Craft brands, indie products, artisan, handmade, organic products",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Amatic+SC:wght@400;700|Cabin:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Amatic SC', 'sans-serif'], sans: ['Cabin', 'sans-serif'] }",
"Notes": "Amatic for handwritten feel. Cabin for readable body."
},
{
"No": "39",
"Font Pairing Name": "Startup Bold",
"Category": "Sans + Sans",
"Heading Font": "Clash Display",
"Body Font": "Satoshi",
"Mood/Style Keywords": "startup, bold, modern, innovative, confident, dynamic",
"Best For": "Startups, pitch decks, product launches, bold brands",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Outfit:wght@400;500;600;700|Rubik:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Rubik', 'sans-serif'] }",
"Notes": "Note: Clash Display on Fontshare. Outfit as Google alternative."
},
{
"No": "40",
"Font Pairing Name": "E-commerce Clean",
"Category": "Sans + Sans",
"Heading Font": "Rubik",
"Body Font": "Nunito Sans",
"Mood/Style Keywords": "ecommerce, clean, shopping, product, retail, conversion",
"Best For": "E-commerce, online stores, product pages, retail, shopping",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700|Rubik:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Rubik', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }",
"Notes": "Clean readable fonts perfect for product descriptions."
},
{
"No": "41",
"Font Pairing Name": "Academic/Research",
"Category": "Serif + Sans",
"Heading Font": "Crimson Pro",
"Body Font": "Atkinson Hyperlegible",
"Mood/Style Keywords": "academic, research, scholarly, accessible, readable, educational",
"Best For": "Universities, research papers, academic journals, educational",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700|Crimson+Pro:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Crimson Pro', 'serif'], sans: ['Atkinson Hyperlegible', 'sans-serif'] }",
"Notes": "Crimson for scholarly headlines. Atkinson for accessibility."
},
{
"No": "42",
"Font Pairing Name": "Dashboard Data",
"Category": "Mono + Sans",
"Heading Font": "Fira Code",
"Body Font": "Fira Sans",
"Mood/Style Keywords": "dashboard, data, analytics, code, technical, precise",
"Best For": "Dashboards, analytics, data visualization, admin panels",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { mono: ['Fira Code', 'monospace'], sans: ['Fira Sans', 'sans-serif'] }",
"Notes": "Fira family cohesion. Code for data, Sans for labels."
},
{
"No": "43",
"Font Pairing Name": "Music/Entertainment",
"Category": "Display + Sans",
"Heading Font": "Righteous",
"Body Font": "Poppins",
"Mood/Style Keywords": "music, entertainment, fun, energetic, bold, performance",
"Best For": "Music platforms, entertainment, events, festivals, performers",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Poppins:wght@300;400;500;600;700|Righteous",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Righteous', 'sans-serif'], sans: ['Poppins', 'sans-serif'] }",
"Notes": "Righteous for bold entertainment headers. Poppins for body."
},
{
"No": "44",
"Font Pairing Name": "Minimalist Portfolio",
"Category": "Sans + Sans",
"Heading Font": "Archivo",
"Body Font": "Space Grotesk",
"Mood/Style Keywords": "minimal, portfolio, designer, creative, clean, artistic",
"Best For": "Design portfolios, creative professionals, minimalist brands",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Archivo:wght@300;400;500;600;700|Space+Grotesk:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Archivo', 'sans-serif'] }",
"Notes": "Space Grotesk for distinctive headers. Archivo for clean body."
},
{
"No": "45",
"Font Pairing Name": "Kids/Education",
"Category": "Display + Sans",
"Heading Font": "Baloo 2",
"Body Font": "Comic Neue",
"Mood/Style Keywords": "kids, education, playful, friendly, colorful, learning",
"Best For": "Children's apps, educational games, kid-friendly content",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Baloo+2:wght@400;500;600;700|Comic+Neue:wght@300;400;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Comic+Neue:wght@300;400;700&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Baloo 2', 'sans-serif'], sans: ['Comic Neue', 'sans-serif'] }",
"Notes": "Fun, playful fonts for children. Comic Neue is readable comic style."
},
{
"No": "46",
"Font Pairing Name": "Wedding/Romance",
"Category": "Script + Serif",
"Heading Font": "Great Vibes",
"Body Font": "Cormorant Infant",
"Mood/Style Keywords": "wedding, romance, elegant, script, invitation, feminine",
"Best For": "Wedding sites, invitations, romantic brands, bridal",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Cormorant+Infant:wght@300;400;500;600;700|Great+Vibes",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&family=Great+Vibes&display=swap');",
"Tailwind Config": "fontFamily: { script: ['Great Vibes', 'cursive'], serif: ['Cormorant Infant', 'serif'] }",
"Notes": "Great Vibes for elegant accents. Cormorant for readable text."
},
{
"No": "47",
"Font Pairing Name": "Science/Tech",
"Category": "Sans + Sans",
"Heading Font": "Exo",
"Body Font": "Roboto Mono",
"Mood/Style Keywords": "science, technology, research, data, futuristic, precise",
"Best For": "Science, research, tech documentation, data-heavy sites",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Exo:wght@300;400;500;600;700|Roboto+Mono:wght@300;400;500;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Exo', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }",
"Notes": "Exo for modern tech feel. Roboto Mono for code/data."
},
{
"No": "48",
"Font Pairing Name": "Accessibility First",
"Category": "Sans + Sans",
"Heading Font": "Atkinson Hyperlegible",
"Body Font": "Atkinson Hyperlegible",
"Mood/Style Keywords": "accessible, readable, inclusive, WCAG, dyslexia-friendly, clear",
"Best For": "Accessibility-critical sites, government, healthcare, inclusive design",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Atkinson Hyperlegible', 'sans-serif'] }",
"Notes": "Designed for maximum legibility. Excellent for accessibility."
},
{
"No": "49",
"Font Pairing Name": "Sports/Fitness",
"Category": "Sans + Sans",
"Heading Font": "Barlow Condensed",
"Body Font": "Barlow",
"Mood/Style Keywords": "sports, fitness, athletic, energetic, condensed, action",
"Best For": "Sports, fitness, gyms, athletic brands, competition",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Barlow+Condensed:wght@400;500;600;700|Barlow:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'] }",
"Notes": "Condensed for impact headlines. Regular Barlow for body."
},
{
"No": "50",
"Font Pairing Name": "Luxury Minimalist",
"Category": "Serif + Sans",
"Heading Font": "Bodoni Moda",
"Body Font": "Jost",
"Mood/Style Keywords": "luxury, minimalist, high-end, sophisticated, refined, premium",
"Best For": "Luxury minimalist brands, high-end fashion, premium products",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Bodoni+Moda:wght@400;500;600;700|Jost:wght@300;400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { serif: ['Bodoni Moda', 'serif'], sans: ['Jost', 'sans-serif'] }",
"Notes": "Bodoni's high contrast elegance. Jost for geometric body."
},
{
"No": "51",
"Font Pairing Name": "Tech/HUD Mono",
"Category": "Mono + Mono",
"Heading Font": "Share Tech Mono",
"Body Font": "Fira Code",
"Mood/Style Keywords": "tech, futuristic, hud, sci-fi, data, monospaced, precise",
"Best For": "Sci-fi interfaces, developer tools, cybersecurity, dashboards",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Fira+Code:wght@300;400;500;600;700|Share+Tech+Mono",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');",
"Tailwind Config": "fontFamily: { hud: ['Share Tech Mono', 'monospace'], code: ['Fira Code', 'monospace'] }",
"Notes": "Share Tech Mono has that classic sci-fi look."
},
{
"No": "52",
"Font Pairing Name": "Pixel Retro",
"Category": "Display + Sans",
"Heading Font": "Press Start 2P",
"Body Font": "VT323",
"Mood/Style Keywords": "pixel, retro, gaming, 8-bit, nostalgic, arcade",
"Best For": "Pixel art games, retro websites, creative portfolios",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Press+Start+2P|VT323",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');",
"Tailwind Config": "fontFamily: { pixel: ['Press Start 2P', 'cursive'], terminal: ['VT323', 'monospace'] }",
"Notes": "Press Start 2P is very wide/large. VT323 is better for body text."
},
{
"No": "53",
"Font Pairing Name": "Neubrutalist Bold",
"Category": "Display + Sans",
"Heading Font": "Lexend Mega",
"Body Font": "Public Sans",
"Mood/Style Keywords": "bold, neubrutalist, loud, strong, geometric, quirky",
"Best For": "Neubrutalist designs, Gen Z brands, bold marketing",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Lexend+Mega:wght@100..900|Public+Sans:wght@100..900",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');",
"Tailwind Config": "fontFamily: { mega: ['Lexend Mega', 'sans-serif'], body: ['Public Sans', 'sans-serif'] }",
"Notes": "Lexend Mega has distinct character and variable weight."
},
{
"No": "54",
"Font Pairing Name": "Academic/Archival",
"Category": "Serif + Serif",
"Heading Font": "EB Garamond",
"Body Font": "Crimson Text",
"Mood/Style Keywords": "academic, old-school, university, research, serious, traditional",
"Best For": "University sites, archives, research papers, history",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Crimson+Text:wght@400;600;700|EB+Garamond:wght@400;500;600;700;800",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=EB+Garamond:wght@400;500;600;700;800&display=swap');",
"Tailwind Config": "fontFamily: { classic: ['EB Garamond', 'serif'], text: ['Crimson Text', 'serif'] }",
"Notes": "Classic academic aesthetic. Very legible."
},
{
"No": "55",
"Font Pairing Name": "Spatial Clear",
"Category": "Sans + Sans",
"Heading Font": "Inter",
"Body Font": "Inter",
"Mood/Style Keywords": "spatial, legible, glass, system, clean, neutral",
"Best For": "Spatial computing, AR/VR, glassmorphism interfaces",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');",
"Tailwind Config": "fontFamily: { sans: ['Inter', 'sans-serif'] }",
"Notes": "Optimized for readability on dynamic backgrounds."
},
{
"No": "56",
"Font Pairing Name": "Kinetic Motion",
"Category": "Display + Mono",
"Heading Font": "Syncopate",
"Body Font": "Space Mono",
"Mood/Style Keywords": "kinetic, motion, futuristic, speed, wide, tech",
"Best For": "Music festivals, automotive, high-energy brands",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700|Syncopate:wght@400;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Syncopate', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",
"Notes": "Syncopate's wide stance works well with motion effects."
},
{
"No": "57",
"Font Pairing Name": "Gen Z Brutal",
"Category": "Display + Sans",
"Heading Font": "Anton",
"Body Font": "Epilogue",
"Mood/Style Keywords": "brutal, loud, shouty, meme, internet, bold",
"Best For": "Gen Z marketing, streetwear, viral campaigns",
"Google Fonts URL": "https://fonts.google.com/share?selection.family=Anton|Epilogue:wght@400;500;600;700",
"CSS Import": "@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap');",
"Tailwind Config": "fontFamily: { display: ['Anton', 'sans-serif'], body: ['Epilogue', 'sans-serif'] }",
"Notes": "Anton is impactful and condensed. Good for stickers/badges."
}
]
