aknuth
/
fancytextstuff
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Anpassungen

This commit is contained in:
Andreas Knuth 2025-08-04 22:53:25 -05:00
parent 7f63454701
commit 2587880a1f
12 changed files with 4052 additions and 1410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1 +1,2 @@
node_modules node_modules
.next

3
components/PerformanceOptimizedFontCard.jsx
View File

@ -96,6 +96,9 @@ const PerformanceOptimizedFontCard = forwardRef(({
const getFontStyle = useCallback((name) => { const getFontStyle = useCallback((name) => {
const baseStyle = { wordBreak: "break-word", lineHeight: "1.3", willChange: "auto" }; const baseStyle = { wordBreak: "break-word", lineHeight: "1.3", willChange: "auto" };
const fontEntry = fontTransforms[name]; const fontEntry = fontTransforms[name];
if (!fontEntry) {
console.warn(`Font definition missing for ${name}`);
}
if (!fontEntry) return baseStyle; if (!fontEntry) return baseStyle;
const style = { ...baseStyle }; const style = { ...baseStyle };

43
components/fontTransforms.jsx
View File

@ -25,24 +25,25 @@ const createTransform = (blockKey) => (text) =>
// 3) Font-Definitionen // 3) Font-Definitionen
const fontList = [ const fontList = [
"abril-fatface", "alegreya", "alfa-slab-one", "almendra", "amatic-sc", "andika", "Abril Fatface", "Alegreya", "Alfa Slab One", "Almendra", "Amatic SC", "Andika",
"architects-daughter", "audiowide", "averia-libre", "bebas-neue", "black-ops-one", "Architects Daughter", "Audiowide", "Averia Libre", "Bebas Neue", "Black Ops One",
"caveat", "cinzel-decorative", "courgette", "dancing-script", "exo", "fjalla-one", "Caveat", "Cinzel Decorative", "Courgette", "Dancing Script", "Exo", "Fjalla One",
"germania-one", "glass-antiqua", "gloria-hallelujah", "great-vibes", "holtwood-one-sc", "Germania One", "Glass Antiqua", "Gloria Hallelujah", "Great Vibes", "Holtwood One SC",
"indie-flower", "italiana", "jost", "kaushan-script", "lato", "metal-mania", "montserrat", "Indie Flower", "Italiana", "Jost", "Kaushan Script", "Lato", "Metal Mania", "Montserrat",
"neucha", "noto-sans", "open-sans", "orbitron", "oswald", "pacifico", "permanent-marker", "Neucha", "Noto Sans", "Open Sans", "Orbitron", "Oswald", "Pacifico", "Permanent Marker",
"philosopher", "playfair-display", "poppins", "press-start-2p", "questrial", "quicksand", "Philosopher", "Playfair Display", "Poppins", "Press Start 2P", "Questrial", "Quicksand",
"rajdhani", "raleway", "righteous", "roboto", "sacramento", "satisfy", "space-mono", "Rajdhani", "Raleway", "Righteous", "Roboto", "Sacramento", "Satisfy", "Space Mono",
"spectral", "staatliches", "stint-ultra-condensed", "syncopate", "ultra", "unica-one", "Spectral", "Staatliches", "Stint Ultra Condensed", "Syncopate", "Ultra", "Unica One",
"work-sans", "yellowtail" "Work Sans", "Yellowtail"
]; ];
// 4) Kategorie-Regeln (vereinfacht) // 4) Kategorie-Regeln (angepasst an neue Namen)
const getCategory = (name) => { const getCategory = (name) => {
if (["caveat", "dancing-script", "pacifico", "amatic-sc", "kaushan-script", "courgette", "great-vibes", "satisfy", "sacramento", "neucha", "gloria-hallelujah", "almendra", "indie-flower", "architects-daughter"].includes(name)) return "handwriting"; const normalizedName = name.toLowerCase().replace(/ /g, "-");
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(name)) return "statement"; 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 (["exo", "orbitron", "audiowide", "rajdhani", "space-mono", "questrial", "syncopate", "unica-one", "italiana", "staatliches"].includes(name)) return "futuristic"; 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 (["press-start-2p", "righteous", "metal-mania", "alegreya", "spectral", "fjalla-one", "glass-antiqua", "cinzel-decorative", "andika"].includes(name)) return "aesthetic"; 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"; return "modern";
}; };
@ -56,14 +57,14 @@ const blockForCategory = {
export const fontTransforms = Object.fromEntries( export const fontTransforms = Object.fromEntries(
fontList.map((font) => { fontList.map((font) => {
const name = font.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()); const normalizedFont = font.toLowerCase().replace(/ /g, "-");
const category = getCategory(font); const category = getCategory(font);
const block = blockForCategory[category]; const block = blockForCategory[category];
return [name, { return [font, {
transform: createTransform(block), transform: createTransform(block),
category, category,
description: `${name} – Unicode-Stil automatisch zugewiesen` , description: `${font} – Unicode-Stil automatisch zugewiesen`,
className: `font-${font}` className: `font-${normalizedFont}`
}]; }];
}) })
); );
@ -72,8 +73,8 @@ export const transformText = (text, fontName) => {
const font = fontTransforms[fontName]; const font = fontTransforms[fontName];
if (!font || !text) return { transformed: text, fontClassName: "" }; if (!font || !text) return { transformed: text, fontClassName: "" };
return { return {
transformed: font.transform(text), transformed: font.transform(text), // Unicode-Transformation anwenden
fontClassName: font.className fontClassName: font.className // Tailwind-Klasse für Font-Familie
}; };
}; };

73
lib/fonts.js
View File

@ -1,73 +0,0 @@
// lib/fonts.js
export const fonts = {
// 🔤 Modern
montserrat: "font-montserrat",
lato: "font-lato",
raleway: "font-raleway",
poppins: "font-poppins",
opensans: "font-open-sans",
roboto: "font-roboto",
worksans: "font-work-sans",
notosans: "font-noto-sans",
jost: "font-jost",
quicksand: "font-quicksand",
averialibre: "font-averia-libre",
philosopher: "font-philosopher",
// ✍️ Handwriting
pacifico: "font-pacifico",
sacramento: "font-sacramento",
caveat: "font-caveat",
dancingscript: "font-dancing-script",
indieflower: "font-indie-flower",
amatic: "font-amatic-sc",
kaushan: "font-kaushan-script",
architects: "font-architects-daughter",
neucha: "font-neucha",
greatvibes: "font-great-vibes",
satisfy: "font-satisfy",
yellowtail: "font-yellowtail",
gloria: "font-gloria-hallelujah",
courgette: "font-courgette",
almendra: "font-almendra",
// 🧑‍🎤 Statement
oswald: "font-oswald",
bebasneue: "font-bebas-neue",
ultra: "font-ultra",
stint: "font-stint-ultra-condensed",
playfair: "font-playfair-display",
abril: "font-abril-fatface",
permanentmarker: "font-permanent-marker",
alfaslab: "font-alfa-slab-one",
blackops: "font-black-ops-one",
germania: "font-germania-one",
holtwood: "font-holtwood-one-sc",
// 🚀 Futuristic
exo: "font-exo",
orbitron: "font-orbitron",
audiowide: "font-audiowide",
rajdhani: "font-rajdhani",
spacemono: "font-space-mono",
questrial: "font-questrial",
syncopate: "font-syncopate",
unicaone: "font-unica-one",
italiana: "font-italiana",
staatliches: "font-staatliches",
// 🧢 Aesthetic
pressstart2p: "font-press-start-2p",
righteous: "font-righteous",
metalmania: "font-metal-mania",
alegreya: "font-alegreya",
spectral: "font-spectral",
fjallaone: "font-fjalla-one",
glassantiqua: "font-glass-antiqua",
cinzeldecorative: "font-cinzel-decorative",
andika: "font-andika",
};
export const getFontData = (key) =>
fonts[key?.toLowerCase()] ?? fonts["montserrat"];

68
lib/tailwind‑font‑map.js
View File

@ -1,68 +0,0 @@
/**
* Enthält **nur** die CSS‑Variablen‑Namen, die next/font im Browser setzt.
* In fonts.js oder per @font-face werden sie erzeugt – hier referenzieren wir sie.
*/
export default {
montserrat: "--font-montserrat",
lato: "--font-lato",
raleway: "--font-raleway",
poppins: "--font-poppins",
"open-sans": "--font-open-sans",
roboto: "--font-roboto",
"work-sans": "--font-work-sans",
"noto-sans": "--font-noto-sans",
jost: "--font-jost",
quicksand: "--font-quicksand",
"averia-libre": "--font-averia-libre",
philosopher: "--font-philosopher",
pacifico: "--font-pacifico",
sacramento: "--font-sacramento",
caveat: "--font-caveat",
"dancing-script": "--font-dancing-script",
"indie-flower": "--font-indie-flower",
"amatic-sc": "--font-amatic-sc",
"kaushan-script": "--font-kaushan-script",
"architects-daughter": "--font-architects-daughter",
neucha: "--font-neucha",
"great-vibes": "--font-great-vibes",
satisfy: "--font-satisfy",
yellowtail: "--font-yellowtail",
"gloria-hallelujah": "--font-gloria-hallelujah",
oswald: "--font-oswald",
"bebas-neue": "--font-bebas-neue",
ultra: "--font-ultra",
"stint-ultra-condensed": "--font-stint-ultra-condensed",
"playfair-display": "--font-playfair-display",
"abril-fatface": "--font-abril-fatface",
"permanent-marker": "--font-permanent-marker",
"alfa-slab-one": "--font-alfa-slab-one",
"black-ops-one": "--font-black-ops-one",
"germania-one": "--font-germania-one",
"holtwood-one-sc": "--font-holtwood-one-sc",
courgette: "--font-courgette",
exo: "--font-exo",
orbitron: "--font-orbitron",
audiowide: "--font-audiowide",
rajdhani: "--font-rajdhani",
"space-mono": "--font-space-mono",
questrial: "--font-questrial",
syncopate: "--font-syncopate",
"unica-one": "--font-unica-one",
italiana: "--font-italiana",
staatliches: "--font-staatliches",
"press-start-2p": "--font-press-start-2p",
righteous: "--font-righteous",
"metal-mania": "--font-metal-mania",
alegreya: "--font-alegreya",
spectral: "--font-spectral",
"fjalla-one": "--font-fjalla-one",
"glass-antiqua": "--font-glass-antiqua",
"cinzel-decorative": "--font-cinzel-decorative",
andika: "--font-andika",
almendra: "--font-almendra",
};

12
next.config.mjs
View File

@ -1,12 +0,0 @@
// next.config.mjs
import path from "path";
import withFlowbiteReact from "flowbite-react/plugin/nextjs";
const nextConfig = {
webpack: (config) => {
config.resolve.alias["@"] = path.resolve(process.cwd());
return config;
},
};
export default withFlowbiteReact(nextConfig);

18
pages/_app.js
View File

@ -1,18 +1,6 @@
// pages/_app.jsx import "@/styles/tailwind.build.css"; // dein Tailwind-Build
import "@/styles/tailwind.build.css"; // dein Tailwind‑Build import "../styles/globals.css";
import { fonts } from "@/lib/fonts";
import "../styles/local-fonts.css";
// CSS-Variablen für alle Fonts aus next/font/google
const allFontVars = Object.values(fonts)
.filter((f) => f?.variable)
.map((f) => f.variable)
.join(" ");
export default function MyApp({ Component, pageProps }) { export default function MyApp({ Component, pageProps }) {
return ( return <Component {...pageProps} />;
<main className={allFontVars}>
<Component {...pageProps} />
</main>
);
} }

518
styles/globals.css
View File

@ -1,639 +1,585 @@
/* in globals.css oder styles/index.css */ /* globals.css */
@import "./local-fonts.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 base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* === Lokale Fonts via woff2 einbinden === */ /* === Hybrid Font-Definitionen (Google primär, lokal als Fallback) === */
@font-face { @font-face {
font-family: "AbrilFatface"; font-family: 'Abril Fatface';
src: url("/fonts/abril-fatface.woff2") format("woff2"); src: local('Abril Fatface'), url("/fonts/abril-fatface.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Alegreya"; font-family: 'Alegreya';
src: url("/fonts/alegreya.woff2") format("woff2"); src: local('Alegreya'), url("/fonts/alegreya.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "AlfaSlabOne"; font-family: 'Alfa Slab One';
src: url("/fonts/alfa-slab-one.woff2") format("woff2"); src: local('Alfa Slab One'), url("/fonts/alfa-slab-one.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Almendra"; font-family: 'Almendra';
src: url("/fonts/almendra.woff2") format("woff2"); src: local('Almendra'), url("/fonts/almendra.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "AmaticSc"; font-family: 'Amatic SC';
src: url("/fonts/amatic-sc.woff2") format("woff2"); src: local('Amatic SC'), url("/fonts/amatic-sc.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Andika"; font-family: 'Andika';
src: url("/fonts/andika.woff2") format("woff2"); src: local('Andika'), url("/fonts/andika.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "ArchitectsDaughter"; font-family: 'Architects Daughter';
src: url("/fonts/architects-daughter.woff2") format("woff2"); src: local('Architects Daughter'), url("/fonts/architects-daughter.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Audiowide"; font-family: 'Audiowide';
src: url("/fonts/audiowide.woff2") format("woff2"); src: local('Audiowide'), url("/fonts/audiowide.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "AveriaLibre"; font-family: 'Averia Libre';
src: url("/fonts/averia-libre.woff2") format("woff2"); src: local('Averia Libre'), url("/fonts/averia-libre.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "BebasNeue"; font-family: 'Bebas Neue';
src: url("/fonts/bebas-neue.woff2") format("woff2"); src: local('Bebas Neue'), url("/fonts/bebas-neue.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "BlackOpsOne"; font-family: 'Black Ops One';
src: url("/fonts/black-ops-one.woff2") format("woff2"); src: local('Black Ops One'), url("/fonts/black-ops-one.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Caveat"; font-family: 'Caveat';
src: url("/fonts/caveat.woff2") format("woff2"); src: local('Caveat'), url("/fonts/caveat.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "CinzelDecorative"; font-family: 'Cinzel Decorative';
src: url("/fonts/cinzel-decorative.woff2") format("woff2"); src: local('Cinzel Decorative'), url("/fonts/cinzel-decorative.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Courgette"; font-family: 'Courgette';
src: url("/fonts/courgette.woff2") format("woff2"); src: local('Courgette'), url("/fonts/courgette.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "DancingScript"; font-family: 'Dancing Script';
src: url("/fonts/dancing-script.woff2") format("woff2"); src: local('Dancing Script'), url("/fonts/dancing-script.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Exo"; font-family: 'Exo';
src: url("/fonts/exo.woff2") format("woff2"); src: local('Exo'), url("/fonts/exo.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "FjallaOne"; font-family: 'Fjalla One';
src: url("/fonts/fjalla-one.woff2") format("woff2"); src: local('Fjalla One'), url("/fonts/fjalla-one.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "GermaniaOne"; font-family: 'Germania One';
src: url("/fonts/germania-one.woff2") format("woff2"); src: local('Germania One'), url("/fonts/germania-one.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "GlassAntiqua"; font-family: 'Glass Antiqua';
src: url("/fonts/glass-antiqua.woff2") format("woff2"); src: url("/fonts/glass-antiqua.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "GloriaHallelujah"; font-family: 'Gloria Hallelujah';
src: url("/fonts/gloria-hallelujah.woff2") format("woff2"); src: local('Gloria Hallelujah'), url("/fonts/gloria-hallelujah.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "GreatVibes"; font-family: 'Great Vibes';
src: url("/fonts/great-vibes.woff2") format("woff2"); src: local('Great Vibes'), url("/fonts/great-vibes.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "HoltwoodOneSc"; font-family: 'Holtwood One SC';
src: url("/fonts/holtwood-one-sc.woff2") format("woff2"); src: local('Holtwood One SC'), url("/fonts/holtwood-one-sc.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "IndieFlower"; font-family: 'Indie Flower';
src: url("/fonts/indie-flower.woff2") format("woff2"); src: local('Indie Flower'), url("/fonts/indie-flower.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Italiana"; font-family: 'Italiana';
src: url("/fonts/italiana.woff2") format("woff2"); src: local('Italiana'), url("/fonts/italiana.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Jost"; font-family: 'Jost';
src: url("/fonts/jost.woff2") format("woff2"); src: local('Jost'), url("/fonts/jost.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "KaushanScript"; font-family: 'Kaushan Script';
src: url("/fonts/kaushan-script.woff2") format("woff2"); src: local('Kaushan Script'), url("/fonts/kaushan-script.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Lato"; font-family: 'Lato';
src: url("/fonts/lato.woff2") format("woff2"); src: local('Lato'), url("/fonts/lato.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "MetalMania"; font-family: 'Metal Mania';
src: url("/fonts/metal-mania.woff2") format("woff2"); src: local('Metal Mania'), url("/fonts/metal-mania.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Montserrat"; font-family: 'Montserrat';
src: url("/fonts/montserrat.woff2") format("woff2"); src: local('Montserrat'), url("/fonts/montserrat.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Neucha"; font-family: 'Neucha';
src: url("/fonts/neucha.woff2") format("woff2"); src: local('Neucha'), url("/fonts/neucha.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "NotoSans"; font-family: 'Noto Sans';
src: url("/fonts/noto-sans.woff2") format("woff2"); src: local('Noto Sans'), url("/fonts/noto-sans.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "OpenSans"; font-family: 'Open Sans';
src: url("/fonts/open-sans.woff2") format("woff2"); src: local('Open Sans'), url("/fonts/open-sans.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Orbitron"; font-family: 'Orbitron';
src: url("/fonts/orbitron.woff2") format("woff2"); src: local('Orbitron'), url("/fonts/orbitron.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Oswald"; font-family: 'Oswald';
src: url("/fonts/oswald.woff2") format("woff2"); src: local('Oswald'), url("/fonts/oswald.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Pacifico"; font-family: 'Pacifico';
src: url("/fonts/pacifico.woff2") format("woff2"); src: local('Pacifico'), url("/fonts/pacifico.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "PermanentMarker"; font-family: 'Permanent Marker';
src: url("/fonts/permanent-marker.woff2") format("woff2"); src: local('Permanent Marker'), url("/fonts/permanent-marker.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Philosopher"; font-family: 'Philosopher';
src: url("/fonts/philosopher.woff2") format("woff2"); src: local('Philosopher'), url("/fonts/philosopher.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "PlayfairDisplay"; font-family: 'Playfair Display';
src: url("/fonts/playfair-display.woff2") format("woff2"); src: local('Playfair Display'), url("/fonts/playfair-display.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Poppins"; font-family: 'Poppins';
src: url("/fonts/poppins.woff2") format("woff2"); src: local('Poppins'), url("/fonts/poppins.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "PressStart2P"; font-family: 'Press Start 2P';
src: url("/fonts/press-start-2p.woff2") format("woff2"); src: local('Press Start 2P'), url("/fonts/press-start-2p.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Questrial"; font-family: 'Questrial';
src: url("/fonts/questrial.woff2") format("woff2"); src: local('Questrial'), url("/fonts/questrial.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Quicksand"; font-family: 'Quicksand';
src: url("/fonts/quicksand.woff2") format("woff2"); src: local('Quicksand'), url("/fonts/quicksand.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Rajdhani"; font-family: 'Rajdhani';
src: url("/fonts/rajdhani.woff2") format("woff2"); src: local('Rajdhani'), url("/fonts/rajdhani.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Raleway"; font-family: 'Raleway';
src: url("/fonts/raleway.woff2") format("woff2"); src: local('Raleway'), url("/fonts/raleway.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Righteous"; font-family: 'Righteous';
src: url("/fonts/righteous.woff2") format("woff2"); src: local('Righteous'), url("/fonts/righteous.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Roboto"; font-family: 'Roboto';
src: url("/fonts/roboto.woff2") format("woff2"); src: local('Roboto'), url("/fonts/roboto.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Sacramento"; font-family: 'Sacramento';
src: url("/fonts/sacramento.woff2") format("woff2"); src: local('Sacramento'), url("/fonts/sacramento.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Satisfy"; font-family: 'Satisfy';
src: url("/fonts/satisfy.woff2") format("woff2"); src: local('Satisfy'), url("/fonts/satisfy.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "SpaceMono"; font-family: 'Space Mono';
src: url("/fonts/space-mono.woff2") format("woff2"); src: local('Space Mono'), url("/fonts/space-mono.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Spectral"; font-family: 'Spectral';
src: url("/fonts/spectral.woff2") format("woff2"); src: local('Spectral'), url("/fonts/spectral.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Staatliches"; font-family: 'Staatliches';
src: url("/fonts/staatliches.woff2") format("woff2"); src: local('Staatliches'), url("/fonts/staatliches.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "StintUltraCondensed"; font-family: 'Stint Ultra Condensed';
src: url("/fonts/stint-ultra-condensed.woff2") format("woff2"); src: local('Stint Ultra Condensed'), url("/fonts/stint-ultra-condensed.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Syncopate"; font-family: 'Syncopate';
src: url("/fonts/syncopate.woff2") format("woff2"); src: local('Syncopate'), url("/fonts/syncopate.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Ultra"; font-family: 'Ultra';
src: url("/fonts/ultra.woff2") format("woff2"); src: local('Ultra'), url("/fonts/ultra.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "UnicaOne"; font-family: 'Unica One';
src: url("/fonts/unica-one.woff2") format("woff2"); src: local('Unica One'), url("/fonts/unica-one.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "WorkSans"; font-family: 'Work Sans';
src: url("/fonts/work-sans.woff2") format("woff2"); src: local('Work Sans'), url("/fonts/work-sans.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: "Yellowtail"; font-family: 'Yellowtail';
src: url("/fonts/yellowtail.woff2") format("woff2"); src: local('Yellowtail'), url("/fonts/yellowtail.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap;
} }
@layer utilities { @layer utilities {
.font-abril-fatface { .font-abril-fatface {
font-family: "AbrilFatface", serif; font-family: 'Abril Fatface', serif;
} }
.font-alegreya { .font-alegreya {
font-family: "Alegreya", sans-serif; font-family: 'Alegreya', sans-serif;
} }
.font-alfa-slab-one { .font-alfa-slab-one {
font-family: "AlfaSlabOne", sans-serif; font-family: 'Alfa Slab One', sans-serif;
} }
.font-almendra { .font-almendra {
font-family: "Almendra", serif; font-family: 'Almendra', serif;
} }
.font-amatic-sc { .font-amatic-sc {
font-family: "AmaticSc", cursive; font-family: 'Amatic SC', cursive;
} }
.font-andika { .font-andika {
font-family: "Andika", sans-serif; font-family: 'Andika', sans-serif;
} }
.font-architects-daughter { .font-architects-daughter {
font-family: "ArchitectsDaughter", cursive; font-family: 'Architects Daughter', cursive;
} }
.font-audiowide { .font-audiowide {
font-family: "Audiowide", sans-serif; font-family: 'Audiowide', sans-serif;
} }
.font-averia-libre { .font-averia-libre {
font-family: "AveriaLibre", cursive; font-family: 'Averia Libre', cursive;
} }
.font-bebas-neue { .font-bebas-neue {
font-family: "BebasNeue", sans-serif; font-family: 'Bebas Neue', sans-serif;
} }
.font-black-ops-one { .font-black-ops-one {
font-family: "BlackOpsOne", sans-serif; font-family: 'Black Ops One', sans-serif;
} }
.font-caveat { .font-caveat {
font-family: "Caveat", cursive; font-family: 'Caveat', cursive;
} }
.font-cinzel-decorative { .font-cinzel-decorative {
font-family: "CinzelDecorative", serif; font-family: 'Cinzel Decorative', serif;
} }
.font-courgette { .font-courgette {
font-family: "Courgette", cursive; font-family: 'Courgette', cursive;
} }
.font-dancing-script { .font-dancing-script {
font-family: "DancingScript", cursive; font-family: 'Dancing Script', cursive;
} }
.font-exo { .font-exo {
font-family: "Exo", sans-serif; font-family: 'Exo', sans-serif;
} }
.font-fjalla-one { .font-fjalla-one {
font-family: "FjallaOne", sans-serif; font-family: 'Fjalla One', sans-serif;
} }
.font-germania-one { .font-germania-one {
font-family: "GermaniaOne", sans-serif; font-family: 'Germania One', sans-serif;
} }
.font-glass-antiqua { .font-glass-antiqua {
font-family: "GlassAntiqua", cursive; font-family: 'Glass Antiqua', cursive;
} }
.font-gloria-hallelujah { .font-gloria-hallelujah {
font-family: "GloriaHallelujah", cursive; font-family: 'Gloria Hallelujah', cursive;
} }
.font-great-vibes { .font-great-vibes {
font-family: "GreatVibes", cursive; font-family: 'Great Vibes', cursive;
} }
.font-holtwood-one-sc { .font-holtwood-one-sc {
font-family: "HoltwoodOneSc", sans-serif; font-family: 'Holtwood One SC', sans-serif;
} }
.font-indie-flower { .font-indie-flower {
font-family: "IndieFlower", cursive; font-family: 'Indie Flower', cursive;
} }
.font-italiana { .font-italiana {
font-family: "Italiana", serif; font-family: 'Italiana', serif;
} }
.font-jost { .font-jost {
font-family: "Jost", sans-serif; font-family: 'Jost', sans-serif;
} }
.font-kaushan-script { .font-kaushan-script {
font-family: "KaushanScript", cursive; font-family: 'Kaushan Script', cursive;
} }
.font-lato { .font-lato {
font-family: "Lato", sans-serif; font-family: 'Lato', sans-serif;
} }
.font-metal-mania { .font-metal-mania {
font-family: "MetalMania", sans-serif; font-family: 'Metal Mania', sans-serif;
} }
.font-montserrat { .font-montserrat {
font-family: "Montserrat", sans-serif; font-family: 'Montserrat', sans-serif;
} }
.font-neucha { .font-neucha {
font-family: "Neucha", sans-serif; font-family: 'Neucha', sans-serif;
} }
.font-noto-sans { .font-noto-sans {
font-family: "NotoSans", sans-serif; font-family: 'Noto Sans', sans-serif;
} }
.font-open-sans { .font-open-sans {
font-family: "OpenSans", sans-serif; font-family: 'Open Sans', sans-serif;
} }
.font-orbitron { .font-orbitron {
font-family: "Orbitron", sans-serif; font-family: 'Orbitron', sans-serif;
} }
.font-oswald { .font-oswald {
font-family: "Oswald", sans-serif; font-family: 'Oswald', sans-serif;
} }
.font-pacifico { .font-pacifico {
font-family: "Pacifico", cursive; font-family: 'Pacifico', cursive;
} }
.font-permanent-marker { .font-permanent-marker {
font-family: "PermanentMarker", sans-serif; font-family: 'Permanent Marker', sans-serif;
} }
.font-philosopher { .font-philosopher {
font-family: "Philosopher", serif; font-family: 'Philosopher', serif;
} }
.font-playfair-display { .font-playfair-display {
font-family: "PlayfairDisplay", serif; font-family: 'Playfair Display', serif;
} }
.font-poppins { .font-poppins {
font-family: "Poppins", sans-serif; font-family: 'Poppins', sans-serif;
} }
.font-press-start-2p { .font-press-start-2p {
font-family: "PressStart2P", monospace; font-family: 'Press Start 2P', monospace;
} }
.font-questrial { .font-questrial {
font-family: "Questrial", sans-serif; font-family: 'Questrial', sans-serif;
} }
.font-quicksand { .font-quicksand {
font-family: "Quicksand", sans-serif; font-family: 'Quicksand', sans-serif;
} }
.font-rajdhani { .font-rajdhani {
font-family: "Rajdhani", sans-serif; font-family: 'Rajdhani', sans-serif;
} }
.font-raleway { .font-raleway {
font-family: "Raleway", serif; font-family: 'Raleway', serif;
} }
.font-righteous { .font-righteous {
font-family: "Righteous", sans-serif; font-family: 'Righteous', sans-serif;
} }
.font-roboto { .font-roboto {
font-family: "Roboto", sans-serif; font-family: 'Roboto', sans-serif;
} }
.font-sacramento { .font-sacramento {
font-family: "Sacramento", cursive; font-family: 'Sacramento', cursive;
} }
.font-satisfy { .font-satisfy {
font-family: "Satisfy", cursive; font-family: 'Satisfy', cursive;
} }
.font-space-mono { .font-space-mono {
font-family: "SpaceMono", sans-serif; font-family: 'Space Mono', sans-serif;
} }
.font-spectral { .font-spectral {
font-family: "Spectral", sans-serif; font-family: 'Spectral', sans-serif;
} }
.font-staatliches { .font-staatliches {
font-family: "Staatliches", serif; font-family: 'Staatliches', serif;
} }
.font-stint-ultra-condensed { .font-stint-ultra-condensed {
font-family: "StintUltraCondensed", sans-serif; font-family: 'Stint Ultra Condensed', sans-serif;
} }
.font-syncopate { .font-syncopate {
font-family: "Syncopate", sans-serif; font-family: 'Syncopate', sans-serif;
} }
.font-ultra { .font-ultra {
font-family: "Ultra", serif; font-family: 'Ultra', serif;
} }
.font-unica-one { .font-unica-one {
font-family: "UnicaOne", sans-serif; font-family: 'Unica One', sans-serif;
} }
.font-work-sans { .font-work-sans {
font-family: "WorkSans", sans-serif; font-family: 'Work Sans', sans-serif;
} }
.font-yellowtail { .font-yellowtail {
font-family: "Yellowtail", cursive; font-family: 'Yellowtail', cursive;
} }
} }
/* Komponenten */ /* Komponenten */
@layer components { @layer components {
.text-shadow-lg { .text-shadow-lg {
@ -645,4 +591,4 @@
body { body {
background: #111; background: #111;
color: #fff; color: #fff;
} }

522
styles/local-fonts.css
View File

@ -1,522 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ========== FONT-FACE DEFINITIONS ========== */
@font-face {
font-family: "abril-fatface";
src: url("/fonts/abril-fatface.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "alegreya";
src: url("/fonts/alegreya.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "alfa-slab-one";
src: url("/fonts/alfa-slab-one.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "almendra";
src: url("/fonts/almendra.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "amatic-sc";
src: url("/fonts/amatic-sc.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "andika";
src: url("/fonts/andika.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "architects-daughter";
src: url("/fonts/architects-daughter.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "audiowide";
src: url("/fonts/audiowide.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "averia-libre";
src: url("/fonts/averia-libre.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "bebas-neue";
src: url("/fonts/bebas-neue.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "black-ops-one";
src: url("/fonts/black-ops-one.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "caveat";
src: url("/fonts/caveat.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "cinzel-decorative";
src: url("/fonts/cinzel-decorative.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "courgette";
src: url("/fonts/courgette.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "dancing-script";
src: url("/fonts/dancing-script.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "exo";
src: url("/fonts/exo.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "fjalla-one";
src: url("/fonts/fjalla-one.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "germania-one";
src: url("/fonts/germania-one.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "glass-antiqua";
src: url("/fonts/glass-antiqua.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "gloria-hallelujah";
src: url("/fonts/gloria-hallelujah.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "great-vibes";
src: url("/fonts/great-vibes.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "holtwood-one-sc";
src: url("/fonts/holtwood-one-sc.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "indie-flower";
src: url("/fonts/indie-flower.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "italiana";
src: url("/fonts/italiana.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "jost";
src: url("/fonts/jost.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "kaushan-script";
src: url("/fonts/kaushan-script.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "lato";
src: url("/fonts/lato.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "metal-mania";
src: url("/fonts/metal-mania.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "montserrat";
src: url("/fonts/montserrat.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "neucha";
src: url("/fonts/neucha.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "noto-sans";
src: url("/fonts/noto-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "open-sans";
src: url("/fonts/open-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "orbitron";
src: url("/fonts/orbitron.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "oswald";
src: url("/fonts/oswald.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "pacifico";
src: url("/fonts/pacifico.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "permanent-marker";
src: url("/fonts/permanent-marker.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "philosopher";
src: url("/fonts/philosopher.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "playfair-display";
src: url("/fonts/playfair-display.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("/fonts/poppins.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "press-start-2p";
src: url("/fonts/press-start-2p.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "questrial";
src: url("/fonts/questrial.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "quicksand";
src: url("/fonts/quicksand.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "rajdhani";
src: url("/fonts/rajdhani.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "raleway";
src: url("/fonts/raleway.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "righteous";
src: url("/fonts/righteous.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "roboto";
src: url("/fonts/roboto.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "sacramento";
src: url("/fonts/sacramento.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "satisfy";
src: url("/fonts/satisfy.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "space-mono";
src: url("/fonts/space-mono.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "spectral";
src: url("/fonts/spectral.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "staatliches";
src: url("/fonts/staatliches.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "stint-ultra-condensed";
src: url("/fonts/stint-ultra-condensed.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "syncopate";
src: url("/fonts/syncopate.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "ultra";
src: url("/fonts/ultra.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "unica-one";
src: url("/fonts/unica-one.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "work-sans";
src: url("/fonts/work-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "yellowtail";
src: url("/fonts/yellowtail.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
/* ========== TAILWIND UTILITY CLASSES ========== */
@layer utilities {
.font-abril-fatface {
font-family: "abril-fatface", sans-serif;
}
.font-alegreya {
font-family: "alegreya", sans-serif;
}
.font-alfa-slab-one {
font-family: "alfa-slab-one", sans-serif;
}
.font-almendra {
font-family: "almendra", sans-serif;
}
.font-amatic-sc {
font-family: "amatic-sc", sans-serif;
}
.font-andika {
font-family: "andika", sans-serif;
}
.font-architects-daughter {
font-family: "architects-daughter", sans-serif;
}
.font-audiowide {
font-family: "audiowide", sans-serif;
}
.font-averia-libre {
font-family: "averia-libre", 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", sans-serif;
}
.font-cinzel-decorative {
font-family: "cinzel-decorative", sans-serif;
}
.font-courgette {
font-family: "courgette", sans-serif;
}
.font-dancing-script {
font-family: "dancing-script", sans-serif;
}
.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", sans-serif;
}
.font-gloria-hallelujah {
font-family: "gloria-hallelujah", sans-serif;
}
.font-great-vibes {
font-family: "great-vibes", sans-serif;
}
.font-holtwood-one-sc {
font-family: "holtwood-one-sc", sans-serif;
}
.font-indie-flower {
font-family: "indie-flower", sans-serif;
}
.font-italiana {
font-family: "italiana", sans-serif;
}
.font-jost {
font-family: "jost", sans-serif;
}
.font-kaushan-script {
font-family: "kaushan-script", sans-serif;
}
.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", sans-serif;
}
.font-permanent-marker {
font-family: "permanent-marker", sans-serif;
}
.font-philosopher {
font-family: "philosopher", sans-serif;
}
.font-playfair-display {
font-family: "playfair-display", sans-serif;
}
.font-poppins {
font-family: "poppins", sans-serif;
}
.font-press-start-2p {
font-family: "press-start-2p", sans-serif;
}
.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", sans-serif;
}
.font-righteous {
font-family: "righteous", sans-serif;
}
.font-roboto {
font-family: "roboto", sans-serif;
}
.font-sacramento {
font-family: "sacramento", sans-serif;
}
.font-satisfy {
font-family: "satisfy", sans-serif;
}
.font-space-mono {
font-family: "space-mono", sans-serif;
}
.font-spectral {
font-family: "spectral", sans-serif;
}
.font-staatliches {
font-family: "staatliches", sans-serif;
}
.font-stint-ultra-condensed {
font-family: "stint-ultra-condensed", sans-serif;
}
.font-syncopate {
font-family: "syncopate", sans-serif;
}
.font-ultra {
font-family: "ultra", sans-serif;
}
.font-unica-one {
font-family: "unica-one", sans-serif;
}
.font-work-sans {
font-family: "work-sans", sans-serif;
}
.font-yellowtail {
font-family: "yellowtail", sans-serif;
}
}

4117
styles/tailwind.build.css
View File

File diff suppressed because it is too large Load Diff

62
tailwind.config.js
View File

@ -6,9 +6,67 @@ module.exports = {
"./lib/**/*.{js,jsx,ts,tsx}", "./lib/**/*.{js,jsx,ts,tsx}",
"./styles/**/*.{css,js}", "./styles/**/*.{css,js}",
], ],
theme: { theme: {
extend: { extend: {
// Keine fontFamily-Einträge mehr hier nötig! 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'],
'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: [], plugins: [],

25
tailwind.config.mjs
View File

@ -1,25 +0,0 @@
import tailwindFonts from "./lib/tailwind-font-map.js"; // ← **ASCII‑Minus wichtig!**
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./pages/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
"./entities/**/*.{js,jsx,ts,tsx}",
".flowbite-react/class-list.json",
],
theme: {
extend: {
fontFamily: {
// Dynamische Zuordnung: z. B. roboto: ['var(--font-roboto)']
...Object.fromEntries(
Object.entries(tailwindFonts).map(([key, cssVar]) => [
key,
[`var(${cssVar})`],
])
),
},
},
},
plugins: [],
};