Fonts werden teilweise geladen

pages/_app.js

@@ -1,6 +1,7 @@
 // pages/_app.jsx
 import "@/styles/tailwind.build.css"; // dein Tailwind‑Build
 import { fonts } from "@/lib/fonts";
+import "../styles/local-fonts.css";
 
 // CSS-Variablen für alle Fonts aus next/font/google
 const allFontVars = Object.values(fonts)

pages/index.jsx

@@ -9,12 +9,14 @@ import {
   getPopularFonts,
   transformText,
 } from "@/components/fontTransforms";
+
 import MobileOptimizedHeader from "@/components/MobileOptimizedHeader";
 import EnhancedTextInput from "@/components/EnhancedTextInput";
 import ImprovedCategoryFilter from "@/components/ImprovedCategoryFilter";
 import PerformanceOptimizedFontCard from "@/components/PerformanceOptimizedFontCard";
 import InfoSection from "@/components/InfoSection";
 import SocialButtons from "@/components/SocialButtons";
+import FancyTextPreview from "@/components/FancyTextPreview";
 import SEOHead from "@/components/SEOHead";
 
 if (typeof window !== "undefined") {
@@ -28,6 +30,7 @@ export default function HomePage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [recentFonts, setRecentFonts] = useState([]);
   const [isMobile, setIsMobile] = useState(false);
+
   const [animationsEnabled, setAnimationsEnabled] = useState(() => {
     if (typeof window !== "undefined") {
       const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -248,6 +251,7 @@ export default function HomePage() {
             </AnimatePresence>
           </motion.div>
 
+
           <SocialButtons onShare={handleQuickShare} />
           <InfoSection currentText={debouncedText} />
         </div>