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

Initial commit

This commit is contained in:
Timo Knuth 2025-08-03 18:48:24 +02:00
parent 49bb62fc4e
commit 62ebe48adb
14 changed files with 1262 additions and 1092 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/ImprovedCategoryFilter.jsx
View File

@ -1,3 +1,4 @@
// components/ImprovedCategoryFilter.jsx
import React from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
@ -13,31 +14,31 @@ export default function ImprovedCategoryFilter({
{
id: 'all',
name: '🔥 All Fonts',
description: 'Complete collection',
description: 'Complete collection of 60 styles',
gradient: 'from-pink-500 to-purple-600'
},
{
id: 'modern',
name: '🔤 Modern',
description: 'Clean & professional',
description: 'Clean & professional fonts',
gradient: 'from-blue-500 to-indigo-600'
},
{
id: 'handwriting',
name: '✍️ Handwriting',
description: 'Personal & casual',
description: 'Personal, casual and handwritten',
gradient: 'from-green-500 to-emerald-600'
},
{
id: 'statement',
name: '🧑‍🎤 Statement',
description: 'Bold & eye-catching',
description: 'Bold & attention-grabbing',
gradient: 'from-red-500 to-pink-600'
},
{
id: 'futuristic',
name: '🚀 Futuristic',
description: 'Tech & gaming',
description: 'Tech & gaming inspired',
gradient: 'from-purple-500 to-violet-600'
},
{
@ -59,7 +60,7 @@ export default function ImprovedCategoryFilter({
<div className="text-center mb-6">
<h2 className="text-2xl font-bold text-white mb-2">Choose Your Style</h2>
<p className="text-white/70 text-sm">
Browse fonts by category or view all {fontCounts.all} unique styles
Browse fonts by category or view all {fontCounts?.all ?? 60} unique styles
</p>
</div>
@ -97,7 +98,7 @@ export default function ImprovedCategoryFilter({
: 'bg-white/10 text-white/80 border-white/20'
}`}
>
{fontCounts[category.id] || 0} fonts
{fontCounts?.[category.id] ?? 0} fonts
</Badge>
</div>
</Button>
@ -114,7 +115,7 @@ export default function ImprovedCategoryFilter({
>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 inline-block">
<p className="text-white/80 text-sm">
Showing <span className="font-semibold text-white">{fontCounts[selectedCategory]}</span> fonts
Showing <span className="font-semibold text-white">{fontCounts?.[selectedCategory] ?? 0}</span> fonts
in <span className="font-semibold text-white">{categories.find(c => c.id === selectedCategory)?.name}</span> category
</p>
</div>

32
components/PerformanceOptimizedFontCard.jsx
View File

@ -95,26 +95,16 @@ const PerformanceOptimizedFontCard = forwardRef(({
const getFontStyle = useCallback((name) => {
const baseStyle = { wordBreak: "break-word", lineHeight: "1.3", willChange: "auto" };
const fontMap = {
Montserrat: { fontFamily: "Montserrat, sans-serif", fontWeight: "500" },
'Bebas Neue': { fontFamily: '"Bebas Neue", cursive', fontWeight: "400", textTransform: "uppercase", letterSpacing: "0.05em" },
Oswald: { fontFamily: "Oswald, sans-serif", fontWeight: "500", textTransform: "uppercase" },
Raleway: { fontFamily: "Raleway, sans-serif", fontWeight: "400" },
Poppins: { fontFamily: "Poppins, sans-serif", fontWeight: "500" },
Inter: { fontFamily: "Inter, sans-serif", fontWeight: "400" },
Caveat: { fontFamily: "Caveat, cursive", fontWeight: "400" },
Pacifico: { fontFamily: "Pacifico, cursive", fontWeight: "400" },
'Dancing Script': { fontFamily: '"Dancing Script", cursive', fontWeight: "400" },
'Amatic SC': { fontFamily: '"Amatic SC", cursive', fontWeight: "400" },
Anton: { fontFamily: "Anton, sans-serif", fontWeight: "400", textTransform: "uppercase" },
'Luckiest Guy': { fontFamily: '"Luckiest Guy", cursive', fontWeight: "400", textTransform: "uppercase" },
'Fredoka One': { fontFamily: '"Fredoka One", cursive', fontWeight: "400" },
Bangers: { fontFamily: "Bangers, cursive", fontWeight: "400", textTransform: "uppercase" },
Orbitron: { fontFamily: "Orbitron, sans-serif", fontWeight: "400" },
'Press Start 2P': { fontFamily: '"Press Start 2P", cursive', fontWeight: "400", fontSize: "0.85em" },
'Playfair Display': { fontFamily: '"Playfair Display", serif', fontWeight: "400" }
};
return { ...baseStyle, ...(fontMap[name] || {}) };
const fontEntry = fontTransforms[name];
if (!fontEntry) return baseStyle;
const style = { ...baseStyle };
if (fontEntry.fontFamily) style.fontFamily = fontEntry.fontFamily;
if (fontEntry.fontWeight) style.fontWeight = fontEntry.fontWeight;
if (fontEntry.textTransform) style.textTransform = fontEntry.textTransform;
if (fontEntry.letterSpacing) style.letterSpacing = fontEntry.letterSpacing;
if (fontEntry.fontSize) style.fontSize = fontEntry.fontSize;
return style;
}, []);
const previewText = sStr(transformedText) || "Hallo Instagram!";
@ -185,7 +175,7 @@ const PerformanceOptimizedFontCard = forwardRef(({
{copied ? (
<><Check className="w-4 h-4 mr-2" /> Copy! ✨</>
) : (
<><Copy className="w-4 h-4 mr-2" /> Copy! ✨ </>
<><Copy className="w-4 h-4 mr-2" /> Start Typing ✨ </>
)}
</Button>
</div>

165
components/fontTransforms.jsx
View File

@ -1,20 +1,18 @@
// components/fontTransforms.jsx
// Unicode-basiertes Font-Transformationsmapping für deine aktuelle Font-Liste
// Nutzt verschiedene Unicode-Blöcke, damit beim Kopieren der "fancy" Stil erhalten bleibt.
// 1) Definition der Unicode-Blöcke (Startpunkte)
// 1) Unicode-Blöcke (Startpunkte)
const unicodeBlocks = {
sansSerif: { upperStart: 0x1D5A0, lowerStart: 0x1D5BA }, // Mathematical Sans-Serif
sansSerifBold: { upperStart: 0x1D5D4, lowerStart: 0x1D5EE }, // Bold Sans-Serif
script: { upperStart: 0x1D49C, lowerStart: 0x1D4B6 }, // Mathematical Script
scriptBold: { upperStart: 0x1D4D0, lowerStart: 0x1D4EA }, // Bold Script
fraktur: { upperStart: 0x1D504, lowerStart: 0x1D51E }, // Mathematical Fraktur
frakturBold: { upperStart: 0x1D56C, lowerStart: 0x1D586 }, // Bold Fraktur
monospace: { upperStart: 0x1D670, lowerStart: 0x1D68A }, // Mathematical Monospace
fullwidth: { upperStart: 0xFF21, lowerStart: 0xFF41 } // Fullwidth Latin
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) Helfer zum Mappen von A-Z und a-z in den jeweiligen Unicode-Block
// 2) Unicode-Mapping-Helfer
const mapUnicode = (char, block) => {
const code = char.charCodeAt(0);
if (code >= 65 && code <= 90) return String.fromCodePoint(block.upperStart + (code - 65));
@ -23,64 +21,105 @@ const mapUnicode = (char, block) => {
};
const createTransform = (blockKey) => (text) =>
text
.split('')
.map((c) => mapUnicode(c, unicodeBlocks[blockKey]))
.join('');
text.split('').map((c) => mapUnicode(c, unicodeBlocks[blockKey])).join('');
// 3) Font-Transformations für deine Liste
export const fontTransforms = {
// 🔤 Modern – Clean & professional
Montserrat: { transform: createTransform('sansSerifBold'), category: 'modern', description: 'Montserrat – Sans-Serif Bold Unicode' },
Lato: { transform: createTransform('sansSerif'), category: 'modern', description: 'Lato – Humanistischer Sans-Serif Unicode' },
Raleway: { transform: createTransform('sansSerif'), category: 'modern', description: 'Raleway – Elegant Display Unicode' },
Poppins: { transform: createTransform('sansSerif'), category: 'modern', description: 'Poppins – Rund & freundlich Unicode' },
'Open Sans': { transform: createTransform('sansSerif'), category: 'modern', description: 'Open Sans – Vielseitig Unicode' },
Roboto: { transform: createTransform('sansSerif'), category: 'modern', description: 'Roboto – Modernes Grotesk Unicode' },
'Work Sans': { transform: createTransform('sansSerif'), category: 'modern', description: 'Work Sans – Tech & Clean Unicode' },
// 3) Font-Transformationen
export const fontTransforms = Object.fromEntries(
Object.entries({
// 🔤 Modern
Montserrat: ['sansSerifBold', 'modern', 'Montserrat – Sans-Serif Bold Unicode'],
Lato: ['sansSerif', 'modern', 'Lato – Humanistischer Sans-Serif Unicode'],
Raleway: ['sansSerif', 'modern', 'Raleway – Elegant Display Unicode'],
Poppins: ['sansSerif', 'modern', 'Poppins – Rund & freundlich Unicode'],
'Open Sans': ['sansSerif', 'modern', 'Open Sans – Vielseitig Unicode'],
Roboto: ['sansSerif', 'modern', 'Roboto – Modernes Grotesk Unicode'],
'Work Sans': ['sansSerif', 'modern', 'Work Sans – Tech & Clean Unicode'],
'Noto Sans': ['sansSerif', 'modern', 'Noto Sans – International Unicode'],
Jost: ['sansSerif', 'modern', 'Jost – Geometrisch modern Unicode'],
Quicksand: ['sansSerif', 'modern', 'Quicksand – Soft Rounded Unicode'],
'Averia Libre': ['sansSerif', 'modern', 'Averia Libre – Experimentell Unicode'],
'Philosopher': ['sansSerif', 'modern', 'Philosopher – Elegant Unicode'],
// ✍️ Handwriting – Personal & casual
Pacifico: { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Pacifico – Lockerer Pinsel Bold Script Unicode' },
Sacramento: { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Sacramento – Retro-Handlettering Bold Script Unicode' },
Caveat: { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Caveat – Natural Handwriting Bold Script Unicode' },
'Dancing Script': { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Dancing Script – Lebhafte Kursive Bold Script Unicode' },
'Indie Flower': { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Indie Flower – Verspieltes Bold Script Unicode' },
'Amatic SC': { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Amatic SC – Skizzenartiges Bold Script Unicode' },
'Kaushan Script': { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Kaushan Script – Fettere Kursive Bold Script Unicode' },
// ✍️ Handwriting
Pacifico: ['scriptBold', 'handwriting', 'Pacifico – Lockerer Pinsel Bold Script Unicode'],
Sacramento: ['scriptBold', 'handwriting', 'Sacramento – Retro-Handlettering Bold Script Unicode'],
Caveat: ['scriptBold', 'handwriting', 'Caveat – Natural Handwriting Bold Script Unicode'],
'Dancing Script': ['scriptBold', 'handwriting', 'Dancing Script – Lebhafte Kursive Bold Script Unicode'],
'Indie Flower': ['scriptBold', 'handwriting', 'Indie Flower – Verspieltes Bold Script Unicode'],
'Amatic SC': ['scriptBold', 'handwriting', 'Amatic SC – Skizzenartiges Bold Script Unicode'],
'Kaushan Script': ['scriptBold', 'handwriting', 'Kaushan Script – Fettere Kursive Bold Script Unicode'],
'Architects Daughter': ['scriptBold','handwriting', 'Architects Daughter – Skizzenhafte Handschrift Unicode'],
Neucha: ['scriptBold', 'handwriting', 'Neucha – Persönlich und kantig Unicode'],
'Great Vibes': ['scriptBold', 'handwriting', 'Great Vibes – Elegante Kalligraphie Unicode'],
Satisfy: ['scriptBold', 'handwriting', 'Satisfy – Weiche Script Unicode'],
Yellowtail: ['scriptBold', 'handwriting', 'Yellowtail – Vintage Script Unicode'],
'Gloria Hallelujah': ['scriptBold', 'handwriting', 'Gloria Hallelujah – Lebendige Handschrift Unicode'],
// 🧑‍🎤 Statement – Bold & eye-catching
Oswald: { transform: createTransform('sansSerifBold'), category: 'statement', description: 'Oswald – Bold Grotesk Unicode' },
'Bebas Neue': { transform: createTransform('fullwidth'), category: 'statement', description: 'Bebas Neue – Fullwidth Caps Unicode' },
Anton: { transform: createTransform('fullwidth'), category: 'statement', description: 'Anton – Plakative Fullwidth Unicode' },
Ultra: { transform: createTransform('sansSerifBold'), category: 'statement', description: 'Ultra – Kompakte Bold Unicode' },
'Stint Ultra Condensed': { transform: createTransform('sansSerifBold'), category: 'statement', description: 'Stint Ultra Condensed – Kompakte Bold Unicode' },
'Playfair Display': { transform: createTransform('scriptBold'), category: 'statement', description: 'Playfair Display – Elegante Bold Script Unicode' },
'Abril Fatface': { transform: createTransform('scriptBold'), category: 'statement', description: 'Abril Fatface – Fettere Bold Script Unicode' },
// 🧑‍🎤 Statement
Oswald: ['sansSerifBold', 'statement', 'Oswald – Bold Grotesk Unicode'],
'Bebas Neue': ['fullwidth', 'statement', 'Bebas Neue – Fullwidth Caps Unicode'],
Anton: ['fullwidth', 'statement', 'Anton – Plakative Fullwidth Unicode'],
Ultra: ['sansSerifBold', 'statement', 'Ultra – Kompakte Bold Unicode'],
'Stint Ultra Condensed': ['sansSerifBold', 'statement', 'Stint Ultra Condensed – Kompakte Bold Unicode'],
'Playfair Display': ['scriptBold', 'statement', 'Playfair Display – Elegante Bold Script Unicode'],
'Abril Fatface': ['scriptBold', 'statement', 'Abril Fatface – Fettere Bold Script Unicode'],
'Permanent Marker': ['scriptBold', 'statement', 'Permanent Marker – Marker-Style Unicode'],
'Alfa Slab One': ['fullwidth', 'statement', 'Alfa Slab One – Slab Serif Heavy Unicode'],
'Black Ops One': ['fullwidth', 'statement', 'Black Ops One – Military Display Unicode'],
'Germania One': ['frakturBold', 'statement', 'Germania One – Oldstyle Fraktur Unicode'],
'Holtwood One SC': ['fullwidth', 'statement', 'Holtwood One SC – Klassisch Bold Small Caps Unicode'],
Courgette: ['scriptBold', 'statement', 'Courgette – Verspieltes Script Unicode'],
// 🚀 Futuristic – Tech & gaming
Exo: { transform: createTransform('sansSerif'), category: 'futuristic', description: 'Exo – Tech Grotesk Unicode' },
Orbitron: { transform: createTransform('monospace'), category: 'futuristic', description: 'Orbitron – Sci-Fi Monospace Unicode' },
Audiowide: { transform: createTransform('monospace'), category: 'futuristic', description: 'Audiowide – Rundes Monospace Unicode' },
Rajdhani: { transform: createTransform('monospace'), category: 'futuristic', description: 'Rajdhani – Digital Monospace Unicode' },
'Space Mono': { transform: createTransform('monospace'), category: 'futuristic', description: 'Space Mono – Tech Monospace Unicode' },
Questrial: { transform: createTransform('sansSerif'), category: 'futuristic', description: 'Questrial – Clean Sans-Serif Unicode' },
// 🚀 Futuristic
Exo: ['sansSerif', 'futuristic', 'Exo – Tech Grotesk Unicode'],
Orbitron: ['monospace', 'futuristic', 'Orbitron – Sci-Fi Monospace Unicode'],
Audiowide: ['monospace', 'futuristic', 'Audiowide – Rundes Monospace Unicode'],
Rajdhani: ['monospace', 'futuristic', 'Rajdhani – Digital Monospace Unicode'],
'Space Mono': ['monospace', 'futuristic', 'Space Mono – Tech Monospace Unicode'],
Questrial: ['sansSerif', 'futuristic', 'Questrial – Clean Sans-Serif Unicode'],
'Syncopate': ['monospace', 'futuristic', 'Syncopate – Techno Unicode'],
'Unica One': ['monospace', 'futuristic', 'Unica One – Monospace Mix Unicode'],
'Italiana': ['sansSerif', 'futuristic', 'Italiana – Futuristisch Serif Unicode'],
'Staatliches': ['monospace', 'futuristic', 'Staatliches – Moderne Grotesk Unicode'],
// 🧢 Aesthetic – Retro & Instagram vibes
'Press Start 2P': { transform: createTransform('monospace'), category: 'aesthetic', description: 'Press Start 2P – Pixel Monospace Unicode' },
Righteous: { transform: createTransform('frakturBold'), category: 'aesthetic', description: 'Righteous – Stylische Bold Fraktur Unicode' },
'Metal Mania': { transform: createTransform('scriptBold'), category: 'aesthetic', description: 'Metal Mania – Fettere Script Unicode' }
};
// Hilfsfunktionen
export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10);
export const getFontsByCategory = (category) => (
category === 'all'
? Object.keys(fontTransforms)
: Object.keys(fontTransforms).filter(f => fontTransforms[f].category === category)
// 🧢 Aesthetic
'Press Start 2P': ['monospace', 'aesthetic', 'Press Start 2P – Pixel Monospace Unicode'],
Righteous: ['frakturBold', 'aesthetic', 'Righteous – Stylische Bold Fraktur Unicode'],
'Metal Mania': ['scriptBold', 'aesthetic', 'Metal Mania – Fettere Script Unicode'],
'Alegreya': ['frakturBold', 'aesthetic', 'Alegreya – Literatur Serif Unicode'],
'Spectral': ['frakturBold', 'aesthetic', 'Spectral – Editorial Serif Unicode'],
'Fjalla One': ['sansSerifBold', 'aesthetic', 'Fjalla One – Headline Sans Unicode'],
'Glass Antiqua': ['scriptBold', 'aesthetic', 'Glass Antiqua – Zarte Antiqua Script Unicode'],
'Cinzel Decorative': ['scriptBold', 'aesthetic', 'Cinzel Decorative – Klassische Zier-Serif Unicode'],
'Andika': ['sansSerif', 'aesthetic', 'Andika – Leserlich Unicode'],
'Almendra': ['scriptBold', 'aesthetic', 'Almendra – Historische Handschrift Unicode'],
}).map(([name, [block, category, description]]) => [
name,
{
transform: createTransform(block),
category,
description,
className: `font-${name.toLowerCase().replace(/\s+/g, '')}`,
},
])
);
// 🔝 Neue transformText-Funktion – gibt transformierten Text **und** Tailwind-Klasse zurück
export const transformText = (text, fontName) => {
const font = fontTransforms[fontName];
if (!font || !text) return text;
return font.transform(text);
if (!font || !text) return { transformed: text, fontClassName: '' };
return {
transformed: font.transform(text),
fontClassName: font.className,
};
};
// Weitere Helfer
export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10);
export const getFontsByCategory = (category) =>
category === 'all'
? Object.keys(fontTransforms)
: Object.keys(fontTransforms).filter(
(f) => fontTransforms[f].category === category
);

25
components/ui/FontCard.jsx
View File

@ -4,8 +4,9 @@ import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Copy, Check, Heart, Share2, Info } from "lucide-react";
import { fontTransforms } from "../fontTransforms";
import { transformText, fontTransforms } from "../fontTransforms";
import { getFontData } from "@/lib/fonts";
import fontMap from "@/lib/tailwind-font-map";
export default function FontCard({
fontName,
@ -19,12 +20,20 @@ export default function FontCard({
const fontInfo = fontTransforms[fontName];
const fontData = getFontData(fontName);
const displayText = transformedText || "Hallo Instagram!";
const fontKey = fontName.toLowerCase().replace(/\s+/g, "");
const fontVarName = fontMap[fontKey];
const fontVar = fontVarName ? { fontFamily: `var(${fontVarName})` } : {};
const fontClass = fontData?.className || "";
const rawText = "Hallo Instagram!";
const transformed = transformText(rawText, fontName);
const finalText = transformed?.transformed || rawText;
const copyText = transformed?.transformed || rawText;
const handleCopy = () => {
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard
.writeText(displayText)
.writeText(copyText)
.then(() => flashCopied())
.catch(() => fallbackCopy());
} else {
@ -39,7 +48,7 @@ export default function FontCard({
const fallbackCopy = () => {
const textarea = document.createElement("textarea");
textarea.value = displayText;
textarea.value = copyText;
textarea.setAttribute("readonly", "");
textarea.style.position = "fixed";
textarea.style.top = "0";
@ -69,7 +78,7 @@ export default function FontCard({
try {
await navigator.share({
title: `FancyText – ${fontName}`,
text: displayText,
text: copyText,
url: window.location.href,
});
} catch (err) {
@ -124,10 +133,10 @@ export default function FontCard({
<input
type="text"
value={displayText}
value={finalText}
readOnly
className={`${fontData.className} text-2xl md:text-3xl mb-6 p-4 bg-gray-50 rounded-xl text-center text-gray-800 min-h-[80px] w-full select-all border-0 focus:ring-0`}
style={{ lineHeight: "1.2" }}
className={`${fontClass} text-2xl md:text-3xl mb-6 p-4 bg-gray-50 rounded-xl text-center text-gray-800 min-h-[80px] w-full select-all border-0 focus:ring-0`}
style={{ ...fontVar, lineHeight: "1.2" }}
/>
<Button

459
lib/fonts.js
View File

@ -1,153 +1,324 @@
// 1) Google‑Fonts Platzhalter
export const inter = { className: "", variable: "--font-inter" };
export const roboto = { className: "", variable: "--font-roboto" };
export const openSans = { className: "", variable: "--font-opensans" };
export const montserrat = { className: "", variable: "--font-montserrat" };
export const raleway = { className: "", variable: "--font-raleway" };
export const poppins = { className: "", variable: "--font-poppins" };
export const manrope = { className: "", variable: "--font-manrope" };
export const dmSans = { className: "", variable: "--font-dmsans" };
export const plusJakartaSans = {
className: "",
variable: "--font-plusjakarta",
};
export const spaceGrotesk = { className: "", variable: "--font-spacegrotesk" };
// lib/fonts.js
import {
Montserrat,
Open_Sans,
Roboto,
Lato,
Raleway,
Poppins,
Work_Sans,
Jost,
Noto_Sans,
Quicksand,
Averia_Libre,
Philosopher,
Pacifico,
Caveat,
Sacramento,
Dancing_Script,
Indie_Flower,
Amatic_SC,
Kaushan_Script,
Architects_Daughter,
Neucha,
Great_Vibes,
Satisfy,
Yellowtail,
Gloria_Hallelujah,
Courgette,
Almendra,
Oswald,
Bebas_Neue,
Anton,
Ultra,
Stint_Ultra_Condensed,
Playfair_Display,
Abril_Fatface,
Permanent_Marker,
Alfa_Slab_One,
Black_Ops_One,
Germania_One,
Holtwood_One_SC,
Exo,
Orbitron,
Audiowide,
Rajdhani,
Space_Mono,
Questrial,
Syncopate,
Unica_One,
Italiana,
Staatliches,
Press_Start_2P,
Righteous,
Metal_Mania,
Alegreya,
Spectral,
Fjalla_One,
Glass_Antiqua,
Cinzel_Decorative,
Andika,
} from "next/font/google";
export const dancingScript = {
className: "",
function createFont(fontFn, name) {
return {
...fontFn,
className: `font-${name.toLowerCase().replace(/\s+/g, "")}`,
};
}
// 🔤 Modern Fonts
const montserrat = Montserrat({
subsets: ["latin"],
variable: "--font-montserrat",
});
const opensans = Open_Sans({ subsets: ["latin"], variable: "--font-opensans" });
const roboto = Roboto({ subsets: ["latin"], variable: "--font-roboto" });
const lato = Lato({ subsets: ["latin"], variable: "--font-lato" });
const raleway = Raleway({ subsets: ["latin"], variable: "--font-raleway" });
const poppins = Poppins({ subsets: ["latin"], variable: "--font-poppins" });
const worksans = Work_Sans({ subsets: ["latin"], variable: "--font-worksans" });
const jost = Jost({ subsets: ["latin"], variable: "--font-jost" });
const notosans = Noto_Sans({ subsets: ["latin"], variable: "--font-notosans" });
const quicksand = Quicksand({
subsets: ["latin"],
variable: "--font-quicksand",
});
const averialibre = Averia_Libre({
subsets: ["latin"],
variable: "--font-averialibre",
});
const philosopher = Philosopher({
subsets: ["latin"],
variable: "--font-philosopher",
});
// ✍️ Handwriting
const pacifico = Pacifico({ subsets: ["latin"], variable: "--font-pacifico" });
const caveat = Caveat({ subsets: ["latin"], variable: "--font-caveat" });
const sacramento = Sacramento({
subsets: ["latin"],
variable: "--font-sacramento",
});
const dancingscript = Dancing_Script({
subsets: ["latin"],
variable: "--font-dancingscript",
};
export const pacifico = { className: "", variable: "--font-pacifico" };
export const caveat = { className: "", variable: "--font-caveat" };
export const indieFlower = { className: "", variable: "--font-indieflower" };
export const greatVibes = { className: "", variable: "--font-greatvibes" };
export const sacramento = { className: "", variable: "--font-sacramento" };
export const alexBrush = { className: "", variable: "--font-alexbrush" };
export const amaticSC = { className: "", variable: "--font-amaticsc" };
export const marckScript = { className: "", variable: "--font-marckscript" };
export const protestRevolution = {
className: "",
variable: "--font-protestrevolution",
};
});
const indieflower = Indie_Flower({
subsets: ["latin"],
variable: "--font-indieflower",
});
const amaticsc = Amatic_SC({ subsets: ["latin"], variable: "--font-amatic" });
const kaushanscript = Kaushan_Script({
subsets: ["latin"],
variable: "--font-kaushan",
});
const architectsdaughter = Architects_Daughter({
subsets: ["latin"],
variable: "--font-architects",
});
const neucha = Neucha({ subsets: ["latin"], variable: "--font-neucha" });
const greatvibes = Great_Vibes({
subsets: ["latin"],
variable: "--font-greatvibes",
});
const satisfy = Satisfy({ subsets: ["latin"], variable: "--font-satisfy" });
const yellowtail = Yellowtail({
subsets: ["latin"],
variable: "--font-yellowtail",
});
const gloriahallelujah = Gloria_Hallelujah({
subsets: ["latin"],
variable: "--font-gloria",
});
const courgette = Courgette({
subsets: ["latin"],
variable: "--font-courgette",
});
const almendra = Almendra({ subsets: ["latin"], variable: "--font-almendra" });
export const anton = { className: "", variable: "--font-anton" };
export const bebasNeue = { className: "", variable: "--font-bebasneue" };
export const oswald = { className: "", variable: "--font-oswald" };
export const bangers = { className: "", variable: "--font-bangers" };
export const ultra = { className: "", variable: "--font-ultra" };
export const abrilFatface = { className: "", variable: "--font-abrilfatface" };
export const fjallaOne = { className: "", variable: "--font-fjallaone" };
export const fredokaOne = { className: "", variable: "--font-fredokaone" };
export const luckiestGuy = { className: "", variable: "--font-luckiestguy" };
export const fugazOne = { className: "", variable: "--font-fugazone" };
export const shrikhand = { className: "", variable: "--font-shrikhand" };
export const chango = { className: "", variable: "--font-chango" };
export const gravitasOne = { className: "", variable: "--font-gravitasone" };
export const coiny = { className: "", variable: "--font-coiny" };
export const quicksand = { className: "", variable: "--font-quicksand" };
// 🧑‍🎤 Statement
const oswald = Oswald({ subsets: ["latin"], variable: "--font-oswald" });
const bebasneue = Bebas_Neue({
subsets: ["latin"],
variable: "--font-bebasneue",
});
const anton = Anton({
subsets: ["latin"],
weight: "400",
variable: "--font-anton",
});
const ultra = Ultra({ subsets: ["latin"], variable: "--font-ultra" });
const stintultracondensed = Stint_Ultra_Condensed({
subsets: ["latin"],
variable: "--font-stint",
});
const playfair = Playfair_Display({
subsets: ["latin"],
variable: "--font-playfair",
});
const abril = Abril_Fatface({
subsets: ["latin"],
weight: "400",
variable: "--font-abril",
});
const permanentmarker = Permanent_Marker({
subsets: ["latin"],
weight: "400",
variable: "--font-permanentmarker",
});
const alfaslab = Alfa_Slab_One({
subsets: ["latin"],
weight: "400",
variable: "--font-alfaslab",
});
const blackops = Black_Ops_One({
subsets: ["latin"],
weight: "400",
variable: "--font-blackops",
});
const germania = Germania_One({
subsets: ["latin"],
weight: "400",
variable: "--font-germania",
});
const holtwood = Holtwood_One_SC({
subsets: ["latin"],
weight: "400",
variable: "--font-holtwood",
});
export const orbitron = { className: "", variable: "--font-orbitron" };
export const zenDots = { className: "", variable: "--font-zendots" };
export const audiowide = { className: "", variable: "--font-audiowide" };
export const exo2 = { className: "", variable: "--font-exo2" };
export const rajdhani = { className: "", variable: "--font-rajdhani" };
export const syncopate = { className: "", variable: "--font-syncopate" };
export const pressStart2p = { className: "", variable: "--font-pressstart2p" };
export const shareTechMono = {
className: "",
variable: "--font-sharetechmono",
};
// 🚀 Futuristic
const exo = Exo({ subsets: ["latin"], variable: "--font-exo" });
const orbitron = Orbitron({
subsets: ["latin"],
weight: "400",
variable: "--font-orbitron",
});
const audiowide = Audiowide({
subsets: ["latin"],
weight: "400",
variable: "--font-audiowide",
});
const rajdhani = Rajdhani({ subsets: ["latin"], variable: "--font-rajdhani" });
const spacemono = Space_Mono({
subsets: ["latin"],
variable: "--font-spacemono",
});
const questrial = Questrial({
subsets: ["latin"],
variable: "--font-questrial",
});
const syncopate = Syncopate({
subsets: ["latin"],
variable: "--font-syncopate",
});
const unicaone = Unica_One({ subsets: ["latin"], variable: "--font-unicaone" });
const italiana = Italiana({ subsets: ["latin"], variable: "--font-italiana" });
const staatliches = Staatliches({
subsets: ["latin"],
weight: "400",
variable: "--font-staatliches",
});
export const playfairDisplay = {
className: "",
variable: "--font-playfairdisplay",
};
export const cinzel = { className: "", variable: "--font-cinzel" };
export const italiana = { className: "", variable: "--font-italiana" };
export const youngSerif = { className: "", variable: "--font-youngserif" };
export const caprasimo = { className: "", variable: "--font-caprasimo" };
export const righteous = { className: "", variable: "--font-righteous" };
export const luxuriousRoman = {
className: "",
variable: "--font-luxuriousroman",
};
// 🧢 Aesthetic
const pressstart2p = Press_Start_2P({
subsets: ["latin"],
variable: "--font-pressstart2p",
});
const righteous = Righteous({
subsets: ["latin"],
weight: "400",
variable: "--font-righteous",
});
const metalmania = Metal_Mania({
subsets: ["latin"],
weight: "400",
variable: "--font-metalmania",
});
const alegreya = Alegreya({ subsets: ["latin"], variable: "--font-alegreya" });
const spectral = Spectral({ subsets: ["latin"], variable: "--font-spectral" });
const fjallaone = Fjalla_One({
subsets: ["latin"],
variable: "--font-fjallaone",
});
const glassantiqua = Glass_Antiqua({
subsets: ["latin"],
variable: "--font-glassantiqua",
});
const cinzeldecorative = Cinzel_Decorative({
subsets: ["latin"],
variable: "--font-cinzeldecorative",
});
const andika = Andika({
subsets: ["latin"],
weight: "400",
variable: "--font-andika",
});
export const vt323 = { className: "", variable: "--font-vt323" };
export const neonderthaw = { className: "", variable: "--font-neonderthaw" };
// 2) System‑Fonts
export const systemFonts = {
helvetica: { className: "font-helvetica", variable: "--font-helvetica" },
arial: { className: "font-arial", variable: "--font-arial" },
comicSans: { className: "font-comicsans", variable: "--font-comicsans" },
};
// 3) Pseudo‑Fonts
export const pseudoFonts = {
bubble: { className: "", variable: "--font-bubble" },
glitch: { className: "", variable: "--font-glitch" },
wide: { className: "", variable: "--font-wide" },
upsideDown: { className: "", variable: "--font-upsidedown" },
strikethrough: { className: "", variable: "--font-strikethrough" },
underline: { className: "", variable: "--font-underline" },
};
// Zusammenfassung aller Fonts
export const fonts = {
Inter: inter,
Roboto: roboto,
Open_Sans: openSans,
Montserrat: montserrat,
Raleway: raleway,
Poppins: poppins,
Manrope: manrope,
DM_Sans: dmSans,
Plus_Jakarta_Sans: plusJakartaSans,
Space_Grotesk: spaceGrotesk,
Dancing_Script: dancingScript,
Pacifico: pacifico,
Caveat: caveat,
Indie_Flower: indieFlower,
Great_Vibes: greatVibes,
Sacramento: sacramento,
Alex_Brush: alexBrush,
Amatic_SC: amaticSC,
Marck_Script: marckScript,
Protest_Revolution: protestRevolution,
Anton: anton,
Bebas_Neue: bebasNeue,
Oswald: oswald,
Bangers: bangers,
Ultra: ultra,
Abril_Fatface: abrilFatface,
Fjalla_One: fjallaOne,
Fredoka_One: fredokaOne,
Luckiest_Guy: luckiestGuy,
Fugaz_One: fugazOne,
Shrikhand: shrikhand,
Chango: chango,
Gravitas_One: gravitasOne,
Coiny: coiny,
Quicksand: quicksand,
Orbitron: orbitron,
Zen_Dots: zenDots,
Audiowide: audiowide,
Exo_2: exo2,
Rajdhani: rajdhani,
Syncopate: syncopate,
Press_Start_2P: pressStart2p,
Share_Tech_Mono: shareTechMono,
Playfair_Display: playfairDisplay,
Cinzel: cinzel,
Italiana: italiana,
Young_Serif: youngSerif,
Caprasimo: caprasimo,
Righteous: righteous,
Luxurious_Roman: luxuriousRoman,
VT323: vt323,
Neonderthaw: neonderthaw,
...systemFonts,
...pseudoFonts,
Montserrat: createFont(montserrat, "montserrat"),
"Open Sans": createFont(opensans, "opensans"),
Roboto: createFont(roboto, "roboto"),
Lato: createFont(lato, "lato"),
Raleway: createFont(raleway, "raleway"),
Poppins: createFont(poppins, "poppins"),
"Work Sans": createFont(worksans, "worksans"),
Jost: createFont(jost, "jost"),
"Noto Sans": createFont(notosans, "notosans"),
Quicksand: createFont(quicksand, "quicksand"),
"Averia Libre": createFont(averialibre, "averialibre"),
Philosopher: createFont(philosopher, "philosopher"),
Pacifico: createFont(pacifico, "pacifico"),
Caveat: createFont(caveat, "caveat"),
Sacramento: createFont(sacramento, "sacramento"),
"Dancing Script": createFont(dancingscript, "dancingscript"),
"Indie Flower": createFont(indieflower, "indieflower"),
"Amatic SC": createFont(amaticsc, "amatic"),
"Kaushan Script": createFont(kaushanscript, "kaushan"),
"Architects Daughter": createFont(architectsdaughter, "architects"),
Neucha: createFont(neucha, "neucha"),
"Great Vibes": createFont(greatvibes, "greatvibes"),
Satisfy: createFont(satisfy, "satisfy"),
Yellowtail: createFont(yellowtail, "yellowtail"),
"Gloria Hallelujah": createFont(gloriahallelujah, "gloria"),
Courgette: createFont(courgette, "courgette"),
Almendra: createFont(almendra, "almendra"),
Oswald: createFont(oswald, "oswald"),
"Bebas Neue": createFont(bebasneue, "bebasneue"),
Anton: createFont(anton, "anton"),
Ultra: createFont(ultra, "ultra"),
"Stint Ultra Condensed": createFont(stintultracondensed, "stint"),
"Playfair Display": createFont(playfair, "playfair"),
"Abril Fatface": createFont(abril, "abril"),
"Permanent Marker": createFont(permanentmarker, "permanentmarker"),
"Alfa Slab One": createFont(alfaslab, "alfaslab"),
"Black Ops One": createFont(blackops, "blackops"),
"Germania One": createFont(germania, "germania"),
"Holtwood One SC": createFont(holtwood, "holtwood"),
Exo: createFont(exo, "exo"),
Orbitron: createFont(orbitron, "orbitron"),
Audiowide: createFont(audiowide, "audiowide"),
Rajdhani: createFont(rajdhani, "rajdhani"),
"Space Mono": createFont(spacemono, "spacemono"),
Questrial: createFont(questrial, "questrial"),
Syncopate: createFont(syncopate, "syncopate"),
"Unica One": createFont(unicaone, "unicaone"),
Italiana: createFont(italiana, "italiana"),
Staatliches: createFont(staatliches, "staatliches"),
"Press Start 2P": createFont(pressstart2p, "pressstart2p"),
Righteous: createFont(righteous, "righteous"),
"Metal Mania": createFont(metalmania, "metalmania"),
Alegreya: createFont(alegreya, "alegreya"),
Spectral: createFont(spectral, "spectral"),
"Fjalla One": createFont(fjallaone, "fjallaone"),
"Glass Antiqua": createFont(glassantiqua, "glassantiqua"),
"Cinzel Decorative": createFont(cinzeldecorative, "cinzeldecorative"),
Andika: createFont(andika, "andika"),
};
export const getFontData = (key) => fonts[key] ?? inter;
export const getFontData = (key) => fonts[key] ?? fonts["Anton"];

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

@ -1,14 +1,69 @@
/**
* Enthält **nur** die CSS‑Variablen‑Namen, die next/font im Browser setzt.
* In fonts.js werden sie erzeugt, hier referenzieren wir sie nur.
* In fonts.js oder per @font-face werden sie erzeugt – hier referenzieren wir sie.
*/
export default {
montserrat: "--font-montserrat",
bebasneue: "--font-bebasneue",
lato: "--font-lato",
raleway: "--font-raleway",
poppins: "--font-poppins",
opensans: "--font-opensans",
roboto: "--font-roboto",
worksans: "--font-worksans",
notosans: "--font-notosans",
jost: "--font-jost",
quicksand: "--font-quicksand",
averialibre: "--font-averialibre",
philosopher: "--font-philosopher",
pacifico: "--font-pacifico",
sacramento: "--font-sacramento",
caveat: "--font-caveat",
fredokaone: "--font-fredokaone",
playfair: "--font-playfair",
vt323: "--font-vt323",
// … alle weiteren Fonts, die du brauchst
dancingscript: "--font-dancingscript",
indieflower: "--font-indieflower",
amaticsc: "--font-amatic",
kaushanscript: "--font-kaushan",
architectsdaughter: "--font-architects",
neucha: "--font-neucha",
greatvibes: "--font-greatvibes",
satisfy: "--font-satisfy",
yellowtail: "--font-yellowtail",
gloriahallelujah: "--font-gloria",
oswald: "--font-oswald",
bebasneue: "--font-bebasneue",
anton: "--font-anton",
ultra: "--font-ultra",
stintultracondensed: "--font-stint",
playfairdisplay: "--font-playfair",
abrilfatface: "--font-abril",
permanentmarker: "--font-permanentmarker",
alfaslabone: "--font-alfaslab",
blackopsone: "--font-blackops",
germaniaone: "--font-germania",
holtwoodonesc: "--font-holtwood",
courgette: "--font-courgette",
exo: "--font-exo",
orbitron: "--font-orbitron",
audiowide: "--font-audiowide",
rajdhani: "--font-rajdhani",
spacemono: "--font-spacemono",
questrial: "--font-questrial",
syncopate: "--font-syncopate",
unicaone: "--font-unicaone",
italiana: "--font-italiana",
staatliches: "--font-staatliches",
pressstart2p: "--font-pressstart2p",
righteous: "--font-righteous",
metalmania: "--font-metalmania",
alegreya: "--font-alegreya",
spectral: "--font-spectral",
fjallaone: "--font-fjallaone",
glassantiqua: "--font-glassantiqua",
cinzeldecorative: "--font-cinzeldecorative",
andika: "--font-andika",
almendra: "--font-almendra",
};

14
next.config.js
View File

@ -1,9 +1,15 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
// Deine sonstigen Next‑Optionen, z.B.:
// reactStrictMode: true,
// images: { domains: [...] },
// rewrites: async () => [ ... ],
experimental: {
fontLoaders: [
{
loader: "@next/font/google",
options: {
subsets: ["latin"],
},
},
],
},
};
module.exports = nextConfig;

1193
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
pages/_app.js
View File

@ -1,10 +1,10 @@
// pages/_app.jsx
import "@/styles/tailwind.build.css"; // dein Tailwind‑Build
import { fonts } from "@/lib/fonts";
// Alle CSS‑Variablen aus deinen next/font‑Loaders, damit die Utilities greifen
// CSS-Variablen für alle Fonts aus next/font/google
const allFontVars = Object.values(fonts)
.filter((f) => f?.variable)
.map((f) => f.variable)
.join(" ");

12
pages/_document.js
View File

@ -14,10 +14,18 @@ export default class MyDocument extends Document {
crossOrigin=""
/>
{/* Alle 30 Google‑Fonts */}
{/* Google Fonts – ALLE 60 Fonts */}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto:wght@100..900&family=Open+Sans&family=Montserrat:wght@100..900&family=Raleway:wght@100..900&family=Poppins:wght@100..900&family=Manrope:wght@100..700&family=Dancing+Script&family=Pacifico&family=Caveat&family=Indie+Flower&family=Great+Vibes&family=Sacramento&family=Alex+Brush&family=Anton&family=Bebas+Neue&family=Oswald:wght@200..700&family=Bangers&family=Abril+Fatface&family=Fredoka+One&family=Luckiest+Guy&family=Orbitron&family=Audiowide&family=Exo+2&family=Rajdhani&family=Syncopate&family=Press+Start+2P&family=Share+Tech+Mono&family=Playfair+Display&family=Cinzel&family=Italiana&family=Young+Serif&family=Caprasimo&family=Righteous&family=Luxurious+Roman&family=VT323&family=Neonderthaw&display=swap"
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto&family=Open+Sans&family=Montserrat:wght@100..900&family=Raleway:wght@100..900&family=Poppins:wght@100..900&family=Manrope:wght@100..700&family=Jost:wght@100..900&family=Quicksand&family=Noto+Sans&family=Syncopate&family=Orbitron&family=Work+Sans&family=Spectral&family=Philosopher&family=Alegreya&family=Holtwood+One+SC&family=Italiana&family=Almendra&family=Cinzel+Decorative&family=Staatliches&family=Averia+Libre&family=Germania+One&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Pacifico&family=Great+Vibes&family=Courgette&family=Architects+Daughter&family=Neucha&family=Satisfy&family=Yellowtail&family=Indie+Flower&family=Gloria+Hallelujah&family=Alex+Brush&family=Dancing+Script&family=Kaushan+Script&family=Sacramento&family=Amatic+SC&family=Caveat&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Ultra&family=Oswald:wght@200..700&family=Playfair+Display&family=Abril+Fatface&family=Black+Ops+One&family=Righteous&family=Metal+Mania&family=Press+Start+2P&family=Stint+Ultra+Condensed&family=Exo&family=Audiowide&family=Rajdhani&family=Questrial&family=Space+Mono&family=Unica+One&family=Glass+Antiqua&family=Fjalla+One&family=Bungee&family=Andika&family=Alfa+Slab+One&family=Permanent+Marker&display=swap"
/>
</Head>
<body>

287
styles/globals.css
View File

@ -1,15 +1,185 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap");
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
/* === Lokale Fonts einbinden via @font-face === */
@font-face {
font-family: "Montserrat";
src: url("/fonts/Montserrat-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Bebas Neue";
src: url("/fonts/BebasNeue-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Pacifico";
src: url("/fonts/Pacifico-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Caveat";
src: url("/fonts/Caveat-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Fredoka One";
src: url("/fonts/FredokaOne-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Playfair Display";
src: url("/fonts/PlayfairDisplay-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "VT323";
src: url("/fonts/VT323-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Amatic SC";
src: url("/fonts/AmaticSC-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Architects Daughter";
src: url("/fonts/ArchitectsDaughter-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Averia Libre";
src: url("/fonts/AveriaLibre-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Black Ops One";
src: url("/fonts/BlackOpsOne-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Cinzel Decorative";
src: url("/fonts/CinzelDecorative-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Courgette";
src: url("/fonts/Courgette-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Dancing Script";
src: url("/fonts/DancingScript-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Fjalla One";
src: url("/fonts/FjallaOne-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Germania One";
src: url("/fonts/GermaniaOne-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Glass Antiqua";
src: url("/fonts/GlassAntiqua-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Great Vibes";
src: url("/fonts/GreatVibes-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Neucha";
src: url("/fonts/Neucha-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Noto Sans";
src: url("/fonts/NotoSans-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Philosopher";
src: url("/fonts/Philosopher-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Press Start 2P";
src: url("/fonts/PressStart2P-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Righteous";
src: url("/fonts/Righteous-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Satisfy";
src: url("/fonts/Satisfy-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Sacramento";
src: url("/fonts/Sacramento-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Syncopate";
src: url("/fonts/Syncopate-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Orbitron";
src: url("/fonts/Orbitron-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Ultra";
src: url("/fonts/Ultra-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Staatliches";
src: url("/fonts/Staatliches-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Unica One";
src: url("/fonts/UnicaOne-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Italiana";
src: url("/fonts/Italiana-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Alfa Slab One";
src: url("/fonts/AlfaSlabOne-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Andika";
src: url("/fonts/Andika-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Alegreya";
src: url("/fonts/Alegreya-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Spectral";
src: url("/fonts/Spectral-Regular.ttf") format("truetype");
font-weight: 400;
}
/* Utility-Klassen für lokale Fonts */
@layer utilities {
.font-montserrat {
font-family: "Montserrat", sans-serif;
@ -32,42 +202,99 @@
.font-vt323 {
font-family: "VT323", monospace;
}
/* Pseudo / Unicode – Platzhalter */
.font-bubble {
font-family: inherit;
.font-amaticsc {
font-family: "Amatic SC", cursive;
}
.font-glitch {
font-family: inherit;
.font-architectsdaughter {
font-family: "Architects Daughter", cursive;
}
.font-wide {
font-family: inherit;
.font-averialibre {
font-family: "Averia Libre", cursive;
}
.font-upsidedown {
font-family: inherit;
.font-blackopsone {
font-family: "Black Ops One", sans-serif;
}
.font-strike {
text-decoration: line-through;
.font-cinzeldecorative {
font-family: "Cinzel Decorative", serif;
}
.font-underline {
text-decoration: underline;
}
}
/* eigene Zusatz‑Utilities */
@layer utilities {
.font-chilanka {
font-family: "Chilanka", cursive;
.font-courgette {
font-family: "Courgette", cursive;
}
.font-dancingscript {
font-family: "Dancing Script", cursive;
}
.font-fjallaone {
font-family: "Fjalla One", sans-serif;
}
.font-germaniaone {
font-family: "Germania One", serif;
}
.font-glassantiqua {
font-family: "Glass Antiqua", cursive;
}
.font-greatvibes {
font-family: "Great Vibes", cursive;
}
.font-neucha {
font-family: "Neucha", cursive;
}
.font-notosans {
font-family: "Noto Sans", sans-serif;
}
.font-philosopher {
font-family: "Philosopher", sans-serif;
}
.font-pressstart2p {
font-family: "Press Start 2P", monospace;
}
.font-righteous {
font-family: "Righteous", cursive;
}
.font-satisfy {
font-family: "Satisfy", cursive;
}
.font-sacramento {
font-family: "Sacramento", cursive;
}
.font-syncopate {
font-family: "Syncopate", sans-serif;
}
.font-orbitron {
font-family: "Orbitron", sans-serif;
}
.font-ultra {
font-family: "Ultra", serif;
}
.font-staatliches {
font-family: "Staatliches", sans-serif;
}
.font-unicaone {
font-family: "Unica One", sans-serif;
}
.font-italiana {
font-family: "Italiana", serif;
}
.font-alfaslabone {
font-family: "Alfa Slab One", serif;
}
.font-andika {
font-family: "Andika", sans-serif;
}
.font-alegreya {
font-family: "Alegreya", serif;
}
.font-spectral {
font-family: "Spectral", serif;
}
}
/* Komponenten und sonstige Styles */
@layer components {
.text-shadow-lg {
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
}
/* Schnell‑Check */
body {
background: #111;
color: #fff;

0
styles/local-fonts.css Normal file
View File

60
tailwind.config.js
View File

@ -1,29 +1,57 @@
// tailwind.config.js
import { fonts } from "./lib/fonts.js";
const fontFamily = Object.fromEntries(
Object.entries(fonts)
.filter(([, d]) => d?.variable)
.map(([name, d]) => [
name.toLowerCase().replace(/\s+/g, ""),
[`var(${d.variable})`],
])
);
export default {
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
"./lib/**/*.{js,jsx,ts,tsx}",
"./styles/**/*.{css,js}",
],
theme: { extend: { fontFamily } },
theme: {
extend: {
fontFamily: {
montserrat: ["'Montserrat'", "sans-serif"],
bebasneue: ["'Bebas Neue'", "cursive"],
pacifico: ["'Pacifico'", "cursive"],
caveat: ["'Caveat'", "cursive"],
fredokaone: ["'Fredoka One'", "cursive"],
playfair: ["'Playfair Display'", "serif"],
vt323: ["'VT323'", "monospace"],
amaticsc: ["'Amatic SC'", "cursive"],
architectsdaughter: ["'Architects Daughter'", "cursive"],
averialibre: ["'Averia Libre'", "cursive"],
blackopsone: ["'Black Ops One'", "sans-serif"],
cinzeldecorative: ["'Cinzel Decorative'", "serif"],
courgette: ["'Courgette'", "cursive"],
dancingscript: ["'Dancing Script'", "cursive"],
fjallaone: ["'Fjalla One'", "sans-serif"],
germaniaone: ["'Germania One'", "serif"],
glassantiqua: ["'Glass Antiqua'", "cursive"],
greatvibes: ["'Great Vibes'", "cursive"],
neucha: ["'Neucha'", "cursive"],
notosans: ["'Noto Sans'", "sans-serif"],
philosopher: ["'Philosopher'", "sans-serif"],
pressstart2p: ["'Press Start 2P'", "monospace"],
righteous: ["'Righteous'", "cursive"],
satisfy: ["'Satisfy'", "cursive"],
sacramento: ["'Sacramento'", "cursive"],
syncopate: ["'Syncopate'", "sans-serif"],
orbitron: ["'Orbitron'", "sans-serif"],
ultra: ["'Ultra'", "serif"],
staatliches: ["'Staatliches'", "sans-serif"],
unicaone: ["'Unica One'", "sans-serif"],
italiana: ["'Italiana'", "serif"],
alfaslabone: ["'Alfa Slab One'", "serif"],
andika: ["'Andika'", "sans-serif"],
alegreya: ["'Alegreya'", "serif"],
spectral: ["'Spectral'", "serif"],
},
},
},
plugins: [],
// <<< Hier kommt die Safelist >>>
safelist: [
{
pattern: /^font-/,
variants: ["sm", "md", "lg", "xl"], // optional, falls responsive Klassen gebraucht werden
variants: ["sm", "md", "lg", "xl"],
},
],
};

17
tailwind.config.mjs
View File

@ -1,4 +1,4 @@
import tailwindFonts from "./lib/tailwind-font-map.js"; // ← **ASCII‑Minus!**
import tailwindFonts from "./lib/tailwind-font-map.js"; // ← **ASCII‑Minus wichtig!**
/** @type {import('tailwindcss').Config} */
export default {
@ -10,12 +10,15 @@ export default {
],
theme: {
extend: {
fontFamily: Object.fromEntries(
Object.entries(tailwindFonts).map(([k, cssVar]) => [
k,
[`var(${cssVar})`],
])
),
fontFamily: {
// Dynamische Zuordnung: z. B. roboto: ['var(--font-roboto)']
...Object.fromEntries(
Object.entries(tailwindFonts).map(([key, cssVar]) => [
key,
[`var(${cssVar})`],
])
),
},
},
},
plugins: [],