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