Fonts werden teilweise geladen
This commit is contained in:
parent
b701dbe30d
commit
d9508cc196
|
|
@ -0,0 +1,64 @@
|
|||
import { useState } from "react";
|
||||
import { fontTransforms, transformText } from "@/components/fontTransforms";
|
||||
|
||||
export default function FancyTextPreview() {
|
||||
const [inputText, setInputText] = useState("Hello Instagram");
|
||||
const [copiedIndex, setCopiedIndex] = useState(null);
|
||||
|
||||
const allFonts = Object.keys(fontTransforms);
|
||||
|
||||
const handleCopy = async (text, index) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopiedIndex(index);
|
||||
setTimeout(() => setCopiedIndex(null), 1500);
|
||||
} catch (err) {
|
||||
console.error("Copy failed:", err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-4">
|
||||
<input
|
||||
type="text"
|
||||
className="w-full border rounded px-4 py-2 mb-6 text-lg"
|
||||
value={inputText}
|
||||
onChange={(e) => setInputText(e.target.value)}
|
||||
placeholder="Type something..."
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{allFonts.map((fontName, index) => {
|
||||
const { transformed, fontClassName } = transformText(inputText, fontName);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={fontName}
|
||||
className="border-b pb-4 flex flex-col gap-2"
|
||||
>
|
||||
<p className="text-sm font-semibold text-gray-700">{fontName}</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{/* ⬇️ Normale Textvorschau mit Webfont */}
|
||||
<p className={`text-xl ${fontClassName}`}>
|
||||
{inputText || "Hello Instagram"}
|
||||
</p>
|
||||
|
||||
{/* ⬇️ Fancy Unicode-Text */}
|
||||
<p className="text-xl text-gray-600">
|
||||
{transformed}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="self-start mt-1 text-sm bg-gray-200 hover:bg-gray-300 rounded px-3 py-1"
|
||||
onClick={() => handleCopy(transformed, index)}
|
||||
>
|
||||
{copiedIndex === index ? "Copied!" : "Copy"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@ const PerformanceOptimizedFontCard = forwardRef(({
|
|||
});
|
||||
|
||||
const handleCopy = useCallback(async () => {
|
||||
const textToCopy = sStr(transformedText);
|
||||
const textToCopy = sStr(transformedText?.transformed ?? transformedText);
|
||||
try {
|
||||
await navigator.clipboard.writeText(textToCopy);
|
||||
setCopied(true);
|
||||
|
|
@ -76,7 +76,7 @@ const PerformanceOptimizedFontCard = forwardRef(({
|
|||
}, [liked, fontName, onLike]);
|
||||
|
||||
const handleShare = useCallback(async () => {
|
||||
const shareText = `${sStr(transformedText)}\n\nErstellt mit FancyText: ${window.location.href}`;
|
||||
const shareText = `${sStr(transformedText?.transformed ?? transformedText)}\n\nErstellt mit FancyText: ${window.location.href}`;
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({ title: "Schau dir diese coole Schriftart an! 🔥", text: shareText, url: window.location.href });
|
||||
|
|
@ -107,7 +107,8 @@ const PerformanceOptimizedFontCard = forwardRef(({
|
|||
return style;
|
||||
}, []);
|
||||
|
||||
const previewText = sStr(transformedText) || "Hallo Instagram!";
|
||||
const previewText = sStr(transformedText?.transformed ?? transformedText) || "Hallo Instagram!";
|
||||
const fontClass = transformedText?.fontClassName ?? "";
|
||||
|
||||
return (
|
||||
<div ref={ref} className="will-change-transform mb-6">
|
||||
|
|
@ -158,7 +159,7 @@ const PerformanceOptimizedFontCard = forwardRef(({
|
|||
onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && handleCopy()}
|
||||
aria-label="Click to copy text"
|
||||
style={{ ...getFontStyle(fontName), pointerEvents: "auto" }}
|
||||
className="text-xl sm-text-2xl md-text-3xl mb-4 p-3 sm:p-4 bg-gray-50 rounded-xl text-center select-all text-gray-800 min-h-[70px] sm:min-h-[80px] flex items-center justify-center cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
className={`text-xl sm-text-2xl md-text-3xl mb-4 p-3 sm:p-4 bg-gray-50 rounded-xl text-center select-all text-gray-800 min-h-[70px] sm:min-h-[80px] flex items-center justify-center cursor-pointer hover:bg-gray-100 transition-colors ${fontClass}`}
|
||||
>
|
||||
{previewText}
|
||||
</div>
|
||||
|
|
@ -175,7 +176,7 @@ const PerformanceOptimizedFontCard = forwardRef(({
|
|||
{copied ? (
|
||||
<><Check className="w-4 h-4 mr-2" /> Copy! ✨</>
|
||||
) : (
|
||||
<><Copy className="w-4 h-4 mr-2" /> Start Typing ✨ </>
|
||||
<><Copy className="w-4 h-4 mr-2" /> Copy! ✨</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// components/fontTransforms.jsx
|
||||
|
||||
// 1) Unicode-Blöcke (Startpunkte)
|
||||
// 1) Unicode-Blöcke
|
||||
const unicodeBlocks = {
|
||||
sansSerif: { upperStart: 0x1D5A0, lowerStart: 0x1D5BA },
|
||||
sansSerifBold: { upperStart: 0x1D5D4, lowerStart: 0x1D5EE },
|
||||
|
|
@ -12,7 +12,7 @@ const unicodeBlocks = {
|
|||
fullwidth: { upperStart: 0xFF21, lowerStart: 0xFF41 }
|
||||
};
|
||||
|
||||
// 2) Unicode-Mapping-Helfer
|
||||
// 2) Unicode-Mapping-Funktion
|
||||
const mapUnicode = (char, block) => {
|
||||
const code = char.charCodeAt(0);
|
||||
if (code >= 65 && code <= 90) return String.fromCodePoint(block.upperStart + (code - 65));
|
||||
|
|
@ -23,101 +23,64 @@ const mapUnicode = (char, block) => {
|
|||
const createTransform = (blockKey) => (text) =>
|
||||
text.split('').map((c) => mapUnicode(c, unicodeBlocks[blockKey])).join('');
|
||||
|
||||
// 3) Font-Transformationen
|
||||
// 3) Font-Definitionen
|
||||
const fontList = [
|
||||
"abril-fatface", "alegreya", "alfa-slab-one", "almendra", "amatic-sc", "andika",
|
||||
"architects-daughter", "audiowide", "averia-libre", "bebas-neue", "black-ops-one",
|
||||
"caveat", "cinzel-decorative", "courgette", "dancing-script", "exo", "fjalla-one",
|
||||
"germania-one", "glass-antiqua", "gloria-hallelujah", "great-vibes", "holtwood-one-sc",
|
||||
"indie-flower", "italiana", "jost", "kaushan-script", "lato", "metal-mania", "montserrat",
|
||||
"neucha", "noto-sans", "open-sans", "orbitron", "oswald", "pacifico", "permanent-marker",
|
||||
"philosopher", "playfair-display", "poppins", "press-start-2p", "questrial", "quicksand",
|
||||
"rajdhani", "raleway", "righteous", "roboto", "sacramento", "satisfy", "space-mono",
|
||||
"spectral", "staatliches", "stint-ultra-condensed", "syncopate", "ultra", "unica-one",
|
||||
"work-sans", "yellowtail"
|
||||
];
|
||||
|
||||
// 4) Kategorie-Regeln (vereinfacht)
|
||||
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";
|
||||
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 (["exo", "orbitron", "audiowide", "rajdhani", "space-mono", "questrial", "syncopate", "unica-one", "italiana", "staatliches"].includes(name)) return "futuristic";
|
||||
if (["press-start-2p", "righteous", "metal-mania", "alegreya", "spectral", "fjalla-one", "glass-antiqua", "cinzel-decorative", "andika"].includes(name)) return "aesthetic";
|
||||
return "modern";
|
||||
};
|
||||
|
||||
const blockForCategory = {
|
||||
modern: "sansSerif",
|
||||
handwriting: "scriptBold",
|
||||
statement: "fullwidth",
|
||||
futuristic: "monospace",
|
||||
aesthetic: "frakturBold"
|
||||
};
|
||||
|
||||
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
|
||||
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
|
||||
Oswald: ['sansSerifBold', 'statement', 'Oswald – Bold Grotesk Unicode'],
|
||||
'Bebas Neue': ['fullwidth', 'statement', 'Bebas Neue – Fullwidth Caps 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
|
||||
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
|
||||
'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,
|
||||
{
|
||||
fontList.map((font) => {
|
||||
const name = font.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
|
||||
const category = getCategory(font);
|
||||
const block = blockForCategory[category];
|
||||
return [name, {
|
||||
transform: createTransform(block),
|
||||
category,
|
||||
description,
|
||||
className: `font-${name.toLowerCase().replace(/\s+/g, '')}`,
|
||||
},
|
||||
])
|
||||
description: `${name} – Unicode-Stil automatisch zugewiesen` ,
|
||||
className: `font-${font}`
|
||||
}];
|
||||
})
|
||||
);
|
||||
|
||||
// 🔝 Neue transformText-Funktion – gibt transformierten Text **und** Tailwind-Klasse zurück
|
||||
export const transformText = (text, fontName) => {
|
||||
const font = fontTransforms[fontName];
|
||||
if (!font || !text) return { transformed: text, fontClassName: '' };
|
||||
if (!font || !text) return { transformed: text, fontClassName: "" };
|
||||
return {
|
||||
transformed: font.transform(text),
|
||||
fontClassName: font.className,
|
||||
fontClassName: font.className
|
||||
};
|
||||
};
|
||||
|
||||
// Weitere Helfer
|
||||
export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10);
|
||||
|
||||
export const getFontsByCategory = (category) =>
|
||||
category === 'all'
|
||||
category === "all"
|
||||
? Object.keys(fontTransforms)
|
||||
: Object.keys(fontTransforms).filter(
|
||||
(f) => fontTransforms[f].category === category
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ import { Button } from "@/components/ui/button";
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Copy, Check, Heart, Share2, Info } from "lucide-react";
|
||||
import { transformText, fontTransforms } from "../fontTransforms";
|
||||
import { getFontData } from "@/lib/fonts";
|
||||
import fontMap from "@/lib/tailwind-font-map";
|
||||
|
||||
export default function FontCard({
|
||||
fontName,
|
||||
|
|
@ -19,71 +17,24 @@ export default function FontCard({
|
|||
const [liked, setLiked] = useState(false);
|
||||
|
||||
const fontInfo = fontTransforms[fontName];
|
||||
const fontData = getFontData(fontName);
|
||||
const fontKey = fontName.toLowerCase().replace(/\s+/g, "");
|
||||
const fontVarName = fontMap[fontKey];
|
||||
const fontVar = fontVarName ? { fontFamily: `var(${fontVarName})` } : {};
|
||||
const fontClass = fontData?.className || "";
|
||||
|
||||
// Dynamisch Font-Klasse aus Fontnamen generieren (z. B. "Open Sans" → "font-open-sans")
|
||||
const fontClass = `font-${fontName.toLowerCase().replace(/\s+/g, "-")}`;
|
||||
|
||||
// Fancy-Transformation
|
||||
const rawText = "Hallo Instagram!";
|
||||
const transformed = transformText(rawText, fontName);
|
||||
const finalText = transformed?.transformed || rawText;
|
||||
const copyText = transformed?.transformed || rawText;
|
||||
const { transformed } = transformText(rawText, fontName);
|
||||
const finalText = transformed || rawText;
|
||||
|
||||
const handleCopy = () => {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard
|
||||
.writeText(copyText)
|
||||
.then(() => flashCopied())
|
||||
.catch(() => fallbackCopy());
|
||||
} else {
|
||||
fallbackCopy();
|
||||
}
|
||||
};
|
||||
|
||||
const flashCopied = () => {
|
||||
navigator.clipboard.writeText(finalText).then(() => {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const fallbackCopy = () => {
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = copyText;
|
||||
textarea.setAttribute("readonly", "");
|
||||
textarea.style.position = "fixed";
|
||||
textarea.style.top = "0";
|
||||
textarea.style.left = "0";
|
||||
textarea.style.width = "1px";
|
||||
textarea.style.height = "1px";
|
||||
textarea.style.padding = "0";
|
||||
textarea.style.border = "none";
|
||||
textarea.style.outline = "none";
|
||||
textarea.style.boxShadow = "none";
|
||||
textarea.style.background = "transparent";
|
||||
|
||||
document.body.appendChild(textarea);
|
||||
textarea.focus();
|
||||
textarea.select();
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
flashCopied();
|
||||
} catch (err) {
|
||||
console.error("Fallback Copy fehlgeschlagen:", err);
|
||||
}
|
||||
document.body.removeChild(textarea);
|
||||
};
|
||||
|
||||
const handleShare = async () => {
|
||||
if (!navigator.share) return;
|
||||
try {
|
||||
await navigator.share({
|
||||
title: `FancyText – ${fontName}`,
|
||||
text: copyText,
|
||||
url: window.location.href,
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Share fehlgeschlagen:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShare = () => {
|
||||
alert(`Teilen von: ${fontName}`);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -117,7 +68,7 @@ export default function FontCard({
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleShare}
|
||||
className="text-gray-400 hover:text-blue-500"
|
||||
className="text-gray-400 hover:text-blue-500 pointer-events-auto"
|
||||
>
|
||||
<Share2 className="w-4 h-4" />
|
||||
</Button>
|
||||
|
|
@ -135,8 +86,8 @@ export default function FontCard({
|
|||
type="text"
|
||||
value={finalText}
|
||||
readOnly
|
||||
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" }}
|
||||
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 pointer-events-auto`}
|
||||
style={{ lineHeight: "1.2" }}
|
||||
/>
|
||||
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -5,5 +5,7 @@
|
|||
"@/*": ["./*"]
|
||||
},
|
||||
"forceConsistentCasingInFileNames": true
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
|
|||
64
lib/fonts.js
64
lib/fonts.js
|
|
@ -1,67 +1,71 @@
|
|||
// lib/fonts.js
|
||||
|
||||
export const fonts = {
|
||||
// 🔤 Modern
|
||||
montserrat: "font-montserrat",
|
||||
opensans: "font-opensans",
|
||||
roboto: "font-roboto",
|
||||
lato: "font-lato",
|
||||
raleway: "font-raleway",
|
||||
poppins: "font-poppins",
|
||||
worksans: "font-worksans",
|
||||
opensans: "font-open-sans",
|
||||
roboto: "font-roboto",
|
||||
worksans: "font-work-sans",
|
||||
notosans: "font-noto-sans",
|
||||
jost: "font-jost",
|
||||
notosans: "font-notosans",
|
||||
quicksand: "font-quicksand",
|
||||
averialibre: "font-averialibre",
|
||||
averialibre: "font-averia-libre",
|
||||
philosopher: "font-philosopher",
|
||||
|
||||
// ✍️ Handwriting
|
||||
pacifico: "font-pacifico",
|
||||
caveat: "font-caveat",
|
||||
sacramento: "font-sacramento",
|
||||
dancingscript: "font-dancingscript",
|
||||
indieflower: "font-indieflower",
|
||||
amatic: "font-amatic",
|
||||
kaushan: "font-kaushan",
|
||||
architects: "font-architects",
|
||||
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-greatvibes",
|
||||
greatvibes: "font-great-vibes",
|
||||
satisfy: "font-satisfy",
|
||||
yellowtail: "font-yellowtail",
|
||||
gloria: "font-gloria",
|
||||
gloria: "font-gloria-hallelujah",
|
||||
courgette: "font-courgette",
|
||||
almendra: "font-almendra",
|
||||
|
||||
// 🧑🎤 Statement
|
||||
oswald: "font-oswald",
|
||||
bebasneue: "font-bebasneue",
|
||||
|
||||
bebasneue: "font-bebas-neue",
|
||||
ultra: "font-ultra",
|
||||
stint: "font-stint",
|
||||
playfair: "font-playfair",
|
||||
abril: "font-abril",
|
||||
permanentmarker: "font-permanentmarker",
|
||||
alfaslab: "font-alfaslab",
|
||||
blackops: "font-blackops",
|
||||
germania: "font-germania",
|
||||
holtwood: "font-holtwood",
|
||||
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-spacemono",
|
||||
spacemono: "font-space-mono",
|
||||
questrial: "font-questrial",
|
||||
syncopate: "font-syncopate",
|
||||
unicaone: "font-unicaone",
|
||||
unicaone: "font-unica-one",
|
||||
italiana: "font-italiana",
|
||||
staatliches: "font-staatliches",
|
||||
|
||||
pressstart2p: "font-pressstart2p",
|
||||
// 🧢 Aesthetic
|
||||
pressstart2p: "font-press-start-2p",
|
||||
righteous: "font-righteous",
|
||||
metalmania: "font-metalmania",
|
||||
metalmania: "font-metal-mania",
|
||||
alegreya: "font-alegreya",
|
||||
spectral: "font-spectral",
|
||||
fjallaone: "font-fjallaone",
|
||||
glassantiqua: "font-glassantiqua",
|
||||
cinzeldecorative: "font-cinzeldecorative",
|
||||
fjallaone: "font-fjalla-one",
|
||||
glassantiqua: "font-glass-antiqua",
|
||||
cinzeldecorative: "font-cinzel-decorative",
|
||||
andika: "font-andika",
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,7 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
experimental: {
|
||||
fontLoaders: [
|
||||
{
|
||||
loader: "@next/font/google",
|
||||
options: {
|
||||
subsets: ["latin"],
|
||||
},
|
||||
},
|
||||
],
|
||||
// hier können andere gültige experimentelle Optionen stehen, falls nötig
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// pages/_app.jsx
|
||||
import "@/styles/tailwind.build.css"; // dein Tailwind‑Build
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -9,12 +9,14 @@ import {
|
|||
getPopularFonts,
|
||||
transformText,
|
||||
} from "@/components/fontTransforms";
|
||||
|
||||
import MobileOptimizedHeader from "@/components/MobileOptimizedHeader";
|
||||
import EnhancedTextInput from "@/components/EnhancedTextInput";
|
||||
import ImprovedCategoryFilter from "@/components/ImprovedCategoryFilter";
|
||||
import PerformanceOptimizedFontCard from "@/components/PerformanceOptimizedFontCard";
|
||||
import InfoSection from "@/components/InfoSection";
|
||||
import SocialButtons from "@/components/SocialButtons";
|
||||
import FancyTextPreview from "@/components/FancyTextPreview";
|
||||
import SEOHead from "@/components/SEOHead";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
|
|
@ -28,6 +30,7 @@ export default function HomePage() {
|
|||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [recentFonts, setRecentFonts] = useState([]);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
const [animationsEnabled, setAnimationsEnabled] = useState(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
|
@ -248,6 +251,7 @@ export default function HomePage() {
|
|||
</AnimatePresence>
|
||||
</motion.div>
|
||||
|
||||
|
||||
<SocialButtons onShare={handleQuickShare} />
|
||||
<InfoSection currentText={debouncedText} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/* in globals.css oder styles/index.css */
|
||||
@import "./local-fonts.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@import "./local-fonts.css";
|
||||
@tailwind utilities;
|
||||
|
||||
/* === Lokale Fonts via woff2 einbinden === */
|
||||
|
|
@ -403,20 +405,6 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Vt323";
|
||||
src: url("/fonts/vt323.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FredokaOne";
|
||||
src: url("/fonts/fredoka-one.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.font-abril-fatface {
|
||||
font-family: "AbrilFatface", serif;
|
||||
|
|
@ -645,14 +633,6 @@
|
|||
.font-yellowtail {
|
||||
font-family: "Yellowtail", cursive;
|
||||
}
|
||||
|
||||
.font-vt323 {
|
||||
font-family: "Vt323", monospace;
|
||||
}
|
||||
|
||||
.font-fredoka-one {
|
||||
font-family: "FredokaOne", sans-serif;
|
||||
}
|
||||
}
|
||||
/* Komponenten */
|
||||
@layer components {
|
||||
|
|
|
|||
|
|
@ -1,395 +1,344 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ========== FONT-FACE DEFINITIONS ========== */
|
||||
@font-face {
|
||||
font-family: "AbrilFatface";
|
||||
font-family: "Abrilfatface";
|
||||
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: "AlfaSlabOne";
|
||||
font-family: "Alfaslabone";
|
||||
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: "AmaticSc";
|
||||
font-family: "Amaticsc";
|
||||
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: "ArchitectsDaughter";
|
||||
font-family: "Architectsdaughter";
|
||||
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: "AveriaLibre";
|
||||
font-family: "Averialibre";
|
||||
src: url("/fonts/averia-libre.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "BebasNeue";
|
||||
font-family: "Bebasneue";
|
||||
src: url("/fonts/bebas-neue.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "BlackOpsOne";
|
||||
font-family: "Blackopsone";
|
||||
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: "CinzelDecorative";
|
||||
font-family: "Cinzeldecorative";
|
||||
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: "DancingScript";
|
||||
font-family: "Dancingscript";
|
||||
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: "FjallaOne";
|
||||
font-family: "Fjallaone";
|
||||
src: url("/fonts/fjalla-one.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "GermaniaOne";
|
||||
font-family: "Germaniaone";
|
||||
src: url("/fonts/germania-one.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "GlassAntiqua";
|
||||
font-family: "Glassantiqua";
|
||||
src: url("/fonts/glass-antiqua.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "GloriaHallelujah";
|
||||
font-family: "Gloriahallelujah";
|
||||
src: url("/fonts/gloria-hallelujah.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "GreatVibes";
|
||||
font-family: "Greatvibes";
|
||||
src: url("/fonts/great-vibes.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HoltwoodOneSc";
|
||||
font-family: "Holtwoodonesc";
|
||||
src: url("/fonts/holtwood-one-sc.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IndieFlower";
|
||||
font-family: "Indieflower";
|
||||
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: "KaushanScript";
|
||||
font-family: "Kaushanscript";
|
||||
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: "MetalMania";
|
||||
font-family: "Metalmania";
|
||||
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: "NotoSans";
|
||||
font-family: "Notosans";
|
||||
src: url("/fonts/noto-sans.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "OpenSans";
|
||||
font-family: "Opensans";
|
||||
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: "PermanentMarker";
|
||||
font-family: "Permanentmarker";
|
||||
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: "PlayfairDisplay";
|
||||
font-family: "Playfairdisplay";
|
||||
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: "PressStart2P";
|
||||
font-family: "Pressstart2P";
|
||||
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: "SpaceMono";
|
||||
font-family: "Spacemono";
|
||||
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: "StintUltraCondensed";
|
||||
font-family: "Stintultracondensed";
|
||||
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: "UnicaOne";
|
||||
font-family: "Unicaone";
|
||||
src: url("/fonts/unica-one.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "WorkSans";
|
||||
font-family: "Worksans";
|
||||
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");
|
||||
|
|
@ -397,231 +346,176 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
/* ========== TAILWIND UTILITY CLASSES ========== */
|
||||
@layer utilities {
|
||||
.font-abril-fatface {
|
||||
font-family: "AbrilFatface", sans-serif;
|
||||
font-family: "Abrilfatface", sans-serif;
|
||||
}
|
||||
|
||||
.font-alegreya {
|
||||
font-family: "Alegreya", sans-serif;
|
||||
}
|
||||
|
||||
.font-alfa-slab-one {
|
||||
font-family: "AlfaSlabOne", sans-serif;
|
||||
font-family: "Alfaslabone", sans-serif;
|
||||
}
|
||||
|
||||
.font-almendra {
|
||||
font-family: "Almendra", sans-serif;
|
||||
}
|
||||
|
||||
.font-amatic-sc {
|
||||
font-family: "AmaticSc", sans-serif;
|
||||
font-family: "Amaticsc", sans-serif;
|
||||
}
|
||||
|
||||
.font-andika {
|
||||
font-family: "Andika", sans-serif;
|
||||
}
|
||||
|
||||
.font-architects-daughter {
|
||||
font-family: "ArchitectsDaughter", sans-serif;
|
||||
font-family: "Architectsdaughter", sans-serif;
|
||||
}
|
||||
|
||||
.font-audiowide {
|
||||
font-family: "Audiowide", sans-serif;
|
||||
}
|
||||
|
||||
.font-averia-libre {
|
||||
font-family: "AveriaLibre", sans-serif;
|
||||
font-family: "Averialibre", sans-serif;
|
||||
}
|
||||
|
||||
.font-bebas-neue {
|
||||
font-family: "BebasNeue", sans-serif;
|
||||
font-family: "Bebasneue", sans-serif;
|
||||
}
|
||||
|
||||
.font-black-ops-one {
|
||||
font-family: "BlackOpsOne", sans-serif;
|
||||
font-family: "Blackopsone", sans-serif;
|
||||
}
|
||||
|
||||
.font-caveat {
|
||||
font-family: "Caveat", sans-serif;
|
||||
}
|
||||
|
||||
.font-cinzel-decorative {
|
||||
font-family: "CinzelDecorative", sans-serif;
|
||||
font-family: "Cinzeldecorative", sans-serif;
|
||||
}
|
||||
|
||||
.font-courgette {
|
||||
font-family: "Courgette", sans-serif;
|
||||
}
|
||||
|
||||
.font-dancing-script {
|
||||
font-family: "DancingScript", sans-serif;
|
||||
font-family: "Dancingscript", sans-serif;
|
||||
}
|
||||
|
||||
.font-exo {
|
||||
font-family: "Exo", sans-serif;
|
||||
}
|
||||
|
||||
.font-fjalla-one {
|
||||
font-family: "FjallaOne", sans-serif;
|
||||
font-family: "Fjallaone", sans-serif;
|
||||
}
|
||||
|
||||
.font-germania-one {
|
||||
font-family: "GermaniaOne", sans-serif;
|
||||
font-family: "Germaniaone", sans-serif;
|
||||
}
|
||||
|
||||
.font-glass-antiqua {
|
||||
font-family: "GlassAntiqua", sans-serif;
|
||||
font-family: "Glassantiqua", sans-serif;
|
||||
}
|
||||
|
||||
.font-gloria-hallelujah {
|
||||
font-family: "GloriaHallelujah", sans-serif;
|
||||
font-family: "Gloriahallelujah", sans-serif;
|
||||
}
|
||||
|
||||
.font-great-vibes {
|
||||
font-family: "GreatVibes", sans-serif;
|
||||
font-family: "Greatvibes", sans-serif;
|
||||
}
|
||||
|
||||
.font-holtwood-one-sc {
|
||||
font-family: "HoltwoodOneSc", sans-serif;
|
||||
font-family: "Holtwoodonesc", sans-serif;
|
||||
}
|
||||
|
||||
.font-indie-flower {
|
||||
font-family: "IndieFlower", sans-serif;
|
||||
font-family: "Indieflower", sans-serif;
|
||||
}
|
||||
|
||||
.font-italiana {
|
||||
font-family: "Italiana", sans-serif;
|
||||
}
|
||||
|
||||
.font-jost {
|
||||
font-family: "Jost", sans-serif;
|
||||
}
|
||||
|
||||
.font-kaushan-script {
|
||||
font-family: "KaushanScript", sans-serif;
|
||||
font-family: "Kaushanscript", sans-serif;
|
||||
}
|
||||
|
||||
.font-lato {
|
||||
font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
.font-metal-mania {
|
||||
font-family: "MetalMania", sans-serif;
|
||||
font-family: "Metalmania", sans-serif;
|
||||
}
|
||||
|
||||
.font-montserrat {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
.font-neucha {
|
||||
font-family: "Neucha", sans-serif;
|
||||
}
|
||||
|
||||
.font-noto-sans {
|
||||
font-family: "NotoSans", sans-serif;
|
||||
font-family: "Notosans", sans-serif;
|
||||
}
|
||||
|
||||
.font-open-sans {
|
||||
font-family: "OpenSans", sans-serif;
|
||||
font-family: "Opensans", 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: "PermanentMarker", sans-serif;
|
||||
font-family: "Permanentmarker", sans-serif;
|
||||
}
|
||||
|
||||
.font-philosopher {
|
||||
font-family: "Philosopher", sans-serif;
|
||||
}
|
||||
|
||||
.font-playfair-display {
|
||||
font-family: "PlayfairDisplay", sans-serif;
|
||||
font-family: "Playfairdisplay", sans-serif;
|
||||
}
|
||||
|
||||
.font-poppins {
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
.font-press-start-2p {
|
||||
font-family: "PressStart2P", sans-serif;
|
||||
font-family: "Pressstart2P", 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: "SpaceMono", sans-serif;
|
||||
font-family: "Spacemono", sans-serif;
|
||||
}
|
||||
|
||||
.font-spectral {
|
||||
font-family: "Spectral", sans-serif;
|
||||
}
|
||||
|
||||
.font-staatliches {
|
||||
font-family: "Staatliches", sans-serif;
|
||||
}
|
||||
|
||||
.font-stint-ultra-condensed {
|
||||
font-family: "StintUltraCondensed", sans-serif;
|
||||
font-family: "Stintultracondensed", sans-serif;
|
||||
}
|
||||
|
||||
.font-syncopate {
|
||||
font-family: "Syncopate", sans-serif;
|
||||
}
|
||||
|
||||
.font-ultra {
|
||||
font-family: "Ultra", sans-serif;
|
||||
}
|
||||
|
||||
.font-unica-one {
|
||||
font-family: "UnicaOne", sans-serif;
|
||||
font-family: "Unicaone", sans-serif;
|
||||
}
|
||||
|
||||
.font-work-sans {
|
||||
font-family: "WorkSans", sans-serif;
|
||||
font-family: "Worksans", sans-serif;
|
||||
}
|
||||
|
||||
.font-yellowtail {
|
||||
font-family: "Yellowtail", sans-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,74 +8,7 @@ module.exports = {
|
|||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
// MODERN
|
||||
montserrat: ["'Montserrat'", "sans-serif"],
|
||||
lato: ["'Lato'", "sans-serif"],
|
||||
raleway: ["'Raleway'", "sans-serif"],
|
||||
poppins: ["'Poppins'", "sans-serif"],
|
||||
"open-sans": ["'Open Sans'", "sans-serif"],
|
||||
roboto: ["'Roboto'", "sans-serif"],
|
||||
"work-sans": ["'Work Sans'", "sans-serif"],
|
||||
"noto-sans": ["'Noto Sans'", "sans-serif"],
|
||||
jost: ["'Jost'", "sans-serif"],
|
||||
quicksand: ["'Quicksand'", "sans-serif"],
|
||||
"averia-libre": ["'Averia Libre'", "cursive"],
|
||||
philosopher: ["'Philosopher'", "sans-serif"],
|
||||
|
||||
// HANDWRITING
|
||||
pacifico: ["'Pacifico'", "cursive"],
|
||||
sacramento: ["'Sacramento'", "cursive"],
|
||||
caveat: ["'Caveat'", "cursive"],
|
||||
"dancing-script": ["'Dancing Script'", "cursive"],
|
||||
"indie-flower": ["'Indie Flower'", "cursive"],
|
||||
"amatic-sc": ["'Amatic SC'", "cursive"],
|
||||
"kaushan-script": ["'Kaushan Script'", "cursive"],
|
||||
"architects-daughter": ["'Architects Daughter'", "cursive"],
|
||||
neucha: ["'Neucha'", "cursive"],
|
||||
"great-vibes": ["'Great Vibes'", "cursive"],
|
||||
satisfy: ["'Satisfy'", "cursive"],
|
||||
yellowtail: ["'Yellowtail'", "cursive"],
|
||||
"gloria-hallelujah": ["'Gloria Hallelujah'", "cursive"],
|
||||
|
||||
// STATEMENT
|
||||
oswald: ["'Oswald'", "sans-serif"],
|
||||
"bebas-neue": ["'Bebas Neue'", "sans-serif"],
|
||||
ultra: ["'Ultra'", "serif"],
|
||||
"stint-ultra-condensed": ["'Stint Ultra Condensed'", "sans-serif"],
|
||||
"playfair-display": ["'Playfair Display'", "serif"],
|
||||
"abril-fatface": ["'Abril Fatface'", "serif"],
|
||||
"permanent-marker": ["'Permanent Marker'", "cursive"],
|
||||
"alfa-slab-one": ["'Alfa Slab One'", "serif"],
|
||||
"black-ops-one": ["'Black Ops One'", "sans-serif"],
|
||||
"germania-one": ["'Germania One'", "serif"],
|
||||
"holtwood-one-sc": ["'Holtwood One SC'", "serif"],
|
||||
courgette: ["'Courgette'", "cursive"],
|
||||
|
||||
// FUTURISTIC
|
||||
exo: ["'Exo'", "sans-serif"],
|
||||
orbitron: ["'Orbitron'", "sans-serif"],
|
||||
audiowide: ["'Audiowide'", "sans-serif"],
|
||||
rajdhani: ["'Rajdhani'", "sans-serif"],
|
||||
"space-mono": ["'Space Mono'", "monospace"],
|
||||
questrial: ["'Questrial'", "sans-serif"],
|
||||
syncopate: ["'Syncopate'", "sans-serif"],
|
||||
"unica-one": ["'Unica One'", "sans-serif"],
|
||||
italiana: ["'Italiana'", "serif"],
|
||||
staatliches: ["'Staatliches'", "serif"],
|
||||
|
||||
// AESTHETIC
|
||||
"press-start-2p": ["'Press Start 2P'", "monospace"],
|
||||
righteous: ["'Righteous'", "sans-serif"],
|
||||
"metal-mania": ["'Metal Mania'", "cursive"],
|
||||
alegreya: ["'Alegreya'", "serif"],
|
||||
spectral: ["'Spectral'", "serif"],
|
||||
"fjalla-one": ["'Fjalla One'", "sans-serif"],
|
||||
"glass-antiqua": ["'Glass Antiqua'", "cursive"],
|
||||
"cinzel-decorative": ["'Cinzel Decorative'", "serif"],
|
||||
andika: ["'Andika'", "sans-serif"],
|
||||
almendra: ["'Almendra'", "serif"],
|
||||
},
|
||||
// Keine fontFamily-Einträge mehr hier nötig!
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
|
|
|||
Loading…
Reference in New Issue