{ "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;" }, "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;" }, "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;" }, "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;" }, "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;" }, "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;" } }, "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" } }, "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" } }, "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" } }, "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" } } } }