port 3010

.env.local

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_POSTHOG_KEY=phc_xxx
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

Dockerfile

@@ -1,5 +1,5 @@
 # 1) Base
-FROM node:18-alpine AS base
+FROM node:22-alpine AS base
 WORKDIR /app
 ENV NEXT_TELEMETRY_DISABLED=1
 
@@ -22,7 +22,7 @@ RUN npm run build
 RUN npm prune --omit=dev
 
 # 4) Runner
-FROM node:18-alpine AS runner
+FROM node:22-alpine AS runner
 WORKDIR /app
 ENV NODE_ENV=production \
     NEXT_TELEMETRY_DISABLED=1 \

build-fontfaces.sh

@@ -0,0 +1,100 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+UA="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123 Safari/537.36"
+DISPLAY="swap"
+WEIGHT="400"
+
+# Paare: Google-Fontname (URL-Form) | CSS-Fontname (CamelCase wie in deinen Utilities)
+readarray -t FONTS <<'EOF'
+Abril+Fatface|AbrilFatface
+Alegreya|Alegreya
+Alfa+Slab+One|AlfaSlabOne
+Almendra|Almendra
+Amatic+SC|AmaticSc
+Andika|Andika
+Architects+Daughter|ArchitectsDaughter
+Audiowide|Audiowide
+Averia+Libre|AveriaLibre
+Bebas+Neue|BebasNeue
+Black+Ops+One|BlackOpsOne
+Caveat|Caveat
+Cinzel+Decorative|CinzelDecorative
+Courgette|Courgette
+Dancing+Script|DancingScript
+Exo|Exo
+Fjalla+One|FjallaOne
+Germania+One|GermaniaOne
+Glass+Antiqua|GlassAntiqua
+Gloria+Hallelujah|GloriaHallelujah
+Great+Vibes|GreatVibes
+Holtwood+One+SC|HoltwoodOneSc
+Indie+Flower|IndieFlower
+Italiana|Italiana
+Jost|Jost
+Kaushan+Script|KaushanScript
+Lato|Lato
+Metal+Mania|MetalMania
+Montserrat|Montserrat
+Neucha|Neucha
+Noto+Sans|NotoSans
+Open+Sans|OpenSans
+Orbitron|Orbitron
+Oswald|Oswald
+Pacifico|Pacifico
+Permanent+Marker|PermanentMarker
+Philosopher|Philosopher
+Playfair+Display|PlayfairDisplay
+Poppins|Poppins
+Press+Start+2P|PressStart2P
+Questrial|Questrial
+Quicksand|Quicksand
+Rajdhani|Rajdhani
+Raleway|Raleway
+Righteous|Righteous
+Roboto|Roboto
+Sacramento|Sacramento
+Satisfy|Satisfy
+Space+Mono|SpaceMono
+Spectral|Spectral
+Staatliches|Staatliches
+Stint+Ultra+Condensed|StintUltraCondensed
+Syncopate|Syncopate
+Ultra|Ultra
+Unica+One|UnicaOne
+Work+Sans|WorkSans
+Yellowtail|Yellowtail
+EOF
+
+for line in "${FONTS[@]}"; do
+  GF="${line%%|*}"
+  CSS_FAMILY="${line##*|}"
+
+  API_URL="https://fonts.googleapis.com/css2?family=${GF}:wght@${WEIGHT}&display=${DISPLAY}"
+  CSS="$(curl -s -H "User-Agent: ${UA}" --compressed "$API_URL")"
+
+  # Bevorzugt den /* latin */-Block, sonst den ersten @font-face mit font-style: normal
+  BLOCK="$(awk '/\/\* latin \*\//,/\}/' <<<"$CSS")"
+  if [[ -z "$BLOCK" ]]; then
+    BLOCK="$(awk -v RS='}' '/@font-face/ && /font-style:[[:space:]]*normal/ {print $0 RS; exit}' <<<"$CSS")"
+  fi
+
+  SRC="$(grep -o 'https://fonts\.gstatic\.com[^)]*\.woff2' <<<"$BLOCK" | head -n1 || true)"
+  URANGE="$(sed -n 's/^[[:space:]]*unicode-range:[[:space:]]*\(.*\);/\1/p' <<<"$BLOCK" || true)"
+
+  if [[ -z "$SRC" ]]; then
+    echo "/* WARN: no woff2 for ${GF} */" >&2
+    continue
+  fi
+
+  cat <<CSSBLOCK
+@font-face {
+  font-family: "${CSS_FAMILY}";
+  font-style: normal;
+  font-weight: ${WEIGHT};
+  font-display: ${DISPLAY};
+  src: url("${SRC}") format("woff2");
+${URANGE:+  unicode-range: ${URANGE};}
+}
+CSSBLOCK
+done

components/FancyTextPreview.jsx

@@ -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>
+  );
+}

components/ImprovedCategoryFilter.jsx

@@ -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>
@@ -122,4 +123,4 @@ export default function ImprovedCategoryFilter({
       )}
     </motion.div>
   );
-}
+}

components/PerformanceOptimizedFontCard.jsx

@@ -1,3 +1,4 @@
+// components/PerformanceOptimizedFontCard.jsx
 import React, { useState, useCallback, forwardRef, memo } from "react";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -39,7 +40,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 +77,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 });
@@ -93,31 +94,10 @@ const PerformanceOptimizedFontCard = forwardRef(({
     }
   }, [transformedText, fontName, onShare]);
 
-  const getFontStyle = useCallback((name) => {
+  const previewText = sStr(transformedText?.transformed ?? transformedText) || "Hallo Instagram!";
-    const baseStyle = { wordBreak: "break-word", lineHeight: "1.3", willChange: "auto" };
+  const fontClass = transformedText?.fontClassName ?? "";
-    const fontMap = {
+  const displayName = fontTransforms[fontName]?.description;
-      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 previewText = sStr(transformedText) || "Hallo Instagram!";
 
   return (
     <div ref={ref} className="will-change-transform mb-6">
@@ -155,10 +135,10 @@ const PerformanceOptimizedFontCard = forwardRef(({
               </Button>
             </div>
           </div>
-          {fontTransforms[fontName]?.description && (
+          {displayName && (
             <p className="text-xs text-gray-500 mb-3 flex items-start gap-1 leading-tight">
               <Info className="w-3 h-3 mt-0.5 shrink-0" />
-              {fontTransforms[fontName].description}
+              {displayName}
             </p>
           )}
           <div
@@ -167,8 +147,8 @@ const PerformanceOptimizedFontCard = forwardRef(({
             tabIndex={0}
             onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && handleCopy()}
             aria-label="Click to copy text"
-            style={{ ...getFontStyle(fontName), pointerEvents: "auto" }}
+            style={{ 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>
@@ -185,7 +165,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" /> Copy! ✨</>
             )}
           </Button>
         </div>
@@ -195,4 +175,4 @@ const PerformanceOptimizedFontCard = forwardRef(({
 });
 
 PerformanceOptimizedFontCard.displayName = "PerformanceOptimizedFontCard";
-export default memo(PerformanceOptimizedFontCard);
+export default memo(PerformanceOptimizedFontCard);

components/fontTransforms.jsx

@@ -1,86 +1,50 @@
 // 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)
+export const fontList = [
-const unicodeBlocks = {
+  "abril-fatface", "alegreya", "alfa-slab-one", "almendra", "amatic-sc", "andika",
-  sansSerif:       { upperStart: 0x1D5A0, lowerStart: 0x1D5BA }, // Mathematical Sans-Serif
+  "architects-daughter", "audiowide", "averia-libre", "bebas-neue", "black-ops-one",
-  sansSerifBold:   { upperStart: 0x1D5D4, lowerStart: 0x1D5EE }, // Bold Sans-Serif
+  "caveat", "cinzel-decorative", "courgette", "dancing-script", "exo", "fjalla-one",
-  script:          { upperStart: 0x1D49C, lowerStart: 0x1D4B6 }, // Mathematical Script
+  "germania-one", "glass-antiqua", "gloria-hallelujah", "great-vibes", "holtwood-one-sc",
-  scriptBold:      { upperStart: 0x1D4D0, lowerStart: 0x1D4EA }, // Bold Script
+  "indie-flower", "italiana", "jost", "kaushan-script", "lato", "metal-mania", "montserrat",
-  fraktur:         { upperStart: 0x1D504, lowerStart: 0x1D51E }, // Mathematical Fraktur
+  "neucha", "noto-sans", "open-sans", "orbitron", "oswald", "pacifico", "permanent-marker",
-  frakturBold:     { upperStart: 0x1D56C, lowerStart: 0x1D586 }, // Bold Fraktur
+  "philosopher", "playfair-display", "poppins", "press-start-2p", "questrial", "quicksand",
-  monospace:       { upperStart: 0x1D670, lowerStart: 0x1D68A }, // Mathematical Monospace
+  "rajdhani", "raleway", "righteous", "roboto", "sacramento", "satisfy", "space-mono",
-  fullwidth:       { upperStart: 0xFF21,   lowerStart: 0xFF41 }  // Fullwidth Latin
+  "spectral", "staatliches", "stint-ultra-condensed", "syncopate", "ultra", "unica-one",
+  "work-sans", "yellowtail"
+];
+
+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";
 };
 
-// 2) Helfer zum Mappen von A-Z und a-z in den jeweiligen Unicode-Block
+export const fontTransforms = Object.fromEntries(
-const mapUnicode = (char, block) => {
+  fontList.map((font) => {
-  const code = char.charCodeAt(0);
+    const name = font.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-  if (code >= 65 && code <= 90) return String.fromCodePoint(block.upperStart + (code - 65));
+    const category = getCategory(font);
-  if (code >= 97 && code <= 122) return String.fromCodePoint(block.lowerStart + (code - 97));
+    return [font, {
-  return char;
+      category,
-};
+      description: `Eine moderne, saubere Schriftart.`,
-
+      className: `font-${font}`
-const createTransform = (blockKey) => (text) =>
+    }];
-  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' },
-
-  // ✍️ 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' },
-
-  // 🧑‍🎤 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' },
-
-  // 🚀 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' },
-
-  // 🧢 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)
 );
 
 export const transformText = (text, fontName) => {
-  const font = fontTransforms[fontName];
+  const font = fontTransforms[fontName];
-  if (!font || !text) return text;
+  if (!font || !text) return { transformed: text, fontClassName: "" };
-  return font.transform(text);
+  return {
+    transformed: text,
+    fontClassName: font.className
+  };
 };
+
+export const getPopularFonts = () => fontList.slice(0, 10);
+
+export const getFontsByCategory = (category) =>
+  category === "all"
+    ? fontList
+    : fontList.filter((f) => getCategory(f) === category);

components/ui/FontCard.jsx

@@ -4,8 +4,7 @@ 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";
 
 export default function FontCard({
   fontName,
@@ -18,67 +17,29 @@ export default function FontCard({
   const [liked, setLiked] = useState(false);
 
   const fontInfo = fontTransforms[fontName];
-  const fontData = getFontData(fontName);
+
-  const displayText = transformedText || "Hallo Instagram!";
+  // 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 || rawText;
 
   const handleCopy = () => {
-    if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(finalText).then(() => {
-      navigator.clipboard
+      setCopied(true);
-        .writeText(displayText)
+      setTimeout(() => setCopied(false), 1500);
-        .then(() => flashCopied())
+    });
-        .catch(() => fallbackCopy());
-    } else {
-      fallbackCopy();
-    }
   };
 
-  const flashCopied = () => {
+  const handleShare = () => {
-    setCopied(true);
+    alert(`Teilen von: ${fontName}`);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const fallbackCopy = () => {
-    const textarea = document.createElement("textarea");
-    textarea.value = displayText;
-    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: displayText,
-        url: window.location.href,
-      });
-    } catch (err) {
-      console.error("Share fehlgeschlagen:", err);
-    }
   };
 
   return (
-    <div style={{ pointerEvents: "none" }}>
+    // Dieses Attribut wurde entfernt, da es alle Klicks blockiert hat.
+    <div>
       <Card className="bg-white/90 backdrop-blur-sm border-0 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden">
         <div className="p-6">
           <div className="flex items-center justify-between mb-4">
@@ -108,7 +69,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>
@@ -124,9 +85,9 @@ 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`}
+            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" }}
           />
 
@@ -151,4 +112,4 @@ export default function FontCard({
       </Card>
     </div>
   );
-}
+}

docker-compose.yml

@@ -1,8 +1,7 @@
-version: "3.8"
 services:
   fancytext-app:
     build: .
     ports:
-      - "3001:3000"
+      - "3010:3000"
     environment:
       - NODE_ENV=production

dump_unicode_ranges.py

@@ -0,0 +1,40 @@
+from fontTools.ttLib import TTFont
+from pathlib import Path
+import sys, csv
+
+def cps_from_font(p):
+    f = TTFont(p)
+    s = set()
+    for t in f["cmap"].tables:
+        s.update(t.cmap.keys())
+    return sorted(c for c in s if c is not None)
+
+def to_ranges(cps):
+    if not cps:
+        return ""
+    out = []
+    a = b = cps[0]
+    for x in cps[1:]:
+        if x == b + 1:
+            b = x
+        else:
+            out.append((a, b))
+            a = b = x
+    out.append((a, b))
+    return ", ".join(
+        f"U+{a:04X}" if a == b else f"U+{a:04X}-{b:04X}"
+        for a, b in out
+    )
+
+def main(argv):
+    w = csv.writer(sys.stdout)
+    w.writerow(["file", "unicode-range"])
+    for fp in argv:
+        cps = cps_from_font(fp)
+        w.writerow([Path(fp).name, to_ranges(cps)])
+
+if __name__ == "__main__":
+    if len(sys.argv) < 2:
+        print("Usage: python3 dump_unicode_ranges.py <font1.woff2> ...", file=sys.stderr)
+        sys.exit(1)
+    main(sys.argv[1:])

fetch-font-urls.sh

@@ -0,0 +1,120 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# --- Einstellungen ---
+SUBSET="latin"        # für DE/EN am kleinsten; bei Bedarf "latin-ext"
+WEIGHT="400"
+DISPLAY="swap"
+
+# Moderner UA erzwingt woff2 im Google-Fonts CSS
+UA="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123 Safari/537.36"
+
+# Familienliste (Leerzeichen -> '+')
+FAMILIES=(
+"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"
+)
+
+# --- Output vorbereiten ---
+: > font-src-urls.csv
+echo "family,woff2_url" >> font-src-urls.csv
+: > fonts.css
+
+echo "Hole woff2-URLs (Subset: $SUBSET, Weight: $WEIGHT) …" >&2
+
+for FAMILY in "${FAMILIES[@]}"; do
+  API_URL="https://fonts.googleapis.com/css2?family=${FAMILY}:wght@${WEIGHT}&display=${DISPLAY}"
+  CSS="$(curl -s -H "User-Agent: ${UA}" "${API_URL}")"
+
+  # bevorzugt den /* latin */-Block
+  URL="$(printf "%s\n" "$CSS" \
+    | awk '/\/\* '"$SUBSET"' \*\//,/\}/' \
+    | grep -o 'https://fonts.gstatic.com[^)]*\.woff2' \
+    | head -n1 || true)"
+
+  # Fallback: erste woff2-URL überhaupt
+  if [[ -z "${URL}" ]]; then
+    URL="$(printf "%s\n" "$CSS" \
+      | grep -o 'https://fonts.gstatic.com[^)]*\.woff2' \
+      | head -n1 || true)"
+  fi
+
+  if [[ -z "${URL}" ]]; then
+    echo "WARN: Keine woff2-URL für ${FAMILY} gefunden" >&2
+    continue
+  fi
+
+  # CSV-Zeile
+  echo "${FAMILY},${URL}" >> font-src-urls.csv
+
+  # @font-face Snippet
+  CSS_FAMILY="${FAMILY//+/ }"
+  cat >> fonts.css <<CSS
+@font-face {
+  font-family: '${CSS_FAMILY}';
+  font-style: normal;
+  font-weight: ${WEIGHT};
+  font-display: ${DISPLAY};
+  src: url('${URL}') format('woff2');
+  /* subset: ${SUBSET} (aus Google Fonts CSS v2) */
+}
+CSS
+
+done
+
+echo "Fertig. Siehe font-src-urls.csv und fonts.css" >&2

font-src-urls.csv

@@ -0,0 +1,58 @@
+family,woff2_url
+Abril+Fatface,https://fonts.gstatic.com/s/abrilfatface/v24/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2
+Alegreya,https://fonts.gstatic.com/s/alegreya/v38/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNG9hU4-6qj.woff2
+Alfa+Slab+One,https://fonts.gstatic.com/s/alfaslabone/v20/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhew.woff2
+Almendra,https://fonts.gstatic.com/s/almendra/v27/H4ckBXKAlMnTn0CskxY9yL4.woff2
+Amatic+SC,https://fonts.gstatic.com/s/amaticsc/v27/TUZyzwprpvBS1izr_vOECuSf.woff2
+Andika,https://fonts.gstatic.com/s/andika/v26/mem_Ya6iyW-LwqgwarYQ.woff2
+Architects+Daughter,https://fonts.gstatic.com/s/architectsdaughter/v19/KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYlg4w.woff2
+Audiowide,https://fonts.gstatic.com/s/audiowide/v21/l7gdbjpo0cum0ckerWCdlg_O.woff2
+Averia+Libre,https://fonts.gstatic.com/s/averialibre/v16/2V0aKIcMGZEnV6xygz7eNjESBanI.woff2
+Bebas+Neue,https://fonts.gstatic.com/s/bebasneue/v15/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2
+Black+Ops+One,https://fonts.gstatic.com/s/blackopsone/v20/qWcsB6-ypo7xBdr6Xshe96H3aDvbtw.woff2
+Caveat,https://fonts.gstatic.com/s/caveat/v22/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIWpYQ.woff2
+Cinzel+Decorative,https://fonts.gstatic.com/s/cinzeldecorative/v18/daaCSScvJGqLYhG8nNt8KPPswUAPni7TTMw.woff2
+Courgette,https://fonts.gstatic.com/s/courgette/v18/wEO_EBrAnc9BLjLQAUk1VvoK.woff2
+Dancing+Script,https://fonts.gstatic.com/s/dancingscript/v28/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8.woff2
+Exo,https://fonts.gstatic.com/s/exo/v24/4UaZrEtFpBI4f1ZSIK9d4LjJ4lM3OwRmOw.woff2
+Fjalla+One,https://fonts.gstatic.com/s/fjallaone/v15/Yq6R-LCAWCX3-6Ky7FAFrOF6kg.woff2
+Germania+One,https://fonts.gstatic.com/s/germaniaone/v20/Fh4yPjrqIyv2ucM2qzBjeS3uywhP.woff2
+Glass+Antiqua,https://fonts.gstatic.com/s/glassantiqua/v25/xfu30Wr0Wn3NOQM2piC0uXOjrLj6Ng.woff2
+Gloria+Hallelujah,https://fonts.gstatic.com/s/gloriahallelujah/v23/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zM.woff2
+Great+Vibes,https://fonts.gstatic.com/s/greatvibes/v20/RWmMoKWR9v4ksMfaWd_JN9XFiaQ.woff2
+Holtwood+One+SC,https://fonts.gstatic.com/s/holtwoodonesc/v22/yYLx0hLR0P-3vMFSk1TCq3Txg5BHdrz7.woff2
+Indie+Flower,https://fonts.gstatic.com/s/indieflower/v23/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2
+Italiana,https://fonts.gstatic.com/s/italiana/v21/QldNNTtLsx4E__B0XQmWaXw.woff2
+Jost,https://fonts.gstatic.com/s/jost/v19/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNIg.woff2
+Kaushan+Script,https://fonts.gstatic.com/s/kaushanscript/v18/vm8vdRfvXFLG3OLnsO15WYS5DG74wNI.woff2
+Lato,https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2
+Metal+Mania,https://fonts.gstatic.com/s/metalmania/v22/RWmMoKWb4e8kqMfBUdPFJdXFiaQ.woff2
+Montserrat,https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2
+Neucha,https://fonts.gstatic.com/s/neucha/v17/q5uGsou0JOdh94bfvQlt.woff2
+Noto+Sans,https://fonts.gstatic.com/s/notosans/v39/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9a6VI.woff2
+Open+Sans,https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2
+Orbitron,https://fonts.gstatic.com/s/orbitron/v34/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2
+Oswald,https://fonts.gstatic.com/s/oswald/v56/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2
+Pacifico,https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6Mk.woff2
+Permanent+Marker,https://fonts.gstatic.com/s/permanentmarker/v16/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2
+Philosopher,https://fonts.gstatic.com/s/philosopher/v20/vEFV2_5QCwIS4_Dhez5jcWBuT00.woff2
+Playfair+Display,https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2
+Poppins,https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2
+Press+Start+2P,https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2
+Questrial,https://fonts.gstatic.com/s/questrial/v18/QdVUSTchPBm7nuUeVf70viFl.woff2
+Quicksand,https://fonts.gstatic.com/s/quicksand/v36/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2
+Rajdhani,https://fonts.gstatic.com/s/rajdhani/v16/LDIxapCSOBg7S-QT7p4HM-Y.woff2
+Raleway,https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2
+Righteous,https://fonts.gstatic.com/s/righteous/v18/1cXxaUPXBpj2rGoU7C9WiHGF.woff2
+Roboto,https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2
+Sacramento,https://fonts.gstatic.com/s/sacramento/v16/buEzpo6gcdjy0EiZMBUG4C0f_Q.woff2
+Satisfy,https://fonts.gstatic.com/s/satisfy/v22/rP2Hp2yn6lkG50LoCZOIHQ.woff2
+Space+Mono,https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2
+Spectral,https://fonts.gstatic.com/s/spectral/v14/rnCr-xNNww_2s0amA9M5kng.woff2
+Staatliches,https://fonts.gstatic.com/s/staatliches/v14/HI_OiY8KO6hCsQSoAPmtMYebvpA.woff2
+Stint+Ultra+Condensed,https://fonts.gstatic.com/s/stintultracondensed/v24/-W_gXIrsVjjeyEnPC45qD2NoFPtBE0xCh2AOrR8P.woff2
+Syncopate,https://fonts.gstatic.com/s/syncopate/v23/pe0sMIuPIYBCpEV5eFdCBfe_.woff2
+Ultra,https://fonts.gstatic.com/s/ultra/v25/zOLy4prXmrtY-uT9wrI.woff2
+Unica+One,https://fonts.gstatic.com/s/unicaone/v19/DPEuYwWHyAYGVTSmalsRcd3e.woff2
+Work+Sans,https://fonts.gstatic.com/s/worksans/v23/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBi8Jpg.woff2
+Yellowtail,https://fonts.gstatic.com/s/yellowtail/v24/OZpGg_pnoDtINPfRIlLohlvHwQ.woff2

fonts.css

@@ -0,0 +1,456 @@
+@font-face {
+  font-family: 'Abril Fatface';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/abrilfatface/v24/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Alegreya';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/alegreya/v38/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNG9hU4-6qj.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Alfa Slab One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/alfaslabone/v20/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhew.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Almendra';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/almendra/v27/H4ckBXKAlMnTn0CskxY9yL4.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Amatic SC';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/amaticsc/v27/TUZyzwprpvBS1izr_vOECuSf.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Andika';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/andika/v26/mem_Ya6iyW-LwqgwarYQ.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Architects Daughter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/architectsdaughter/v19/KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYlg4w.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Audiowide';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/audiowide/v21/l7gdbjpo0cum0ckerWCdlg_O.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Averia Libre';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/averialibre/v16/2V0aKIcMGZEnV6xygz7eNjESBanI.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Bebas Neue';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/bebasneue/v15/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Black Ops One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/blackopsone/v20/qWcsB6-ypo7xBdr6Xshe96H3aDvbtw.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Caveat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/caveat/v22/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIWpYQ.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Cinzel Decorative';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/cinzeldecorative/v18/daaCSScvJGqLYhG8nNt8KPPswUAPni7TTMw.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Courgette';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/courgette/v18/wEO_EBrAnc9BLjLQAUk1VvoK.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Dancing Script';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/dancingscript/v28/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Exo';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/exo/v24/4UaZrEtFpBI4f1ZSIK9d4LjJ4lM3OwRmOw.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Fjalla One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/fjallaone/v15/Yq6R-LCAWCX3-6Ky7FAFrOF6kg.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Germania One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/germaniaone/v20/Fh4yPjrqIyv2ucM2qzBjeS3uywhP.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Glass Antiqua';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/glassantiqua/v25/xfu30Wr0Wn3NOQM2piC0uXOjrLj6Ng.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Gloria Hallelujah';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/gloriahallelujah/v23/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zM.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Great Vibes';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/greatvibes/v20/RWmMoKWR9v4ksMfaWd_JN9XFiaQ.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Holtwood One SC';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/holtwoodonesc/v22/yYLx0hLR0P-3vMFSk1TCq3Txg5BHdrz7.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Indie Flower';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/indieflower/v23/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Italiana';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/italiana/v21/QldNNTtLsx4E__B0XQmWaXw.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Jost';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/jost/v19/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNIg.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Kaushan Script';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/kaushanscript/v18/vm8vdRfvXFLG3OLnsO15WYS5DG74wNI.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Metal Mania';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/metalmania/v22/RWmMoKWb4e8kqMfBUdPFJdXFiaQ.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Neucha';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/neucha/v17/q5uGsou0JOdh94bfvQlt.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/notosans/v39/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9a6VI.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Orbitron';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/orbitron/v34/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/oswald/v56/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Pacifico';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6Mk.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Permanent Marker';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/permanentmarker/v16/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Philosopher';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/philosopher/v20/vEFV2_5QCwIS4_Dhez5jcWBuT00.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Press Start 2P';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Questrial';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/questrial/v18/QdVUSTchPBm7nuUeVf70viFl.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/quicksand/v36/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Rajdhani';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/rajdhani/v16/LDIxapCSOBg7S-QT7p4HM-Y.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Righteous';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/righteous/v18/1cXxaUPXBpj2rGoU7C9WiHGF.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Sacramento';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/sacramento/v16/buEzpo6gcdjy0EiZMBUG4C0f_Q.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Satisfy';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/satisfy/v22/rP2Hp2yn6lkG50LoCZOIHQ.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Space Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Spectral';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/spectral/v14/rnCr-xNNww_2s0amA9M5kng.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Staatliches';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/staatliches/v14/HI_OiY8KO6hCsQSoAPmtMYebvpA.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Stint Ultra Condensed';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/stintultracondensed/v24/-W_gXIrsVjjeyEnPC45qD2NoFPtBE0xCh2AOrR8P.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Syncopate';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/syncopate/v23/pe0sMIuPIYBCpEV5eFdCBfe_.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Ultra';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/ultra/v25/zOLy4prXmrtY-uT9wrI.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Unica One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/unicaone/v19/DPEuYwWHyAYGVTSmalsRcd3e.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/worksans/v23/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBi8Jpg.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}
+@font-face {
+  font-family: 'Yellowtail';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/yellowtail/v24/OZpGg_pnoDtINPfRIlLohlvHwQ.woff2') format('woff2');
+  /* subset: latin (aus Google Fonts CSS v2) */
+}

fonts.generated.css

@@ -0,0 +1,456 @@
+@font-face {
+  font-family: "AbrilFatface";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/abrilfatface/v24/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Alegreya";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/alegreya/v38/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNG9hU4-6qj.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "AlfaSlabOne";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/alfaslabone/v20/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhew.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Almendra";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/almendra/v27/H4ckBXKAlMnTn0CskxY9yL4.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "AmaticSc";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/amaticsc/v27/TUZyzwprpvBS1izr_vOECuSf.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Andika";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/andika/v26/mem_Ya6iyW-LwqgwarYQ.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "ArchitectsDaughter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/architectsdaughter/v19/KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYlg4w.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Audiowide";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/audiowide/v21/l7gdbjpo0cum0ckerWCdlg_O.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "AveriaLibre";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/averialibre/v16/2V0aKIcMGZEnV6xygz7eNjESBanI.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "BebasNeue";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/bebasneue/v15/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "BlackOpsOne";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/blackopsone/v20/qWcsB6-ypo7xBdr6Xshe96H3aDvbtw.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Caveat";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/caveat/v22/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIWpYQ.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "CinzelDecorative";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/cinzeldecorative/v18/daaCSScvJGqLYhG8nNt8KPPswUAPni7TTMw.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Courgette";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/courgette/v18/wEO_EBrAnc9BLjLQAUk1VvoK.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "DancingScript";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/dancingscript/v28/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Exo";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/exo/v24/4UaZrEtFpBI4f1ZSIK9d4LjJ4lM3OwRmOw.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "FjallaOne";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/fjallaone/v15/Yq6R-LCAWCX3-6Ky7FAFrOF6kg.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "GermaniaOne";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/germaniaone/v20/Fh4yPjrqIyv2ucM2qzBjeS3uywhP.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "GlassAntiqua";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/glassantiqua/v25/xfu30Wr0Wn3NOQM2piC0uXOjrLj6Ng.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "GloriaHallelujah";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/gloriahallelujah/v23/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zM.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "GreatVibes";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/greatvibes/v20/RWmMoKWR9v4ksMfaWd_JN9XFiaQ.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "HoltwoodOneSc";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/holtwoodonesc/v22/yYLx0hLR0P-3vMFSk1TCq3Txg5BHdrz7.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IndieFlower";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/indieflower/v23/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Italiana";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/italiana/v21/QldNNTtLsx4E__B0XQmWaXw.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Jost";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/jost/v19/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNIg.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "KaushanScript";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/kaushanscript/v18/vm8vdRfvXFLG3OLnsO15WYS5DG74wNI.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "MetalMania";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/metalmania/v22/RWmMoKWb4e8kqMfBUdPFJdXFiaQ.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Montserrat";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Neucha";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/neucha/v17/q5uGsou0JOdh94bfvQlt.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "NotoSans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/notosans/v39/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9a6VI.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Orbitron";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/orbitron/v34/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Oswald";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/oswald/v56/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Pacifico";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6Mk.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "PermanentMarker";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/permanentmarker/v16/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Philosopher";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/philosopher/v20/vEFV2_5QCwIS4_Dhez5jcWBuT00.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "PlayfairDisplay";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "PressStart2P";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Questrial";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/questrial/v18/QdVUSTchPBm7nuUeVf70viFl.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Quicksand";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/quicksand/v36/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Rajdhani";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/rajdhani/v16/LDIxapCSOBg7S-QT7p4HM-Y.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Raleway";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Righteous";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/righteous/v18/1cXxaUPXBpj2rGoU7C9WiHGF.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Sacramento";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/sacramento/v16/buEzpo6gcdjy0EiZMBUG4C0f_Q.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Satisfy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/satisfy/v22/rP2Hp2yn6lkG50LoCZOIHQ.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "SpaceMono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Spectral";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/spectral/v14/rnCr-xNNww_2s0amA9M5kng.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Staatliches";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/staatliches/v14/HI_OiY8KO6hCsQSoAPmtMYebvpA.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "StintUltraCondensed";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/stintultracondensed/v24/-W_gXIrsVjjeyEnPC45qD2NoFPtBE0xCh2AOrR8P.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Syncopate";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/syncopate/v23/pe0sMIuPIYBCpEV5eFdCBfe_.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Ultra";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/ultra/v25/zOLy4prXmrtY-uT9wrI.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "UnicaOne";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/unicaone/v19/DPEuYwWHyAYGVTSmalsRcd3e.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/worksans/v23/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBi8Jpg.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Yellowtail";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/yellowtail/v24/OZpGg_pnoDtINPfRIlLohlvHwQ.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

instrumentation-client.js

@@ -0,0 +1,24 @@
+// instrumentation-client.js
+import posthog from "posthog-js";
+
+// envs lesen
+const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+const host = process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com";
+
+// nur im Browser initialisieren + Doppel-Init verhindern
+if (typeof window !== "undefined" && !window.__posthogInitialized) {
+  if (key) {
+    posthog.init(key, {
+      api_host: host,
+      capture_pageview: false, // Pageviews trackst du selbst
+      loaded: () => {
+        if (process.env.NODE_ENV === "development") posthog.debug();
+      },
+    });
+    window.__posthogInitialized = true;
+  } else {
+    console.warn("NEXT_PUBLIC_POSTHOG_KEY ist nicht gesetzt");
+  }
+}
+
+export default posthog;

jsconfig.json

@@ -5,5 +5,7 @@
       "@/*": ["./*"]
     },
     "forceConsistentCasingInFileNames": true
-  }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+  "exclude": ["node_modules"]
 }

lib/fonts.js

@@ -1,153 +1,355 @@
-// 1) Google‑Fonts Platzhalter
+// lib/fonts.js
-export const inter = { className: "", variable: "--font-inter" };
+import {
-export const roboto = { className: "", variable: "--font-roboto" };
+  Montserrat,
-export const openSans = { className: "", variable: "--font-opensans" };
+  Lato,
-export const montserrat = { className: "", variable: "--font-montserrat" };
+  Raleway,
-export const raleway = { className: "", variable: "--font-raleway" };
+  Poppins,
-export const poppins = { className: "", variable: "--font-poppins" };
+  Open_Sans,
-export const manrope = { className: "", variable: "--font-manrope" };
+  Roboto,
-export const dmSans = { className: "", variable: "--font-dmsans" };
+  Work_Sans,
-export const plusJakartaSans = {
+  Noto_Sans,
-  className: "",
+  Jost,
-  variable: "--font-plusjakarta",
+  Quicksand,
-};
+  Averia_Libre,
-export const spaceGrotesk = { className: "", variable: "--font-spacegrotesk" };
+  Philosopher,
+  Pacifico,
+  Sacramento,
+  Caveat,
+  Dancing_Script,
+  Indie_Flower,
+  Amatic_SC,
+  Kaushan_Script,
+  Architects_Daughter,
+  Neucha,
+  Great_Vibes,
+  Satisfy,
+  Yellowtail,
+  Gloria_Hallelujah,
+  Courgette,
+  Almendra,
+  Oswald,
+  Bebas_Neue,
+  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 = {
+// Moderne Schriftarten
-  className: "",
+export const montserrat = Montserrat({
-  variable: "--font-dancingscript",
+  subsets: ["latin"],
-};
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-export const pacifico = { className: "", variable: "--font-pacifico" };
+  variable: "--font-montserrat",
-export const caveat = { className: "", variable: "--font-caveat" };
+});
-export const indieFlower = { className: "", variable: "--font-indieflower" };
+export const lato = Lato({
-export const greatVibes = { className: "", variable: "--font-greatvibes" };
+  subsets: ["latin"],
-export const sacramento = { className: "", variable: "--font-sacramento" };
+  weight: ["100", "300", "400", "700", "900"],
-export const alexBrush = { className: "", variable: "--font-alexbrush" };
+  variable: "--font-lato",
-export const amaticSC = { className: "", variable: "--font-amaticsc" };
+});
-export const marckScript = { className: "", variable: "--font-marckscript" };
+export const raleway = Raleway({
-export const protestRevolution = {
+  subsets: ["latin"],
-  className: "",
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  variable: "--font-protestrevolution",
+  variable: "--font-raleway",
-};
+});
+export const poppins = Poppins({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  variable: "--font-poppins",
+});
+export const openSans = Open_Sans({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700", "800"],
+  variable: "--font-open-sans",
+});
+export const roboto = Roboto({
+  subsets: ["latin"],
+  weight: ["100", "300", "400", "500", "700", "900"],
+  variable: "--font-roboto",
+});
+export const workSans = Work_Sans({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  variable: "--font-work-sans",
+});
+export const notoSans = Noto_Sans({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  variable: "--font-noto-sans",
+});
+export const jost = Jost({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  variable: "--font-jost",
+});
+export const quicksand = Quicksand({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+  variable: "--font-quicksand",
+});
+export const averiaLibre = Averia_Libre({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-averia-libre",
+});
+export const philosopher = Philosopher({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-philosopher",
+});
 
-export const anton = { className: "", variable: "--font-anton" };
+// Handschriften
-export const bebasNeue = { className: "", variable: "--font-bebasneue" };
+export const pacifico = Pacifico({
-export const oswald = { className: "", variable: "--font-oswald" };
+  subsets: ["latin"],
-export const bangers = { className: "", variable: "--font-bangers" };
+  weight: "400",
-export const ultra = { className: "", variable: "--font-ultra" };
+  variable: "--font-pacifico",
-export const abrilFatface = { className: "", variable: "--font-abrilfatface" };
+});
-export const fjallaOne = { className: "", variable: "--font-fjallaone" };
+export const sacramento = Sacramento({
-export const fredokaOne = { className: "", variable: "--font-fredokaone" };
+  subsets: ["latin"],
-export const luckiestGuy = { className: "", variable: "--font-luckiestguy" };
+  weight: "400",
-export const fugazOne = { className: "", variable: "--font-fugazone" };
+  variable: "--font-sacramento",
-export const shrikhand = { className: "", variable: "--font-shrikhand" };
+});
-export const chango = { className: "", variable: "--font-chango" };
+export const caveat = Caveat({
-export const gravitasOne = { className: "", variable: "--font-gravitasone" };
+  subsets: ["latin"],
-export const coiny = { className: "", variable: "--font-coiny" };
+  weight: "400",
-export const quicksand = { className: "", variable: "--font-quicksand" };
+  variable: "--font-caveat",
+});
+export const dancingScript = Dancing_Script({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-dancing-script",
+});
+export const indieFlower = Indie_Flower({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-indie-flower",
+});
+export const amatic = Amatic_SC({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-amatic-sc",
+});
+export const kaushan = Kaushan_Script({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-kaushan-script",
+});
+export const architects = Architects_Daughter({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-architects-daughter",
+});
+export const neucha = Neucha({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-neucha",
+});
+export const greatVibes = Great_Vibes({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-great-vibes",
+});
+export const satisfy = Satisfy({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-satisfy",
+});
+export const yellowtail = Yellowtail({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-yellowtail",
+});
+export const gloria = Gloria_Hallelujah({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-gloria-hallelujah",
+});
+export const courgette = Courgette({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-courgette",
+});
+export const almendra = Almendra({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-almendra",
+});
 
-export const orbitron = { className: "", variable: "--font-orbitron" };
+// Statement-Schriftarten
-export const zenDots = { className: "", variable: "--font-zendots" };
+export const oswald = Oswald({
-export const audiowide = { className: "", variable: "--font-audiowide" };
+  subsets: ["latin"],
-export const exo2 = { className: "", variable: "--font-exo2" };
+  weight: ["200", "300", "400", "500", "600", "700"],
-export const rajdhani = { className: "", variable: "--font-rajdhani" };
+  variable: "--font-oswald",
-export const syncopate = { className: "", variable: "--font-syncopate" };
+});
-export const pressStart2p = { className: "", variable: "--font-pressstart2p" };
+export const bebasNeue = Bebas_Neue({
-export const shareTechMono = {
+  subsets: ["latin"],
-  className: "",
+  weight: "400",
-  variable: "--font-sharetechmono",
+  variable: "--font-bebas-neue",
-};
+});
+export const ultra = Ultra({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-ultra",
+});
+export const stint = Stint_Ultra_Condensed({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-stint-ultra-condensed",
+});
+export const playfair = Playfair_Display({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800", "900"],
+  variable: "--font-playfair-display",
+});
+export const abril = Abril_Fatface({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-abril-fatface",
+});
+export const permanentMarker = Permanent_Marker({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-permanent-marker",
+});
+export const alfaSlab = Alfa_Slab_One({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-alfa-slab-one",
+});
+export const blackOps = Black_Ops_One({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-black-ops-one",
+});
+export const germania = Germania_One({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-germania-one",
+});
+export const holtwood = Holtwood_One_SC({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-holtwood-one-sc",
+});
 
-export const playfairDisplay = {
+// Futuristische Schriftarten
-  className: "",
+export const exo = Exo({
-  variable: "--font-playfairdisplay",
+  subsets: ["latin"],
-};
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-export const cinzel = { className: "", variable: "--font-cinzel" };
+  variable: "--font-exo",
-export const italiana = { className: "", variable: "--font-italiana" };
+});
-export const youngSerif = { className: "", variable: "--font-youngserif" };
+export const orbitron = Orbitron({
-export const caprasimo = { className: "", variable: "--font-caprasimo" };
+  subsets: ["latin"],
-export const righteous = { className: "", variable: "--font-righteous" };
+  weight: ["400", "500", "600", "700", "800", "900"],
-export const luxuriousRoman = {
+  variable: "--font-orbitron",
-  className: "",
+});
-  variable: "--font-luxuriousroman",
+export const audiowide = Audiowide({
-};
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-audiowide",
+});
+export const rajdhani = Rajdhani({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+  variable: "--font-rajdhani",
+});
+export const spaceMono = Space_Mono({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  variable: "--font-space-mono",
+});
+export const questrial = Questrial({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-questrial",
+});
+export const syncopate = Syncopate({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-syncopate",
+});
+export const unicaOne = Unica_One({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-unica-one",
+});
+export const italiana = Italiana({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-italiana",
+});
+export const staatliches = Staatliches({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-staatliches",
+});
 
-export const vt323 = { className: "", variable: "--font-vt323" };
+// Ästhetische Schriftarten
-export const neonderthaw = { className: "", variable: "--font-neonderthaw" };
+export const pressStart2p = Press_Start_2P({
-
+  subsets: ["latin"],
-// 2) System‑Fonts
+  weight: "400",
-export const systemFonts = {
+  variable: "--font-press-start-2p",
-  helvetica: { className: "font-helvetica", variable: "--font-helvetica" },
+});
-  arial: { className: "font-arial", variable: "--font-arial" },
+export const righteous = Righteous({
-  comicSans: { className: "font-comicsans", variable: "--font-comicsans" },
+  subsets: ["latin"],
-};
+  weight: "400",
-
+  variable: "--font-righteous",
-// 3) Pseudo‑Fonts
+});
-export const pseudoFonts = {
+export const metalMania = Metal_Mania({
-  bubble: { className: "", variable: "--font-bubble" },
+  subsets: ["latin"],
-  glitch: { className: "", variable: "--font-glitch" },
+  weight: "400",
-  wide: { className: "", variable: "--font-wide" },
+  variable: "--font-metal-mania",
-  upsideDown: { className: "", variable: "--font-upsidedown" },
+});
-  strikethrough: { className: "", variable: "--font-strikethrough" },
+export const alegreya = Alegreya({
-  underline: { className: "", variable: "--font-underline" },
+  subsets: ["latin"],
-};
+  weight: ["400", "500", "600", "700", "800", "900"],
-
+  variable: "--font-alegreya",
-// Zusammenfassung aller Fonts
+});
-export const fonts = {
+export const spectral = Spectral({
-  Inter: inter,
+  subsets: ["latin"],
-  Roboto: roboto,
+  weight: ["200", "300", "400", "500", "600", "700", "800"],
-  Open_Sans: openSans,
+  variable: "--font-spectral",
-  Montserrat: montserrat,
+});
-  Raleway: raleway,
+export const fjallaOne = Fjalla_One({
-  Poppins: poppins,
+  subsets: ["latin"],
-  Manrope: manrope,
+  weight: "400",
-  DM_Sans: dmSans,
+  variable: "--font-fjalla-one",
-  Plus_Jakarta_Sans: plusJakartaSans,
+});
-  Space_Grotesk: spaceGrotesk,
+export const glassAntiqua = Glass_Antiqua({
-  Dancing_Script: dancingScript,
+  subsets: ["latin"],
-  Pacifico: pacifico,
+  weight: "400",
-  Caveat: caveat,
+  variable: "--font-glass-antiqua",
-  Indie_Flower: indieFlower,
+});
-  Great_Vibes: greatVibes,
+export const cinzelDecorative = Cinzel_Decorative({
-  Sacramento: sacramento,
+  subsets: ["latin"],
-  Alex_Brush: alexBrush,
+  weight: "400",
-  Amatic_SC: amaticSC,
+  variable: "--font-cinzel-decorative",
-  Marck_Script: marckScript,
+});
-  Protest_Revolution: protestRevolution,
+export const andika = Andika({
-  Anton: anton,
+  subsets: ["latin"],
-  Bebas_Neue: bebasNeue,
+  weight: "400",
-  Oswald: oswald,
+  variable: "--font-andika",
-  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,
-};
-
-export const getFontData = (key) => fonts[key] ?? inter;

lib/posthog.js

@@ -0,0 +1,21 @@
+// lib/posthog.ts
+import { PostHog } from "posthog-node";
+
+export function PostHogClient() {
+  // Server-Keys verwenden (ohne NEXT_PUBLIC_)
+  const key = 'phc_1j3wKLzEVz6QGnAZ6jg1njZP8XsAPbNDchwLGvjjc0e'//process.env.POSTHOG_API_KEY;
+  const host = process.env.POSTHOG_HOST ?? "https://us.i.posthog.com";
+
+  if (!key) {
+    // Fail fast – sonst sendest du stumm nichts
+    throw new Error("POSTHOG_API_KEY ist nicht gesetzt (serverseitige Env).");
+  }
+
+  const client = new PostHog(key, {
+    host,
+    flushAt: 1,
+    flushInterval: 0,
+  });
+
+  return client;
+}

lib/tailwind‑font‑map.js

@@ -1,14 +1,68 @@
 /**
  * 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",
+  "open-sans": "--font-open-sans",
+  roboto: "--font-roboto",
+  "work-sans": "--font-work-sans",
+  "noto-sans": "--font-noto-sans",
+  jost: "--font-jost",
+  quicksand: "--font-quicksand",
+  "averia-libre": "--font-averia-libre",
+  philosopher: "--font-philosopher",
+
   pacifico: "--font-pacifico",
+  sacramento: "--font-sacramento",
   caveat: "--font-caveat",
-  fredokaone: "--font-fredokaone",
+  "dancing-script": "--font-dancing-script",
-  playfair: "--font-playfair",
+  "indie-flower": "--font-indie-flower",
-  vt323: "--font-vt323",
+  "amatic-sc": "--font-amatic-sc",
-  // … alle weiteren Fonts, die du brauchst
+  "kaushan-script": "--font-kaushan-script",
+  "architects-daughter": "--font-architects-daughter",
+  neucha: "--font-neucha",
+  "great-vibes": "--font-great-vibes",
+  satisfy: "--font-satisfy",
+  yellowtail: "--font-yellowtail",
+  "gloria-hallelujah": "--font-gloria-hallelujah",
+
+  oswald: "--font-oswald",
+  "bebas-neue": "--font-bebas-neue",
+  ultra: "--font-ultra",
+  "stint-ultra-condensed": "--font-stint-ultra-condensed",
+  "playfair-display": "--font-playfair-display",
+  "abril-fatface": "--font-abril-fatface",
+  "permanent-marker": "--font-permanent-marker",
+  "alfa-slab-one": "--font-alfa-slab-one",
+  "black-ops-one": "--font-black-ops-one",
+  "germania-one": "--font-germania-one",
+  "holtwood-one-sc": "--font-holtwood-one-sc",
+  courgette: "--font-courgette",
+
+  exo: "--font-exo",
+  orbitron: "--font-orbitron",
+  audiowide: "--font-audiowide",
+  rajdhani: "--font-rajdhani",
+  "space-mono": "--font-space-mono",
+  questrial: "--font-questrial",
+  syncopate: "--font-syncopate",
+  "unica-one": "--font-unica-one",
+  italiana: "--font-italiana",
+  staatliches: "--font-staatliches",
+
+  "press-start-2p": "--font-press-start-2p",
+  righteous: "--font-righteous",
+  "metal-mania": "--font-metal-mania",
+  alegreya: "--font-alegreya",
+  spectral: "--font-spectral",
+  "fjalla-one": "--font-fjalla-one",
+  "glass-antiqua": "--font-glass-antiqua",
+  "cinzel-decorative": "--font-cinzel-decorative",
+  andika: "--font-andika",
+  almendra: "--font-almendra",
 };

next.config.js

@@ -1,9 +1,12 @@
-/** @type {import('next').NextConfig} */
+// next.config.js
-const nextConfig = {
+const path = require('path');
-  // Deine sonstigen Next‑Optionen, z.B.:
+const withFlowbiteReact = require('flowbite-react/plugin/nextjs');
-  // reactStrictMode: true,
-  // images: { domains: [...] },
-  // rewrites: async () => [ ... ],
-};
 
-module.exports = nextConfig;
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
+  webpack: (config) => {
+    config.resolve.alias['@'] = path.resolve(process.cwd());
+    return config;
+  },
+};

next.config.mjs

@@ -3,6 +3,8 @@ import path from "path";
 import withFlowbiteReact from "flowbite-react/plugin/nextjs";
 
 const nextConfig = {
+  output: "export",
+  images: { unoptimized: true },
   webpack: (config) => {
     config.resolve.alias["@"] = path.resolve(process.cwd());
     return config;

package.json

@@ -20,6 +20,8 @@
     "html2canvas": "^1.4.1",
     "lucide-react": "^0.292.0",
     "next": "^14.0.4",
+    "posthog-js": "^1.259.0",
+    "posthog-node": "^5.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",

pages/_app.js

@@ -1,17 +1,75 @@
-// pages/_app.jsx
+// pages/app.js
-import "@/styles/tailwind.build.css"; // dein Tailwind‑Build
+import "@/styles/tailwind.build.css";
+import "../styles/globals.css";
 
-import { fonts } from "@/lib/fonts";
+// Alle exportierten Schriftarten aus lib/fonts.js importieren
-
+import {
-// Alle CSS‑Variablen aus deinen next/font‑Loaders, damit die Utilities greifen
+  montserrat,
-const allFontVars = Object.values(fonts)
+  lato,
-  .map((f) => f.variable)
+  raleway,
-  .join(" ");
+  poppins,
+  openSans,
+  roboto,
+  workSans,
+  notoSans,
+  jost,
+  quicksand,
+  averiaLibre,
+  philosopher,
+  pacifico,
+  sacramento,
+  caveat,
+  dancingScript,
+  indieFlower,
+  amatic,
+  kaushan,
+  architects,
+  neucha,
+  greatVibes,
+  satisfy,
+  yellowtail,
+  gloria,
+  courgette,
+  almendra,
+  oswald,
+  bebasNeue,
+  ultra,
+  stint,
+  playfair,
+  abril,
+  permanentMarker,
+  alfaSlab,
+  blackOps,
+  germania,
+  holtwood,
+  exo,
+  orbitron,
+  audiowide,
+  rajdhani,
+  spaceMono,
+  questrial,
+  syncopate,
+  unicaOne,
+  italiana,
+  staatliches,
+  pressStart2p,
+  righteous,
+  metalMania,
+  alegreya,
+  spectral,
+  fjallaOne,
+  glassAntiqua,
+  cinzelDecorative,
+  andika,
+} from "@/lib/fonts";
 
 export default function MyApp({ Component, pageProps }) {
+  // Die Variablennamen aller Schriftarten in einer Klasse zusammenfassen
+  const fontVariables = `${montserrat.variable} ${lato.variable} ${raleway.variable} ${poppins.variable} ${openSans.variable} ${roboto.variable} ${workSans.variable} ${notoSans.variable} ${jost.variable} ${quicksand.variable} ${averiaLibre.variable} ${philosopher.variable} ${pacifico.variable} ${sacramento.variable} ${caveat.variable} ${dancingScript.variable} ${indieFlower.variable} ${amatic.variable} ${kaushan.variable} ${architects.variable} ${neucha.variable} ${greatVibes.variable} ${satisfy.variable} ${yellowtail.variable} ${gloria.variable} ${courgette.variable} ${almendra.variable} ${oswald.variable} ${bebasNeue.variable} ${ultra.variable} ${stint.variable} ${playfair.variable} ${abril.variable} ${permanentMarker.variable} ${alfaSlab.variable} ${blackOps.variable} ${germania.variable} ${holtwood.variable} ${exo.variable} ${orbitron.variable} ${audiowide.variable} ${rajdhani.variable} ${spaceMono.variable} ${questrial.variable} ${syncopate.variable} ${unicaOne.variable} ${italiana.variable} ${staatliches.variable} ${pressStart2p.variable} ${righteous.variable} ${metalMania.variable} ${alegreya.variable} ${spectral.variable} ${fjallaOne.variable} ${glassAntiqua.variable} ${cinzelDecorative.variable} ${andika.variable}`;
+
   return (
-    <main className={allFontVars}>
+    <div className={fontVariables}>
       <Component {...pageProps} />
-    </main>
+    </div>
   );
 }

pages/_document.js

@@ -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>

pages/api/track.js

@@ -0,0 +1,23 @@
+// pages/api/track.js
+import { PostHogClient } from "@/lib/posthog";
+
+export default async function handler(req, res) {
+  const posthog = PostHogClient();
+
+  try {
+    const { event, properties, distinctId } = req.body;
+
+    await posthog.capture({
+      distinctId: distinctId || "server_event",
+      event: event || "default_event",
+      properties: properties || {},
+    });
+
+    await posthog.shutdown();
+
+    return res.status(200).json({ success: true });
+  } catch (error) {
+    console.error("PostHog error:", error);
+    return res.status(500).json({ success: false, error: error.message });
+  }
+}

pages/demo.jsx

@@ -1,32 +0,0 @@
-// pages/demo.jsx
-import React from "react";
-import FontCard from "@/components/ui/FontCard";       // Default‑Import
-import { fonts } from "@/lib/fonts";
-
-export default function Demo() {
-  // Absicherung gegen undefined beim SSR
-  const robotoClass = fonts.roboto?.className || "";
-
-  return (
-    <section className="space-y-8 p-8">
-      {/* 1. next/font (voll integriert) */}
-      <h2 className={`${robotoClass} text-4xl`}>
-        Roboto aus next/font
-      </h2>
-
-      {/* 2. Tailwind‑Utility aus Map */}
-      <p className="font-montserrat text-xl">
-        Dieselbe Font via <code>font-montserrat</code>
-      </p>
-
-      {/* 3. Deine Preview‑Komponente */}
-      <FontCard
-        fontName="Pacifico"
-        transformedText="Hallo Instagram!"
-        category="handwriting"
-        isPopular
-        index={0}
-      />
-    </section>
-  );
-}

pages/index.jsx

@@ -1,7 +1,9 @@
 // pages/index.jsx
 import React, { useState, useEffect, useMemo, useCallback } from "react";
 import Head from "next/head";
+import { useRouter } from "next/router";
 import { motion, AnimatePresence } from "framer-motion";
+import posthog from "posthog-js";
 
 import {
   fontTransforms,
@@ -9,25 +11,93 @@ 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";
 
+/* -------------------- PostHog: Client Init + Pageviews -------------------- */
+// Fallback-Init (falls du instrumentation-client.ts noch nicht nutzt)
+if (typeof window !== "undefined" && !(posthog).__initialized) {
+  const key = process.env.NEXT_PUBLIC_POSTHOG_KEY || "";
+  const host = process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com";
+
+  if (key) {
+    posthog.init(key, {
+      api_host: host,
+      capture_pageview: false, // Pageviews steuern wir selbst unten
+      loaded: () => {
+        if (process.env.NODE_ENV === "development") posthog.debug();
+      },
+    });
+    // kleiner Guard gegen Doppel-Init bei Fast Refresh
+    (posthog).__initialized = true;
+  } else {
+    console.warn("⚠️ NEXT_PUBLIC_POSTHOG_KEY ist nicht gesetzt");
+  }
+}
+/* ------------------------------------------------------------------------- */
+
 if (typeof window !== "undefined") {
   sessionStorage.removeItem("fancytext_recent_fonts");
 }
 
 export default function HomePage() {
+  const router = useRouter();
+
+  // --- Helper: Server-Tracking via /api/track ---
+  const serverTrack = useCallback(async (payload) => {
+    try {
+      await fetch("/api/track", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+    } catch {
+      // optional: console.warn("Server track failed", e);
+    }
+  }, []);
+
+  // Pageview-Tracking (pages router)
+  useEffect(() => {
+    const send = (url) => {
+      const href =
+        typeof window !== "undefined" && window.location ? window.location.href : url;
+
+      // Client-Pageview
+      posthog.capture("$pageview", {
+        $current_url: href,
+        path: url,
+      });
+
+      // Server-Pageview (optional, für serverseitige Analysen)
+      serverTrack({
+        distinctId: "anon_client",
+        event: "$pageview",
+        properties: { path: url, href },
+      });
+    };
+
+    // initial
+    if (router?.asPath) send(router.asPath);
+
+    const handleRouteChange = (url) => send(url);
+    router.events.on("routeChangeComplete", handleRouteChange);
+    return () => router.events.off("routeChangeComplete", handleRouteChange);
+  }, [router, serverTrack]);
+
   const [inputText, setInputText] = useState("Hello Instagram!");
   const [previewFont, setPreviewFont] = useState(null);
   const [selectedCategory, setSelectedCategory] = useState("all");
   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;
@@ -40,7 +110,9 @@ export default function HomePage() {
   useEffect(() => {
     const checkMobile = () => {
       if (typeof window !== "undefined") {
-        setIsMobile(window.innerWidth < 768 || /iPhone|iPad|iPod|Android/i.test(navigator.userAgent));
+        setIsMobile(
+          window.innerWidth < 768 || /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
+        );
       }
     };
     checkMobile();
@@ -80,50 +152,124 @@ export default function HomePage() {
     return counts;
   }, []);
 
-  const trackFontCopy = useCallback((fontName, text) => {
+  const trackFontCopy = useCallback(
-    window.gtag?.("event", "font_copied", {
+    (fontName, text) => {
-      font_name: fontName,
+      // Client-Event
-      text_length: text.length,
+      posthog.capture("font_copied", {
-      category: fontTransforms[fontName]?.category,
+        font_name: fontName,
-    });
+        text_length: text.length,
+        category: fontTransforms[fontName]?.category,
+      });
 
-    setRecentFonts((prev) => {
+      // Server-Event
-      const updated = [fontName, ...prev.filter((f) => f !== fontName)].slice(0, 5);
+      serverTrack({
-      return updated;
+        distinctId: "anon_client",
-    });
+        event: "font_copied",
-  }, []);
+        properties: {
+          font_name: fontName,
+          text_length: text.length,
+          category: fontTransforms[fontName]?.category,
+        },
+      });
 
-  const trackFontLike = useCallback((fontName, liked) => {
+      setRecentFonts((prev) => {
-    window.gtag?.("event", "font_liked", {
+        const updated = [fontName, ...prev.filter((f) => f !== fontName)].slice(0, 5);
-      font_name: fontName,
+        return updated;
-      action: liked ? "like" : "unlike",
+      });
-    });
+    },
-  }, []);
+    [serverTrack]
+  );
+
+  const trackFontLike = useCallback(
+    (fontName, liked) => {
+      posthog.capture("font_liked", {
+        font_name: fontName,
+        action: liked ? "like" : "unlike",
+      });
+
+      serverTrack({
+        distinctId: "anon_client",
+        event: "font_liked",
+        properties: { font_name: fontName, action: liked ? "like" : "unlike" },
+      });
+    },
+    [serverTrack]
+  );
 
   const handleQuickShare = useCallback(async () => {
     const shareData = {
       title: "FancyText - Cool Fonts! 🔥",
       text: "Check out this app for cool Instagram & TikTok fonts! 30+ fonts free ✨",
-      url: window.location.href,
+      url: typeof window !== "undefined" ? window.location.href : "https://fancytext.app",
     };
     if (navigator.share) {
       try {
         await navigator.share(shareData);
-      } catch {}
+        posthog.capture("app_shared", { method: "web_share_api" });
+        serverTrack({
+          distinctId: "anon_client",
+          event: "app_shared",
+          properties: { method: "web_share_api" },
+        });
+      } catch {
+        posthog.capture("app_share_failed");
+        serverTrack({
+          distinctId: "anon_client",
+          event: "app_share_failed",
+          properties: {},
+        });
+      }
     } else {
       await navigator.clipboard.writeText(`${shareData.text}\n${shareData.url}`);
+      posthog.capture("app_shared", { method: "clipboard_copy" });
+      serverTrack({
+        distinctId: "anon_client",
+        event: "app_shared",
+        properties: { method: "clipboard_copy" },
+      });
       alert("Link copied to clipboard! 🗌");
     }
-    window.gtag?.("event", "app_shared", { method: "button_click" });
+  }, [serverTrack]);
-  }, []);
 
-  const handleTextChange = useCallback((text) => {
+  const handleTextChange = useCallback(
-    setInputText(text);
+    (text) => {
-    setPreviewFont(null);
+      setInputText(text);
-  }, []);
+      setPreviewFont(null);
+      posthog.capture("text_changed", { length: text?.length ?? 0 });
+      serverTrack({
+        distinctId: "anon_client",
+        event: "text_changed",
+        properties: { length: text?.length ?? 0 },
+      });
+    },
+    [serverTrack]
+  );
 
-  const handleCategoryChange = useCallback((cat) => setSelectedCategory(cat), []);
+  const handleCategoryChange = useCallback(
-  const handleSearch = useCallback((q) => setSearchQuery(q), []);
+    (cat) => {
+      setSelectedCategory(cat);
+      posthog.capture("category_changed", { category: cat });
+      serverTrack({
+        distinctId: "anon_client",
+        event: "category_changed",
+        properties: { category: cat },
+      });
+    },
+    [serverTrack]
+  );
+
+  const handleSearch = useCallback(
+    (q) => {
+      setSearchQuery(q);
+      posthog.capture("font_search", { query_length: q?.length ?? 0 });
+      serverTrack({
+        distinctId: "anon_client",
+        event: "font_search",
+        properties: { query_length: q?.length ?? 0 },
+      });
+    },
+    [serverTrack]
+  );
 
   const handleRandomFont = useCallback(() => {
     const fontList = Object.keys(fontTransforms);
@@ -136,7 +282,13 @@ export default function HomePage() {
     } while (newFont === previewFont && tries < 50);
 
     setPreviewFont(newFont);
-  }, [previewFont]);
+    posthog.capture("random_font_selected", { font: newFont });
+    serverTrack({
+      distinctId: "anon_client",
+      event: "random_font_selected",
+      properties: { font: newFont },
+    });
+  }, [previewFont, serverTrack]);
 
   const displayText = previewFont
     ? transformText(inputText || "Try me!", previewFont)
@@ -146,39 +298,56 @@ export default function HomePage() {
     <>
       <Head>
         <title>FancyText | Viral Fonts</title>
-        <meta name="description" content="Make your posts pop with 30+ copy-paste fonts. Free, no login, mobile-ready. Works on IG, TikTok, Threads & more." />
+        <meta
+          name="description"
+          content="Make your posts pop with 30+ copy-paste fonts. Free, no login, mobile-ready. Works on IG, TikTok, Threads & more."
+        />
         <link rel="canonical" href="https://fancytext.app" />
         <meta property="og:title" content="30+ Fancy Fonts for TikTok & Instagram 🔥" />
-        <meta property="og:description" content="Create viral bios, comments & posts in seconds – no login, always free." />
+        <meta
+          property="og:description"
+          content="Create viral bios, comments & posts in seconds – no login, always free."
+        />
         <meta property="og:image" content="https://fancytext.app/social-preview.png" />
         <meta property="og:url" content="https://fancytext.app" />
         <meta property="og:type" content="website" />
         <link rel="icon" href="/images/favicon.ico" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="mobile-web-app-capable" content="yes" />
-        <script type="application/ld+json" dangerouslySetInnerHTML={{
+        <script
-          __html: JSON.stringify({
+          type="application/ld+json"
-            "@context": "https://schema.org",
+          dangerouslySetInnerHTML={{
-            "@type": "WebApplication",
+            __html: JSON.stringify({
-            name: "FancyText",
+              "@context": "https://schema.org",
-            url: "https://fancytext.app",
+              "@type": "WebApplication",
-            applicationCategory: "WebApp",
+              name: "FancyText",
-            operatingSystem: "All",
+              url: "https://fancytext.app",
-            offers: {
+              applicationCategory: "WebApp",
-              "@type": "Offer",
+              operatingSystem: "All",
-              price: "0.00",
+              offers: {
-              priceCurrency: "USD",
+                "@type": "Offer",
-            },
+                price: "0.00",
-          })
+                priceCurrency: "USD",
-        }} />
+              },
+            }),
+          }}
+        />
       </Head>
 
       <div className="fixed top-4 right-4 z-[100] flex gap-4 text-sm text-black bg-white/90 px-3 py-1 rounded-lg shadow-lg backdrop-blur-sm">
-        <a href="#about" className="hover:underline">About</a>
+        <a href="#about" className="hover:underline">
-        <a href="#" onClick={(e) => {
+          About
-          e.preventDefault();
+        </a>
-          document.getElementById("privacy")?.scrollIntoView({ behavior: "smooth" });
+        <a
-        }} className="hover:underline">Privacy</a>
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            document.getElementById("privacy")?.scrollIntoView({ behavior: "smooth" });
+          }}
+          className="hover:underline"
+        >
+          Privacy
+        </a>
       </div>
 
       <div className="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 relative overflow-hidden">
@@ -186,7 +355,15 @@ export default function HomePage() {
         <div className="relative z-10 container mx-auto px-4 py-8 max-w-6xl">
           <MobileOptimizedHeader
             animationsEnabled={animationsEnabled}
-            onToggleAnimations={setAnimationsEnabled}
+            onToggleAnimations={(val) => {
+              setAnimationsEnabled(val);
+              posthog.capture("animations_toggled", { enabled: val });
+              serverTrack({
+                distinctId: "anon_client",
+                event: "animations_toggled",
+                properties: { enabled: val },
+              });
+            }}
             totalFonts={Object.keys(fontTransforms).length}
             onQuickShare={handleQuickShare}
           />
@@ -235,7 +412,10 @@ export default function HomePage() {
                 <PerformanceOptimizedFontCard
                   key={name}
                   fontName={name}
-                  transformedText={transformText(debouncedText, name)}
+                  transformedText={{
+                    transformed: debouncedText,
+                    fontClassName: fontTransforms[name].className,
+                  }}
                   category={fontTransforms[name]?.category}
                   isPopular={popularFonts.includes(name)}
                   animationsEnabled={animationsEnabled}

styles/local-fonts.css

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

tailwind.config.js

@@ -1,29 +1,79 @@
-// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
-import { fonts } from "./lib/fonts.js";
+module.exports = {
-
-const fontFamily = Object.fromEntries(
-  Object.entries(fonts)
-    .filter(([, d]) => d?.variable)
-    .map(([name, d]) => [
-      name.toLowerCase().replace(/\s+/g, ""),
-      [`var(${d.variable})`],
-    ])
-);
-
-export default {
   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: {
+        "abril-fatface": ['"Abril Fatface"', "serif"],
+        alegreya: ["Alegreya", "sans-serif"],
+        "alfa-slab-one": ['"Alfa Slab One"', "sans-serif"],
+        almendra: ["Almendra", "serif"],
+        "amatic-sc": ['"Amatic SC"', "cursive"],
+        andika: ["Andika", "sans-serif"],
+        "architects-daughter": ['"Architects Daughter"', "cursive"],
+        audiowide: ["Audiowide", "sans-serif"],
+        "averia-libre": ['"Averia Libre"', "cursive"],
+        "bebas-neue": ['"Bebas Neue"', "sans-serif"],
+        "black-ops-one": ['"Black Ops One"', "sans-serif"],
+        caveat: ["Caveat", "cursive"],
+        "cinzel-decorative": ['"Cinzel Decorative"', "serif"],
+        courgette: ["Courgette", "cursive"],
+        "dancing-script": ['"Dancing Script"', "cursive"],
+        exo: ["Exo", "sans-serif"],
+        "fjalla-one": ['"Fjalla One"', "sans-serif"],
+        "germania-one": ['"Germania One"', "sans-serif"],
+        "glass-antiqua": ['"Glass Antiqua"', "cursive"],
+        "gloria-hallelujah": ['"Gloria Hallelujah"', "cursive"],
+        "great-vibes": ['"Great Vibes"', "cursive"],
+        "holtwood-one-sc": ['"Holtwood One SC"', "sans-serif"],
+        "indie-flower": ['"Indie Flower"', "cursive"],
+        italiana: ["Italiana", "serif"],
+        jost: ["Jost", "sans-serif"],
+        "kaushan-script": ['"Kaushan Script"', "cursive"],
+        lato: ["Lato", "sans-serif"],
+        "metal-mania": ['"Metal Mania"', "sans-serif"],
+        montserrat: ["Montserrat", "sans-serif"],
+        neucha: ["Neucha", "sans-serif"],
+        "noto-sans": ['"Noto Sans"', "sans-serif"],
+        "open-sans": ['"Open Sans"', "sans-serif"],
+        orbitron: ["Orbitron", "sans-serif"],
+        oswald: ["Oswald", "sans-serif"],
+        pacifico: ["Pacifico", "cursive"],
+        "permanent-marker": ['"Permanent Marker"', "sans-serif"],
+        philosopher: ["Philosopher", "serif"],
+        "playfair-display": ['"Playfair Display"', "serif"],
+        poppins: ["Poppins", "sans-serif"],
+        "press-start-2p": ['"Press Start 2P"', "monospace"],
+        questrial: ["Questrial", "sans-serif"],
+        quicksand: ["Quicksand", "sans-serif"],
+        rajdhani: ["Rajdhani", "sans-serif"],
+        raleway: ["Raleway", "serif"],
+        righteous: ["Righteous", "sans-serif"],
+        roboto: ["Roboto", "sans-serif"],
+        sacramento: ["Sacramento", "cursive"],
+        satisfy: ["Satisfy", "cursive"],
+        "space-mono": ['"Space Mono"', "sans-serif"],
+        spectral: ["Spectral", "sans-serif"],
+        staatliches: ["Staatliches", "serif"],
+        "stint-ultra-condensed": ['"Stint Ultra Condensed"', "sans-serif"],
+        syncopate: ["Syncopate", "sans-serif"],
+        ultra: ["Ultra", "serif"],
+        "unica-one": ['"Unica One"', "sans-serif"],
+        "work-sans": ['"Work Sans"', "sans-serif"],
+        yellowtail: ["Yellowtail", "cursive"],
+      },
+    },
+  },
   plugins: [],
-  // <<< Hier kommt die Safelist >>>
   safelist: [
     {
       pattern: /^font-/,
-      variants: ["sm", "md", "lg", "xl"], // optional, falls responsive Klassen gebraucht werden
+      variants: ["sm", "md", "lg", "xl"],
     },
   ],
 };

tailwind.config.mjs

@@ -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(
+      fontFamily: {
-        Object.entries(tailwindFonts).map(([k, cssVar]) => [
+        // Dynamische Zuordnung: z. B. roboto: ['var(--font-roboto)']
-          k,
+        ...Object.fromEntries(
-          [`var(${cssVar})`],
+          Object.entries(tailwindFonts).map(([key, cssVar]) => [
-        ])
+            key,
-      ),
+            [`var(${cssVar})`],
+          ])
+        ),
+      },
     },
   },
   plugins: [],

unicode-ranges.csv

@@ -0,0 +1,870 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Abril Fatface';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/abrilfatface/v24/zOL64pLDlL1D99S8g8PtiKchq-lmjdLh.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Abril Fatface';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/abrilfatface/v24/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Alegreya';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/alegreya/v38/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNG9hU49aqjgSE.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Alegreya';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/alegreya/v38/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNG9hU4-6qj.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Alfa Slab One';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/alfaslabone/v20/6NUQ8FmMKwSEKjnm5-4v-4Jh2dxhe-Wv.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Alfa Slab One';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/alfaslabone/v20/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhew.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Almendra';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/almendra/v27/H4ckBXKAlMnTn0CskxYzyL6Agw.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Almendra';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/almendra/v27/H4ckBXKAlMnTn0CskxY9yL4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Amatic SC';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/amaticsc/v27/TUZyzwprpvBS1izr_vOEBOSfQZQ.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Amatic SC';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/amaticsc/v27/TUZyzwprpvBS1izr_vOECuSf.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Andika';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/andika/v26/mem_Ya6iyW-LwqgwZLYQarw.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Andika';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/andika/v26/mem_Ya6iyW-LwqgwarYQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Architects Daughter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/architectsdaughter/v19/KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYdg4_zg.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Architects Daughter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/architectsdaughter/v19/KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYlg4w.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Audiowide';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/audiowide/v21/l7gdbjpo0cum0ckerWCdmA_OIxo.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Audiowide';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/audiowide/v21/l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Averia Libre';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/averialibre/v16/2V0aKIcMGZEnV6xygz7eNjESBanI.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Bebas Neue';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/bebasneue/v15/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Bebas Neue';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/bebasneue/v15/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Black Ops One';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/blackopsone/v20/qWcsB6-ypo7xBdr6Xshe96H3aDXbtwkh.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Black Ops One';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/blackopsone/v20/qWcsB6-ypo7xBdr6Xshe96H3aDvbtw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Caveat';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/caveat/v22/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIupYSxP.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Caveat';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/caveat/v22/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIWpYQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Cinzel Decorative';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/cinzeldecorative/v18/daaCSScvJGqLYhG8nNt8KPPswUAPni7dTMx7aA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Cinzel Decorative';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/cinzeldecorative/v18/daaCSScvJGqLYhG8nNt8KPPswUAPni7TTMw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Courgette';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/courgette/v18/wEO_EBrAnc9BLjLQAUk1WPoK7Es.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Courgette';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/courgette/v18/wEO_EBrAnc9BLjLQAUk1VvoK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Dancing Script';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/dancingscript/v28/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3ROp8ltA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Dancing Script';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/dancingscript/v28/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Exo';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/exo/v24/4UaZrEtFpBI4f1ZSIK9d4LjJ4lM3OwpmO24p.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Exo';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/exo/v24/4UaZrEtFpBI4f1ZSIK9d4LjJ4lM3OwRmOw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Fjalla One';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/fjallaone/v15/Yq6R-LCAWCX3-6Ky7FAFrO96kigt.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Fjalla One';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/fjallaone/v15/Yq6R-LCAWCX3-6Ky7FAFrOF6kg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Germania One';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/germaniaone/v20/Fh4yPjrqIyv2ucM2qzBjeS3uywhP.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Glass Antiqua';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/glassantiqua/v25/xfu30Wr0Wn3NOQM2piC0uXOjrLb6NpfR.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Glass Antiqua';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/glassantiqua/v25/xfu30Wr0Wn3NOQM2piC0uXOjrLj6Ng.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Gloria Hallelujah';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/gloriahallelujah/v23/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS71zO0vg.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Gloria Hallelujah';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/gloriahallelujah/v23/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zM.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Great Vibes';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/greatvibes/v20/RWmMoKWR9v4ksMfaWd_JN9XLiaQ6DQ.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Great Vibes';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/greatvibes/v20/RWmMoKWR9v4ksMfaWd_JN9XFiaQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Holtwood One SC';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/holtwoodonesc/v22/yYLx0hLR0P-3vMFSk1TCq3Txg5BHeLz7HZs.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Holtwood One SC';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/holtwoodonesc/v22/yYLx0hLR0P-3vMFSk1TCq3Txg5BHdrz7.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Indie Flower';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/indieflower/v23/m8JVjfNVeKWVnh3QMuKkFcZVZ0uH5dI.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Indie Flower';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/indieflower/v23/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Italiana';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/italiana/v21/QldNNTtLsx4E__B0XQmWaXw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Jost';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/jost/v19/92zPtBhPNqw79Ij1E865zBUv7myjJTVPNIg8mg.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Jost';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/jost/v19/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNIg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Kaushan Script';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/kaushanscript/v18/vm8vdRfvXFLG3OLnsO15WYS5DG72wNJHMw.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Kaushan Script';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/kaushanscript/v18/vm8vdRfvXFLG3OLnsO15WYS5DG74wNI.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Metal Mania';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/metalmania/v22/RWmMoKWb4e8kqMfBUdPFJdXLiaQ6DQ.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Metal Mania';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/metalmania/v22/RWmMoKWb4e8kqMfBUdPFJdXFiaQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw3aXpsog.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Neucha';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/neucha/v17/q5uGsou0JOdh94bfuQltOxU.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin */
+@font-face {
+  font-family: 'Neucha';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/neucha/v17/q5uGsou0JOdh94bfvQlt.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v39/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9U6VLKzA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v39/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9a6VI.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Orbitron';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/orbitron/v34/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/oswald/v56/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUhiZTaR.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/oswald/v56/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Pacifico';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6J6MmTpA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Pacifico';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Permanent Marker';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/permanentmarker/v16/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Philosopher';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/philosopher/v20/vEFV2_5QCwIS4_Dhez5jcWBgT00k0w.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Philosopher';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/philosopher/v20/vEFV2_5QCwIS4_Dhez5jcWBuT00.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDZbtPY_Q.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Press Start 2P';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nbivN04w.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Press Start 2P';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Questrial';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/questrial/v18/QdVUSTchPBm7nuUeVf70sCFlq20.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Questrial';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/questrial/v18/QdVUSTchPBm7nuUeVf70viFl.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/quicksand/v36/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58i-wi40.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/quicksand/v36/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Rajdhani';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/rajdhani/v16/LDIxapCSOBg7S-QT7p4JM-aUWA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Rajdhani';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/rajdhani/v16/LDIxapCSOBg7S-QT7p4HM-Y.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/raleway/v36/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Righteous';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/righteous/v18/1cXxaUPXBpj2rGoU7C9WhnGFucE.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Righteous';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/righteous/v18/1cXxaUPXBpj2rGoU7C9WiHGF.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmaiArmlw.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Sacramento';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/sacramento/v16/buEzpo6gcdjy0EiZMBUG4CMf_exL.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Sacramento';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/sacramento/v16/buEzpo6gcdjy0EiZMBUG4C0f_Q.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Satisfy';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/satisfy/v22/rP2Hp2yn6lkG50LoCZOIHQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Space Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYE98RWq7.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Space Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Spectral';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/spectral/v14/rnCr-xNNww_2s0amA9M3knj-SA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Spectral';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/spectral/v14/rnCr-xNNww_2s0amA9M5kng.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Staatliches';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/staatliches/v14/HI_OiY8KO6hCsQSoAPmtMYeVvpCNOw.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Staatliches';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/staatliches/v14/HI_OiY8KO6hCsQSoAPmtMYebvpA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Stint Ultra Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/stintultracondensed/v24/-W_gXIrsVjjeyEnPC45qD2NoFPtBE0xCh2AOox8P6cM.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Stint Ultra Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/stintultracondensed/v24/-W_gXIrsVjjeyEnPC45qD2NoFPtBE0xCh2AOrR8P.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Syncopate';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/syncopate/v23/pe0sMIuPIYBCpEV5eFdCC_e_O98.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Syncopate';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/syncopate/v23/pe0sMIuPIYBCpEV5eFdCBfe_.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Ultra';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/ultra/v25/zOLy4prXmrtY-uTzwrKz6A.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Ultra';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/ultra/v25/zOLy4prXmrtY-uT9wrI.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Unica One';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/unicaone/v19/DPEuYwWHyAYGVTSmalsRf93eiEY.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Unica One';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/unicaone/v19/DPEuYwWHyAYGVTSmalsRcd3e.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/worksans/v23/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBiEJpp_c.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/worksans/v23/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBi8Jpg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Yellowtail';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/yellowtail/v24/OZpGg_pnoDtINPfRIlLohlXHwXD-.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Yellowtail';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/yellowtail/v24/OZpGg_pnoDtINPfRIlLohlvHwQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}