diff --git a/components/fontTransforms.jsx b/components/fontTransforms.jsx index 05cc69f..965d79b 100644 --- a/components/fontTransforms.jsx +++ b/components/fontTransforms.jsx @@ -1,18 +1,16 @@ // components/fontTransforms.jsx -// 1) Unicode-Blöcke const unicodeBlocks = { - sansSerif: { upperStart: 0x1D5A0, lowerStart: 0x1D5BA }, - sansSerifBold: { upperStart: 0x1D5D4, lowerStart: 0x1D5EE }, - script: { upperStart: 0x1D49C, lowerStart: 0x1D4B6 }, - scriptBold: { upperStart: 0x1D4D0, lowerStart: 0x1D4EA }, - fraktur: { upperStart: 0x1D504, lowerStart: 0x1D51E }, - frakturBold: { upperStart: 0x1D56C, lowerStart: 0x1D586 }, - monospace: { upperStart: 0x1D670, lowerStart: 0x1D68A }, - fullwidth: { upperStart: 0xFF21, lowerStart: 0xFF41 } + sansSerif: { upperStart: 0x1D5A0, lowerStart: 0x1D5BA }, + sansSerifBold: { upperStart: 0x1D5D4, lowerStart: 0x1D5EE }, + script: { upperStart: 0x1D49C, lowerStart: 0x1D4B6 }, + scriptBold: { upperStart: 0x1D4D0, lowerStart: 0x1D4EA }, + fraktur: { upperStart: 0x1D504, lowerStart: 0x1D51E }, + frakturBold: { upperStart: 0x1D56C, lowerStart: 0x1D586 }, + monospace: { upperStart: 0x1D670, lowerStart: 0x1D68A }, + fullwidth: { upperStart: 0xFF21, lowerStart: 0xFF41 } }; -// 2) Unicode-Mapping-Funktion const mapUnicode = (char, block) => { const code = char.charCodeAt(0); if (code >= 65 && code <= 90) return String.fromCodePoint(block.upperStart + (code - 65)); @@ -23,28 +21,18 @@ const mapUnicode = (char, block) => { const createTransform = (blockKey) => (text) => text.split('').map((c) => mapUnicode(c, unicodeBlocks[blockKey])).join(''); -// 3) Font-Definitionen const fontList = [ - "Abril Fatface", "Alegreya", "Alfa Slab One", "Almendra", "Amatic SC", "Andika", - "Architects Daughter", "Audiowide", "Averia Libre", "Bebas Neue", "Black Ops One", - "Caveat", "Cinzel Decorative", "Courgette", "Dancing Script", "Exo", "Fjalla One", - "Germania One", "Glass Antiqua", "Gloria Hallelujah", "Great Vibes", "Holtwood One SC", - "Indie Flower", "Italiana", "Jost", "Kaushan Script", "Lato", "Metal Mania", "Montserrat", - "Neucha", "Noto Sans", "Open Sans", "Orbitron", "Oswald", "Pacifico", "Permanent Marker", - "Philosopher", "Playfair Display", "Poppins", "Press Start 2P", "Questrial", "Quicksand", - "Rajdhani", "Raleway", "Righteous", "Roboto", "Sacramento", "Satisfy", "Space Mono", - "Spectral", "Staatliches", "Stint Ultra Condensed", "Syncopate", "Ultra", "Unica One", - "Work Sans", "Yellowtail" + "Anton", "Bebas Neue", "Dancing Script", "Montserrat", "Orbitron", "Pacifico", + "Playfair Display", "Poppins" ]; -// 4) Kategorie-Regeln (angepasst an neue Namen) const getCategory = (name) => { const normalizedName = name.toLowerCase().replace(/ /g, "-"); - if (["caveat", "dancing-script", "pacifico", "amatic-sc", "kaushan-script", "courgette", "great-vibes", "satisfy", "sacramento", "neucha", "gloria-hallelujah", "almendra", "indie-flower", "architects-daughter"].includes(normalizedName)) return "handwriting"; - if (["bebas-neue", "black-ops-one", "holtwood-one-sc", "abril-fatface", "playfair-display", "permanent-marker", "alfa-slab-one", "germania-one", "oswald", "stint-ultra-condensed"].includes(normalizedName)) return "statement"; - if (["exo", "orbitron", "audiowide", "rajdhani", "space-mono", "questrial", "syncopate", "unica-one", "italiana", "staatliches"].includes(normalizedName)) return "futuristic"; - if (["press-start-2p", "righteous", "metal-mania", "alegreya", "spectral", "fjalla-one", "glass-antiqua", "cinzel-decorative", "andika"].includes(normalizedName)) return "aesthetic"; - return "modern"; + if (["dancing-script", "pacifico"].includes(normalizedName)) return "handwriting"; + if (["anton", "bebas-neue", "playfair-display"].includes(normalizedName)) return "statement"; + if (["orbitron"].includes(normalizedName)) return "futuristic"; + if (["montserrat", "poppins"].includes(normalizedName)) return "modern"; + return "aesthetic"; }; const blockForCategory = { @@ -59,11 +47,10 @@ export const fontTransforms = Object.fromEntries( fontList.map((font) => { const normalizedFont = font.toLowerCase().replace(/ /g, "-"); const category = getCategory(font); - const block = blockForCategory[category]; return [font, { - transform: createTransform(block), + transform: (text) => text, // Echte Fonts verwenden, keine Unicode-Transformation category, - description: `${font} – Unicode-Stil automatisch zugewiesen`, + description: `${font} – Echte Schriftart verwendet`, className: `font-${normalizedFont}` }]; }) @@ -73,12 +60,12 @@ export const transformText = (text, fontName) => { const font = fontTransforms[fontName]; if (!font || !text) return { transformed: text, fontClassName: "" }; return { - transformed: font.transform(text), // Unicode-Transformation anwenden - fontClassName: font.className // Tailwind-Klasse für Font-Familie + transformed: font.transform(text), + fontClassName: font.className }; }; -export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10); +export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 5); export const getFontsByCategory = (category) => category === "all" diff --git a/styles/globals.css b/styles/globals.css index 94de242..bf5262a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,583 +1,244 @@ /* globals.css */ -@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alegreya&family=Alfa+Slab+One&family=Almendra&family=Amatic+SC&family=Andika&family=Architects+Daughter&family=Audiowide&family=Averia+Libre&family=Bebas+Neue&family=Black+Ops+One&family=Caveat&family=Cinzel+Decorative&family=Courgette&family=Dancing+Script&family=Exo&family=Fjalla+One&family=Germania+One&family=Gloria+Hallelujah&family=Great+Vibes&family=Holtwood+One+SC&family=Indie+Flower&family=Italiana&family=Jost&family=Kaushan+Script&family=Lato&family=Metal+Mania&family=Montserrat&family=Neucha&family=Noto+Sans&family=Open+Sans&family=Orbitron&family=Oswald&family=Pacifico&family=Permanent+Marker&family=Philosopher&family=Playfair+Display&family=Poppins&family=Press+Start+2P&family=Questrial&family=Quicksand&family=Rajdhani&family=Raleway&family=Righteous&family=Roboto&family=Sacramento&family=Satisfy&family=Space+Mono&family=Spectral&family=Staatliches&family=Stint+Ultra+Condensed&family=Syncopate&family=Ultra&family=Unica+One&family=Work+Sans&family=Yellowtail&display=swap'); - @tailwind base; @tailwind components; @tailwind utilities; -/* === Hybrid Font-Definitionen (Google primär, lokal als Fallback) === */ +/* === Font-Definitionen === */ @font-face { - font-family: 'Abril Fatface'; - src: local('Abril Fatface'), url("/fonts/abril-fatface.woff2") format("woff2"); - font-weight: 400; + font-family: 'Anton'; font-style: normal; + font-weight: 400; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/anton/v26/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: 'Alegreya'; - src: local('Alegreya'), url("/fonts/alegreya.woff2") format("woff2"); - font-weight: 400; + font-family: 'Anton'; font-style: normal; + font-weight: 400; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/anton/v26/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: 'Alfa Slab One'; - src: local('Alfa Slab One'), url("/fonts/alfa-slab-one.woff2") format("woff2"); - font-weight: 400; + font-family: 'Anton'; font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Almendra'; - src: local('Almendra'), url("/fonts/almendra.woff2") format("woff2"); font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Amatic SC'; - src: local('Amatic SC'), url("/fonts/amatic-sc.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Andika'; - src: local('Andika'), url("/fonts/andika.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Architects Daughter'; - src: local('Architects Daughter'), url("/fonts/architects-daughter.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Audiowide'; - src: local('Audiowide'), url("/fonts/audiowide.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Averia Libre'; - src: local('Averia Libre'), url("/fonts/averia-libre.woff2") format("woff2"); - font-weight: 400; - font-style: normal; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/anton/v26/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bebas Neue'; - src: local('Bebas Neue'), url("/fonts/bebas-neue.woff2") format("woff2"); - font-weight: 400; font-style: normal; + font-weight: 400; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/bebasneue/v15/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: 'Black Ops One'; - src: local('Black Ops One'), url("/fonts/black-ops-one.woff2") format("woff2"); - font-weight: 400; + font-family: 'Bebas Neue'; font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Caveat'; - src: local('Caveat'), url("/fonts/caveat.woff2") format("woff2"); font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Cinzel Decorative'; - src: local('Cinzel Decorative'), url("/fonts/cinzel-decorative.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Courgette'; - src: local('Courgette'), url("/fonts/courgette.woff2") format("woff2"); - font-weight: 400; - font-style: normal; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/bebasneue/v15/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Dancing Script'; - src: local('Dancing Script'), url("/fonts/dancing-script.woff2") format("woff2"); - font-weight: 400; font-style: normal; + font-weight: 400; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/dancingscript/v28/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Rep8ltA.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: 'Exo'; - src: local('Exo'), url("/fonts/exo.woff2") format("woff2"); - font-weight: 400; + font-family: 'Dancing Script'; font-style: normal; + font-weight: 400; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/dancingscript/v28/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3ROp8ltA.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: 'Fjalla One'; - src: local('Fjalla One'), url("/fonts/fjalla-one.woff2") format("woff2"); - font-weight: 400; + font-family: 'Dancing Script'; font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Germania One'; - src: local('Germania One'), url("/fonts/germania-one.woff2") format("woff2"); font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Glass Antiqua'; - src: url("/fonts/glass-antiqua.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Gloria Hallelujah'; - src: local('Gloria Hallelujah'), url("/fonts/gloria-hallelujah.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Great Vibes'; - src: local('Great Vibes'), url("/fonts/great-vibes.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Holtwood One SC'; - src: local('Holtwood One SC'), url("/fonts/holtwood-one-sc.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Indie Flower'; - src: local('Indie Flower'), url("/fonts/indie-flower.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Italiana'; - src: local('Italiana'), url("/fonts/italiana.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Jost'; - src: local('Jost'), url("/fonts/jost.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Kaushan Script'; - src: local('Kaushan Script'), url("/fonts/kaushan-script.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Lato'; - src: local('Lato'), url("/fonts/lato.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Metal Mania'; - src: local('Metal Mania'), url("/fonts/metal-mania.woff2") format("woff2"); - font-weight: 400; - font-style: normal; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/dancingscript/v28/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; - src: local('Montserrat'), url("/fonts/montserrat.woff2") format("woff2"); - font-weight: 400; font-style: normal; + font-weight: 500; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Hw0aXpsog.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: 'Neucha'; - src: local('Neucha'), url("/fonts/neucha.woff2") format("woff2"); - font-weight: 400; + font-family: 'Montserrat'; font-style: normal; + font-weight: 500; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Hw9aXpsog.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: 'Noto Sans'; - src: local('Noto Sans'), url("/fonts/noto-sans.woff2") format("woff2"); - font-weight: 400; + font-family: 'Montserrat'; font-style: normal; + font-weight: 500; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Hw2aXpsog.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { - font-family: 'Open Sans'; - src: local('Open Sans'), url("/fonts/open-sans.woff2") format("woff2"); - font-weight: 400; + font-family: 'Montserrat'; font-style: normal; + font-weight: 500; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Hw3aXpsog.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: ur[](https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Hw5aXo.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Orbitron'; - src: local('Orbitron'), url("/fonts/orbitron.woff2") format("woff2"); - font-weight: 400; font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Oswald'; - src: local('Oswald'), url("/fonts/oswald.woff2") format("woff2"); font-weight: 400; - font-style: normal; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/orbitron/v34/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Pacifico'; - src: local('Pacifico'), url("/fonts/pacifico.woff2") format("woff2"); - font-weight: 400; font-style: normal; + font-weight: 400; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6K6MmTpA.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { - font-family: 'Permanent Marker'; - src: local('Permanent Marker'), url("/fonts/permanent-marker.woff2") format("woff2"); - font-weight: 400; + font-family: 'Pacifico'; font-style: normal; + font-weight: 400; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6D6MmTpA.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { - font-family: 'Philosopher'; - src: local('Philosopher'), url("/fonts/philosopher.woff2") format("woff2"); - font-weight: 400; + font-family: 'Pacifico'; font-style: normal; + font-weight: 400; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6I6MmTpA.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +@font-face { + font-family: 'Pacifico'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: ur[](https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6J6MmTpA.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +@font-face { + font-family: 'Pacifico'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: ur[](https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; - src: local('Playfair Display'), url("/fonts/playfair-display.woff2") format("woff2"); - font-weight: 400; font-style: normal; + font-weight: 400; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDTbtPY_Q.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +@font-face { + font-family: 'Playfair Display'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: ur[](https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDYbtPY_Q.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +@font-face { + font-family: 'Playfair Display'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: ur[](https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDZbtPY_Q.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +@font-face { + font-family: 'Playfair Display'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: ur[](https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; - src: local('Poppins'), url("/fonts/poppins.woff2") format("woff2"); - font-weight: 400; font-style: normal; + font-weight: 500; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2'); + unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } @font-face { - font-family: 'Press Start 2P'; - src: local('Press Start 2P'), url("/fonts/press-start-2p.woff2") format("woff2"); - font-weight: 400; + font-family: 'Poppins'; font-style: normal; + font-weight: 500; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { - font-family: 'Questrial'; - src: local('Questrial'), url("/fonts/questrial.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Quicksand'; - src: local('Quicksand'), url("/fonts/quicksand.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Rajdhani'; - src: local('Rajdhani'), url("/fonts/rajdhani.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Raleway'; - src: local('Raleway'), url("/fonts/raleway.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Righteous'; - src: local('Righteous'), url("/fonts/righteous.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Roboto'; - src: local('Roboto'), url("/fonts/roboto.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Sacramento'; - src: local('Sacramento'), url("/fonts/sacramento.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Satisfy'; - src: local('Satisfy'), url("/fonts/satisfy.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Space Mono'; - src: local('Space Mono'), url("/fonts/space-mono.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Spectral'; - src: local('Spectral'), url("/fonts/spectral.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Staatliches'; - src: local('Staatliches'), url("/fonts/staatliches.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Stint Ultra Condensed'; - src: local('Stint Ultra Condensed'), url("/fonts/stint-ultra-condensed.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Syncopate'; - src: local('Syncopate'), url("/fonts/syncopate.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Ultra'; - src: local('Ultra'), url("/fonts/ultra.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Unica One'; - src: local('Unica One'), url("/fonts/unica-one.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Work Sans'; - src: local('Work Sans'), url("/fonts/work-sans.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Yellowtail'; - src: local('Yellowtail'), url("/fonts/yellowtail.woff2") format("woff2"); - font-weight: 400; + font-family: 'Poppins'; font-style: normal; + font-weight: 500; font-display: swap; + src: ur[](https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +/* === Tailwind Utility-Klassen === */ @layer utilities { - .font-abril-fatface { - font-family: 'Abril Fatface', serif; - } - .font-alegreya { - font-family: 'Alegreya', sans-serif; - } - .font-alfa-slab-one { - font-family: 'Alfa Slab One', sans-serif; - } - .font-almendra { - font-family: 'Almendra', serif; - } - .font-amatic-sc { - font-family: 'Amatic SC', cursive; - } - .font-andika { - font-family: 'Andika', sans-serif; - } - .font-architects-daughter { - font-family: 'Architects Daughter', cursive; - } - .font-audiowide { - font-family: 'Audiowide', sans-serif; - } - .font-averia-libre { - font-family: 'Averia Libre', cursive; + .font-anton { + font-family: 'Anton', sans-serif; } .font-bebas-neue { font-family: 'Bebas Neue', sans-serif; } - .font-black-ops-one { - font-family: 'Black Ops One', sans-serif; - } - .font-caveat { - font-family: 'Caveat', cursive; - } - .font-cinzel-decorative { - font-family: 'Cinzel Decorative', serif; - } - .font-courgette { - font-family: 'Courgette', cursive; - } .font-dancing-script { font-family: 'Dancing Script', cursive; } - .font-exo { - font-family: 'Exo', sans-serif; - } - .font-fjalla-one { - font-family: 'Fjalla One', sans-serif; - } - .font-germania-one { - font-family: 'Germania One', sans-serif; - } - .font-glass-antiqua { - font-family: 'Glass Antiqua', cursive; - } - .font-gloria-hallelujah { - font-family: 'Gloria Hallelujah', cursive; - } - .font-great-vibes { - font-family: 'Great Vibes', cursive; - } - .font-holtwood-one-sc { - font-family: 'Holtwood One SC', sans-serif; - } - .font-indie-flower { - font-family: 'Indie Flower', cursive; - } - .font-italiana { - font-family: 'Italiana', serif; - } - .font-jost { - font-family: 'Jost', sans-serif; - } - .font-kaushan-script { - font-family: 'Kaushan Script', cursive; - } - .font-lato { - font-family: 'Lato', sans-serif; - } - .font-metal-mania { - font-family: 'Metal Mania', sans-serif; - } .font-montserrat { font-family: 'Montserrat', sans-serif; } - .font-neucha { - font-family: 'Neucha', sans-serif; - } - .font-noto-sans { - font-family: 'Noto Sans', sans-serif; - } - .font-open-sans { - font-family: 'Open Sans', sans-serif; - } .font-orbitron { font-family: 'Orbitron', sans-serif; } - .font-oswald { - font-family: 'Oswald', sans-serif; - } .font-pacifico { font-family: 'Pacifico', cursive; } - .font-permanent-marker { - font-family: 'Permanent Marker', sans-serif; - } - .font-philosopher { - font-family: 'Philosopher', serif; - } .font-playfair-display { font-family: 'Playfair Display', serif; } .font-poppins { font-family: 'Poppins', sans-serif; } - .font-press-start-2p { - font-family: 'Press Start 2P', monospace; - } - .font-questrial { - font-family: 'Questrial', sans-serif; - } - .font-quicksand { - font-family: 'Quicksand', sans-serif; - } - .font-rajdhani { - font-family: 'Rajdhani', sans-serif; - } - .font-raleway { - font-family: 'Raleway', serif; - } - .font-righteous { - font-family: 'Righteous', sans-serif; - } - .font-roboto { - font-family: 'Roboto', sans-serif; - } - .font-sacramento { - font-family: 'Sacramento', cursive; - } - .font-satisfy { - font-family: 'Satisfy', cursive; - } - .font-space-mono { - font-family: 'Space Mono', sans-serif; - } - .font-spectral { - font-family: 'Spectral', sans-serif; - } - .font-staatliches { - font-family: 'Staatliches', serif; - } - .font-stint-ultra-condensed { - font-family: 'Stint Ultra Condensed', sans-serif; - } - .font-syncopate { - font-family: 'Syncopate', sans-serif; - } - .font-ultra { - font-family: 'Ultra', serif; - } - .font-unica-one { - font-family: 'Unica One', sans-serif; - } - .font-work-sans { - font-family: 'Work Sans', sans-serif; - } - .font-yellowtail { - font-family: 'Yellowtail', cursive; - } } /* Komponenten */ diff --git a/tailwind.config.js b/tailwind.config.js index c45ee62..574d02f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,74 +6,25 @@ module.exports = { "./lib/**/*.{js,jsx,ts,tsx}", "./styles/**/*.{css,js}", ], -theme: { + theme: { extend: { fontFamily: { - 'abril-fatface': ['"Abril Fatface"', 'serif'], - 'alegreya': ['"Alegreya"', 'sans-serif'], - 'alfa-slab-one': ['"Alfa Slab One"', 'sans-serif'], - 'almendra': ['"Almendra"', 'serif'], - 'amatic-sc': ['"Amatic SC"', 'cursive'], - 'andika': ['"Andika"', 'sans-serif'], - 'architects-daughter': ['"Architects Daughter"', 'cursive'], - 'audiowide': ['"Audiowide"', 'sans-serif'], - 'averia-libre': ['"Averia Libre"', 'cursive'], + 'anton': ['"Anton"', 'sans-serif'], 'bebas-neue': ['"Bebas Neue"', 'sans-serif'], - 'black-ops-one': ['"Black Ops One"', 'sans-serif'], - 'caveat': ['"Caveat"', 'cursive'], - 'cinzel-decorative': ['"Cinzel Decorative"', 'serif'], - 'courgette': ['"Courgette"', 'cursive'], 'dancing-script': ['"Dancing Script"', 'cursive'], - 'exo': ['"Exo"', 'sans-serif'], - 'fjalla-one': ['"Fjalla One"', 'sans-serif'], - 'germania-one': ['"Germania One"', 'sans-serif'], - 'glass-antiqua': ['"Glass Antiqua"', 'cursive'], - 'gloria-hallelujah': ['"Gloria Hallelujah"', 'cursive'], - 'great-vibes': ['"Great Vibes"', 'cursive'], - 'holtwood-one-sc': ['"Holtwood One SC"', 'sans-serif'], - 'indie-flower': ['"Indie Flower"', 'cursive'], - 'italiana': ['"Italiana"', 'serif'], - 'jost': ['"Jost"', 'sans-serif'], - 'kaushan-script': ['"Kaushan Script"', 'cursive'], - 'lato': ['"Lato"', 'sans-serif'], - 'metal-mania': ['"Metal Mania"', 'sans-serif'], 'montserrat': ['"Montserrat"', 'sans-serif'], - 'neucha': ['"Neucha"', 'sans-serif'], - 'noto-sans': ['"Noto Sans"', 'sans-serif'], - 'open-sans': ['"Open Sans"', 'sans-serif'], 'orbitron': ['"Orbitron"', 'sans-serif'], - 'oswald': ['"Oswald"', 'sans-serif'], 'pacifico': ['"Pacifico"', 'cursive'], - 'permanent-marker': ['"Permanent Marker"', 'sans-serif'], - 'philosopher': ['"Philosopher"', 'serif'], 'playfair-display': ['"Playfair Display"', 'serif'], 'poppins': ['"Poppins"', 'sans-serif'], - 'press-start-2p': ['"Press Start 2P"', 'monospace'], - 'questrial': ['"Questrial"', 'sans-serif'], - 'quicksand': ['"Quicksand"', 'sans-serif'], - 'rajdhani': ['"Rajdhani"', 'sans-serif'], - 'raleway': ['"Raleway"', 'serif'], - 'righteous': ['"Righteous"', 'sans-serif'], - 'roboto': ['"Roboto"', 'sans-serif'], - 'sacramento': ['"Sacramento"', 'cursive'], - 'satisfy': ['"Satisfy"', 'cursive'], - 'space-mono': ['"Space Mono"', 'sans-serif'], - 'spectral': ['"Spectral"', 'sans-serif'], - 'staatliches': ['"Staatliches"', 'serif'], - 'stint-ultra-condensed': ['"Stint Ultra Condensed"', 'sans-serif'], - 'syncopate': ['"Syncopate"', 'sans-serif'], - 'ultra': ['"Ultra"', 'serif'], - 'unica-one': ['"Unica One"', 'sans-serif'], - 'work-sans': ['"Work Sans"', 'sans-serif'], - 'yellowtail': ['"Yellowtail"', 'cursive'], }, }, }, plugins: [], safelist: [ { - pattern: /^font-/, + pattern: /^font-(anton|bebas-neue|dancing-script|montserrat|orbitron|pacifico|playfair-display|poppins)$/, variants: ["sm", "md", "lg", "xl"], }, ], -}; +}; \ No newline at end of file