{ "singleFonts": { "interTight": { "name": "Inter Tight", "import": "import { Inter_Tight } from \"next/font/google\";", "initialization": "const interTight = Inter_Tight({\n variable: \"--font-inter-tight\",\n subsets: [\"latin\"],\n weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n});", "className": "${interTight.variable}", "cssVariable": "font-family: var(--font-inter-tight), sans-serif;" }, "inter": { "name": "Inter", "import": "import { Inter } from \"next/font/google\";", "initialization": "const inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "className": "${inter.variable}", "cssVariable": "font-family: var(--font-inter), sans-serif;" }, "poppins": { "name": "Poppins", "import": "import { Poppins } from \"next/font/google\";", "initialization": "const poppins = Poppins({\n variable: \"--font-poppins\",\n subsets: [\"latin\"],\n weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n});", "className": "${poppins.variable}", "cssVariable": "font-family: var(--font-poppins), sans-serif;" }, "montserrat": { "name": "Montserrat", "import": "import { Montserrat } from \"next/font/google\";", "initialization": "const montserrat = Montserrat({\n variable: \"--font-montserrat\",\n subsets: [\"latin\"],\n});", "className": "${montserrat.variable}", "cssVariable": "font-family: var(--font-montserrat), sans-serif;" }, "roboto": { "name": "Roboto", "import": "import { Roboto } from \"next/font/google\";", "initialization": "const roboto = Roboto({\n variable: \"--font-roboto\",\n subsets: [\"latin\"],\n weight: [\"100\", \"300\", \"400\", \"500\", \"700\", \"900\"],\n});", "className": "${roboto.variable}", "cssVariable": "font-family: var(--font-roboto), sans-serif;" }, "openSans": { "name": "Open Sans", "import": "import { Open_Sans } from \"next/font/google\";", "initialization": "const openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});", "className": "${openSans.variable}", "cssVariable": "font-family: var(--font-open-sans), sans-serif;" }, "lato": { "name": "Lato", "import": "import { Lato } from \"next/font/google\";", "initialization": "const lato = Lato({\n variable: \"--font-lato\",\n subsets: [\"latin\"],\n weight: [\"100\", \"300\", \"400\", \"700\", \"900\"],\n});", "className": "${lato.variable}", "cssVariable": "font-family: var(--font-lato), sans-serif;" }, "workSans": { "name": "Work Sans", "import": "import { Work_Sans } from \"next/font/google\";", "initialization": "const workSans = Work_Sans({\n variable: \"--font-work-sans\",\n subsets: [\"latin\"],\n});", "className": "${workSans.variable}", "cssVariable": "font-family: var(--font-work-sans), sans-serif;" }, "spaceGrotesk": { "name": "Space Grotesk", "import": "import { Space_Grotesk } from \"next/font/google\";", "initialization": "const spaceGrotesk = Space_Grotesk({\n variable: \"--font-space-grotesk\",\n subsets: [\"latin\"],\n});", "className": "${spaceGrotesk.variable}", "cssVariable": "font-family: var(--font-space-grotesk), sans-serif;" }, "dmSans": { "name": "DM Sans", "import": "import { DM_Sans } from \"next/font/google\";", "initialization": "const dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});", "className": "${dmSans.variable}", "cssVariable": "font-family: var(--font-dm-sans), sans-serif;" }, "plusJakartaSans": { "name": "Plus Jakarta Sans", "import": "import { Plus_Jakarta_Sans } from \"next/font/google\";", "initialization": "const plusJakartaSans = Plus_Jakarta_Sans({\n variable: \"--font-plus-jakarta-sans\",\n subsets: [\"latin\"],\n});", "className": "${plusJakartaSans.variable}", "cssVariable": "font-family: var(--font-plus-jakarta-sans), sans-serif;" }, "manrope": { "name": "Manrope", "import": "import { Manrope } from \"next/font/google\";", "initialization": "const manrope = Manrope({\n variable: \"--font-manrope\",\n subsets: [\"latin\"],\n});", "className": "${manrope.variable}", "cssVariable": "font-family: var(--font-manrope), sans-serif;" }, "outfit": { "name": "Outfit", "import": "import { Outfit } from \"next/font/google\";", "initialization": "const outfit = Outfit({\n variable: \"--font-outfit\",\n subsets: [\"latin\"],\n});", "className": "${outfit.variable}", "cssVariable": "font-family: var(--font-outfit), sans-serif;" }, "rubik": { "name": "Rubik", "import": "import { Rubik } from \"next/font/google\";", "initialization": "const rubik = Rubik({\n variable: \"--font-rubik\",\n subsets: [\"latin\"],\n});", "className": "${rubik.variable}", "cssVariable": "font-family: var(--font-rubik), sans-serif;" }, "playfairDisplay": { "name": "Playfair Display", "import": "import { Playfair_Display } from \"next/font/google\";", "initialization": "const playfairDisplay = Playfair_Display({\n variable: \"--font-playfair-display\",\n subsets: [\"latin\"],\n});", "className": "${playfairDisplay.variable}", "cssVariable": "font-family: var(--font-playfair-display), serif;", "category": "serif" }, "merriweather": { "name": "Merriweather", "import": "import { Merriweather } from \"next/font/google\";", "initialization": "const merriweather = Merriweather({\n variable: \"--font-merriweather\",\n subsets: [\"latin\"],\n weight: [\"300\", \"400\", \"700\", \"900\"],\n});", "className": "${merriweather.variable}", "cssVariable": "font-family: var(--font-merriweather), serif;", "category": "serif" }, "sourceSerif4": { "name": "Source Serif 4", "import": "import { Source_Serif_4 } from \"next/font/google\";", "initialization": "const sourceSerif4 = Source_Serif_4({\n variable: \"--font-source-serif-4\",\n subsets: [\"latin\"],\n});", "className": "${sourceSerif4.variable}", "cssVariable": "font-family: var(--font-source-serif-4), serif;", "category": "serif" }, "jetBrainsMono": { "name": "JetBrains Mono", "import": "import { JetBrains_Mono } from \"next/font/google\";", "initialization": "const jetBrainsMono = JetBrains_Mono({\n variable: \"--font-jetbrains-mono\",\n subsets: [\"latin\"],\n});", "className": "${jetBrainsMono.variable}", "cssVariable": "font-family: var(--font-jetbrains-mono), monospace;", "category": "monospace" }, "firaCode": { "name": "Fira Code", "import": "import { Fira_Code } from \"next/font/google\";", "initialization": "const firaCode = Fira_Code({\n variable: \"--font-fira-code\",\n subsets: [\"latin\"],\n});", "className": "${firaCode.variable}", "cssVariable": "font-family: var(--font-fira-code), monospace;", "category": "monospace" }, "sourceCodePro": { "name": "Source Code Pro", "import": "import { Source_Code_Pro } from \"next/font/google\";", "initialization": "const sourceCodePro = Source_Code_Pro({\n variable: \"--font-source-code-pro\",\n subsets: [\"latin\"],\n});", "className": "${sourceCodePro.variable}", "cssVariable": "font-family: var(--font-source-code-pro), monospace;", "category": "monospace" }, "sourceSans3": { "name": "Source Sans 3", "import": "import { Source_Sans_3 } from \"next/font/google\";", "initialization": "const sourceSans3 = Source_Sans_3({\n variable: \"--font-source-sans-3\",\n subsets: [\"latin\"],\n});", "className": "${sourceSans3.variable}", "cssVariable": "font-family: var(--font-source-sans-3), sans-serif;" }, "nunito": { "name": "Nunito", "import": "import { Nunito } from \"next/font/google\";", "initialization": "const nunito = Nunito({\n variable: \"--font-nunito\",\n subsets: [\"latin\"],\n});", "className": "${nunito.variable}", "cssVariable": "font-family: var(--font-nunito), sans-serif;" }, "cormorantGaramond": { "name": "Cormorant Garamond", "import": "import { Cormorant_Garamond } from \"next/font/google\";", "initialization": "const cormorantGaramond = Cormorant_Garamond({\n variable: \"--font-cormorant-garamond\",\n subsets: [\"latin\"],\n weight: [\"300\", \"400\", \"500\", \"600\", \"700\"],\n});", "className": "${cormorantGaramond.variable}", "cssVariable": "font-family: var(--font-cormorant-garamond), serif;", "category": "serif" }, "lora": { "name": "Lora", "import": "import { Lora } from \"next/font/google\";", "initialization": "const lora = Lora({\n variable: \"--font-lora\",\n subsets: [\"latin\"],\n});", "className": "${lora.variable}", "cssVariable": "font-family: var(--font-lora), serif;", "category": "serif" }, "publicSans": { "name": "Public Sans", "import": "import { Public_Sans } from \"next/font/google\";", "initialization": "const publicSans = Public_Sans({\n variable: \"--font-public-sans\",\n subsets: [\"latin\"],\n});", "className": "${publicSans.variable}", "cssVariable": "font-family: var(--font-public-sans), sans-serif;" }, "notoSans": { "name": "Noto Sans", "import": "import { Noto_Sans } from \"next/font/google\";", "initialization": "const notoSans = Noto_Sans({\n variable: \"--font-noto-sans\",\n subsets: [\"latin\"],\n});", "className": "${notoSans.variable}", "cssVariable": "font-family: var(--font-noto-sans), sans-serif;" }, "mulish": { "name": "Mulish", "import": "import { Mulish } from \"next/font/google\";", "initialization": "const mulish = Mulish({\n variable: \"--font-mulish\",\n subsets: [\"latin\"],\n});", "className": "${mulish.variable}", "cssVariable": "font-family: var(--font-mulish), sans-serif;" }, "fraunces": { "name": "Fraunces", "import": "import { Fraunces } from \"next/font/google\";", "initialization": "const fraunces = Fraunces({\n variable: \"--font-fraunces\",\n subsets: [\"latin\"],\n});", "className": "${fraunces.variable}", "cssVariable": "font-family: var(--font-fraunces), serif;", "category": "serif" }, "dmSerifDisplay": { "name": "DM Serif Display", "import": "import { DM_Serif_Display } from \"next/font/google\";", "initialization": "const dmSerifDisplay = DM_Serif_Display({\n variable: \"--font-dm-serif-display\",\n subsets: [\"latin\"],\n weight: [\"400\"],\n});", "className": "${dmSerifDisplay.variable}", "cssVariable": "font-family: var(--font-dm-serif-display), serif;", "category": "serif" }, "prata": { "name": "Prata", "import": "import { Prata } from \"next/font/google\";", "initialization": "const prata = Prata({\n variable: \"--font-prata\",\n subsets: [\"latin\"],\n weight: [\"400\"],\n});", "className": "${prata.variable}", "cssVariable": "font-family: var(--font-prata), serif;", "category": "serif" }, "epilogue": { "name": "Epilogue", "import": "import { Epilogue } from \"next/font/google\";", "initialization": "const epilogue = Epilogue({\n variable: \"--font-epilogue\",\n subsets: [\"latin\"],\n});", "className": "${epilogue.variable}", "cssVariable": "font-family: var(--font-epilogue), sans-serif;" }, "cormorant": { "name": "Cormorant", "import": "import { Cormorant } from \"next/font/google\";", "initialization": "const cormorant = Cormorant({\n variable: \"--font-cormorant\",\n subsets: [\"latin\"],\n});", "className": "${cormorant.variable}", "cssVariable": "font-family: var(--font-cormorant), serif;", "category": "serif" }, "ibmPlexSans": { "name": "IBM Plex Sans", "import": "import { IBM_Plex_Sans } from \"next/font/google\";", "initialization": "const ibmPlexSans = IBM_Plex_Sans({\n variable: \"--font-ibm-plex-sans\",\n subsets: [\"latin\"],\n weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\"],\n});", "className": "${ibmPlexSans.variable}", "cssVariable": "font-family: var(--font-ibm-plex-sans), sans-serif;" }, "sora": { "name": "Sora", "import": "import { Sora } from \"next/font/google\";", "initialization": "const sora = Sora({\n variable: \"--font-sora\",\n subsets: [\"latin\"],\n});", "className": "${sora.variable}", "cssVariable": "font-family: var(--font-sora), sans-serif;" }, "spectral": { "name": "Spectral", "import": "import { Spectral } from \"next/font/google\";", "initialization": "const spectral = Spectral({\n variable: \"--font-spectral\",\n subsets: [\"latin\"],\n weight: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\"],\n});", "className": "${spectral.variable}", "cssVariable": "font-family: var(--font-spectral), serif;", "category": "serif" } }, "fontPairings": { "interOpenSans": { "name": "Inter + Open Sans", "description": "Neutral headings with friendly body. Clean and approachable.", "headingFont": "inter", "bodyFont": "openSans", "imports": "import { Inter } from \"next/font/google\";\nimport { Open_Sans } from \"next/font/google\";", "initializations": "const inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});\n\nconst openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});", "classNames": "${inter.variable} ${openSans.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-open-sans), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-inter), sans-serif;\n}", "bodyFontFamily": "var(--font-open-sans), sans-serif", "headingsFontFamily": "var(--font-inter), sans-serif" } }, "dmSansInter": { "name": "DM Sans + Inter", "description": "Modern geometric headings with neutral body. Contemporary and clean.", "headingFont": "dmSans", "bodyFont": "inter", "imports": "import { DM_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${dmSans.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-dm-sans), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-dm-sans), sans-serif" } }, "workSansSourceSans3": { "name": "Work Sans + Source Sans 3", "description": "Versatile headings with modern body. Professional and balanced.", "headingFont": "workSans", "bodyFont": "sourceSans3", "imports": "import { Work_Sans } from \"next/font/google\";\nimport { Source_Sans_3 } from \"next/font/google\";", "initializations": "const workSans = Work_Sans({\n variable: \"--font-work-sans\",\n subsets: [\"latin\"],\n});\n\nconst sourceSans3 = Source_Sans_3({\n variable: \"--font-source-sans-3\",\n subsets: [\"latin\"],\n});", "classNames": "${workSans.variable} ${sourceSans3.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-source-sans-3), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-work-sans), sans-serif;\n}", "bodyFontFamily": "var(--font-source-sans-3), sans-serif", "headingsFontFamily": "var(--font-work-sans), sans-serif" } }, "manropeDmSans": { "name": "Manrope + DM Sans", "description": "Geometric headings with clean body. Modern and professional.", "headingFont": "manrope", "bodyFont": "dmSans", "imports": "import { Manrope } from \"next/font/google\";\nimport { DM_Sans } from \"next/font/google\";", "initializations": "const manrope = Manrope({\n variable: \"--font-manrope\",\n subsets: [\"latin\"],\n});\n\nconst dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});", "classNames": "${manrope.variable} ${dmSans.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-dm-sans), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-manrope), sans-serif;\n}", "bodyFontFamily": "var(--font-dm-sans), sans-serif", "headingsFontFamily": "var(--font-manrope), sans-serif" } }, "playfairNunito": { "name": "Playfair Display + Nunito", "description": "Classic serif headings with friendly rounded body. Elegant and approachable.", "headingFont": "playfairDisplay", "bodyFont": "nunito", "imports": "import { Playfair_Display } from \"next/font/google\";\nimport { Nunito } from \"next/font/google\";", "initializations": "const playfairDisplay = Playfair_Display({\n variable: \"--font-playfair-display\",\n subsets: [\"latin\"],\n});\n\nconst nunito = Nunito({\n variable: \"--font-nunito\",\n subsets: [\"latin\"],\n});", "classNames": "${playfairDisplay.variable} ${nunito.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-nunito), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-playfair-display), serif;\n}", "bodyFontFamily": "var(--font-nunito), sans-serif", "headingsFontFamily": "var(--font-playfair-display), serif" } }, "cormorantGaramondInter": { "name": "Cormorant Garamond + Inter", "description": "Elegant serif headings with neutral body. Sophisticated and modern.", "headingFont": "cormorantGaramond", "bodyFont": "inter", "imports": "import { Cormorant_Garamond } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const cormorantGaramond = Cormorant_Garamond({\n variable: \"--font-cormorant-garamond\",\n subsets: [\"latin\"],\n weight: [\"300\", \"400\", \"500\", \"600\", \"700\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${cormorantGaramond.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-cormorant-garamond), serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-cormorant-garamond), serif" } }, "loraSourceSans3": { "name": "Lora + Source Sans 3", "description": "Readable serif headings with modern body. Editorial and professional.", "headingFont": "lora", "bodyFont": "sourceSans3", "imports": "import { Lora } from \"next/font/google\";\nimport { Source_Sans_3 } from \"next/font/google\";", "initializations": "const lora = Lora({\n variable: \"--font-lora\",\n subsets: [\"latin\"],\n});\n\nconst sourceSans3 = Source_Sans_3({\n variable: \"--font-source-sans-3\",\n subsets: [\"latin\"],\n});", "classNames": "${lora.variable} ${sourceSans3.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-source-sans-3), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-lora), serif;\n}", "bodyFontFamily": "var(--font-source-sans-3), sans-serif", "headingsFontFamily": "var(--font-lora), serif" } }, "publicSansInter": { "name": "Public Sans + Inter", "description": "Government-inspired headings with neutral body. Professional and trustworthy.", "headingFont": "publicSans", "bodyFont": "inter", "imports": "import { Public_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const publicSans = Public_Sans({\n variable: \"--font-public-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${publicSans.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-public-sans), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-public-sans), sans-serif" } }, "notoSansInter": { "name": "Noto Sans + Inter", "description": "Universal headings with neutral body. Global and accessible.", "headingFont": "notoSans", "bodyFont": "inter", "imports": "import { Noto_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const notoSans = Noto_Sans({\n variable: \"--font-noto-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${notoSans.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-noto-sans), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-noto-sans), sans-serif" } }, "openSansWorkSans": { "name": "Open Sans + Work Sans", "description": "Friendly headings with versatile body. Approachable and balanced.", "headingFont": "openSans", "bodyFont": "workSans", "imports": "import { Open_Sans } from \"next/font/google\";\nimport { Work_Sans } from \"next/font/google\";", "initializations": "const openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});\n\nconst workSans = Work_Sans({\n variable: \"--font-work-sans\",\n subsets: [\"latin\"],\n});", "classNames": "${openSans.variable} ${workSans.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-work-sans), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-open-sans), sans-serif;\n}", "bodyFontFamily": "var(--font-work-sans), sans-serif", "headingsFontFamily": "var(--font-open-sans), sans-serif" } }, "mulishInter": { "name": "Mulish + Inter", "description": "Minimal headings with neutral body. Clean and modern.", "headingFont": "mulish", "bodyFont": "inter", "imports": "import { Mulish } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const mulish = Mulish({\n variable: \"--font-mulish\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${mulish.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-mulish), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-mulish), sans-serif" } }, "frauncesInter": { "name": "Fraunces + Inter", "description": "Distinctive serif headings with neutral body. Bold and modern.", "headingFont": "fraunces", "bodyFont": "inter", "imports": "import { Fraunces } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const fraunces = Fraunces({\n variable: \"--font-fraunces\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${fraunces.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-fraunces), serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-fraunces), serif" } }, "dmSerifDisplayDmSans": { "name": "DM Serif Display + DM Sans", "description": "Elegant serif headings with clean sans-serif body. Cohesive DM family pairing.", "headingFont": "dmSerifDisplay", "bodyFont": "dmSans", "imports": "import { DM_Serif_Display } from \"next/font/google\";\nimport { DM_Sans } from \"next/font/google\";", "initializations": "const dmSerifDisplay = DM_Serif_Display({\n variable: \"--font-dm-serif-display\",\n subsets: [\"latin\"],\n weight: [\"400\"],\n});\n\nconst dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});", "classNames": "${dmSerifDisplay.variable} ${dmSans.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-dm-sans), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-dm-serif-display), serif;\n}", "bodyFontFamily": "var(--font-dm-sans), sans-serif", "headingsFontFamily": "var(--font-dm-serif-display), serif" } }, "prataInter": { "name": "Prata + Inter", "description": "Elegant display serif headings with neutral body. Sophisticated and refined.", "headingFont": "prata", "bodyFont": "inter", "imports": "import { Prata } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const prata = Prata({\n variable: \"--font-prata\",\n subsets: [\"latin\"],\n weight: [\"400\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${prata.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-prata), serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-prata), serif" } }, "epilogueInter": { "name": "Epilogue + Inter", "description": "Modern variable headings with neutral body. Contemporary and flexible.", "headingFont": "epilogue", "bodyFont": "inter", "imports": "import { Epilogue } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const epilogue = Epilogue({\n variable: \"--font-epilogue\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${epilogue.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-epilogue), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-epilogue), sans-serif" } }, "plusJakartaSansInter": { "name": "Plus Jakarta Sans + Inter", "description": "Friendly rounded headings with neutral body. Approachable and modern.", "headingFont": "plusJakartaSans", "bodyFont": "inter", "imports": "import { Plus_Jakarta_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const plusJakartaSans = Plus_Jakarta_Sans({\n variable: \"--font-plus-jakarta-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${plusJakartaSans.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-plus-jakarta-sans), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-plus-jakarta-sans), sans-serif" } }, "nunitoInter": { "name": "Nunito + Inter", "description": "Rounded friendly headings with neutral body. Warm and approachable.", "headingFont": "nunito", "bodyFont": "inter", "imports": "import { Nunito } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const nunito = Nunito({\n variable: \"--font-nunito\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${nunito.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-nunito), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-nunito), sans-serif" } }, "merriweatherOpenSans": { "name": "Merriweather + Open Sans", "description": "Classic serif headings with friendly body. Readable and approachable.", "headingFont": "merriweather", "bodyFont": "openSans", "imports": "import { Merriweather } from \"next/font/google\";\nimport { Open_Sans } from \"next/font/google\";", "initializations": "const merriweather = Merriweather({\n variable: \"--font-merriweather\",\n subsets: [\"latin\"],\n weight: [\"300\", \"400\", \"700\", \"900\"],\n});\n\nconst openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});", "classNames": "${merriweather.variable} ${openSans.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-open-sans), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-merriweather), serif;\n}", "bodyFontFamily": "var(--font-open-sans), sans-serif", "headingsFontFamily": "var(--font-merriweather), serif" } }, "cormorantLora": { "name": "Cormorant + Lora", "description": "Elegant serif headings with readable serif body. Classic and refined.", "headingFont": "cormorant", "bodyFont": "lora", "imports": "import { Cormorant } from \"next/font/google\";\nimport { Lora } from \"next/font/google\";", "initializations": "const cormorant = Cormorant({\n variable: \"--font-cormorant\",\n subsets: [\"latin\"],\n});\n\nconst lora = Lora({\n variable: \"--font-lora\",\n subsets: [\"latin\"],\n});", "classNames": "${cormorant.variable} ${lora.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-lora), serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-cormorant), serif;\n}", "bodyFontFamily": "var(--font-lora), serif", "headingsFontFamily": "var(--font-cormorant), serif" } }, "montserratInter": { "name": "Montserrat + Inter", "description": "Geometric sans-serif headings with neutral body. Popular and reliable.", "headingFont": "montserrat", "bodyFont": "inter", "imports": "import { Montserrat } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const montserrat = Montserrat({\n variable: \"--font-montserrat\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${montserrat.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-montserrat), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-montserrat), sans-serif" } }, "spaceGroteskInter": { "name": "Space Grotesk + Inter", "description": "Modern geometric headings with neutral body. Tech-forward and contemporary.", "headingFont": "spaceGrotesk", "bodyFont": "inter", "imports": "import { Space_Grotesk } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const spaceGrotesk = Space_Grotesk({\n variable: \"--font-space-grotesk\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${spaceGrotesk.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-space-grotesk), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-space-grotesk), sans-serif" } }, "spectralInter": { "name": "Spectral + Inter", "description": "Screen-optimized serif headings with neutral body. Digital-first and readable.", "headingFont": "spectral", "bodyFont": "inter", "imports": "import { Spectral } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const spectral = Spectral({\n variable: \"--font-spectral\",\n subsets: [\"latin\"],\n weight: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${spectral.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-spectral), serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-spectral), serif" } }, "soraInter": { "name": "Sora + Inter", "description": "Modern geometric headings with neutral body. Perfect for SaaS and tech products.", "headingFont": "sora", "bodyFont": "inter", "imports": "import { Sora } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";", "initializations": "const sora = Sora({\n variable: \"--font-sora\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});", "classNames": "${sora.variable} ${inter.variable}", "globalsCss": { "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)", "bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}", "headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-sora), sans-serif;\n}", "bodyFontFamily": "var(--font-inter), sans-serif", "headingsFontFamily": "var(--font-sora), sans-serif" } } } }