633 lines
39 KiB
JSON
633 lines
39 KiB
JSON
{
|
|
"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"
|
|
}
|
|
}
|
|
}
|
|
}
|