Sollte richtig sein aber zu viele fonts

pages/_app.js

@@ -1,6 +1,75 @@
-import "@/styles/tailwind.build.css"; // dein Tailwind-Build
+// pages/app.js
+import "@/styles/tailwind.build.css";
 import "../styles/globals.css";
 
+// Alle exportierten Schriftarten aus lib/fonts.js importieren
+import {
+  montserrat,
+  lato,
+  raleway,
+  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 }) {
-  return <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 (
+    <div className={fontVariables}>
+      <Component {...pageProps} />
+    </div>
+  );
 }

pages/index.jsx

@@ -232,24 +232,27 @@ export default function HomePage() {
             </div>
           )}
 
-          <motion.div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 mb-8" layout>
-            <AnimatePresence mode="popLayout">
-              {filteredFonts.map((name, i) => (
-                <PerformanceOptimizedFontCard
-                  key={name}
-                  fontName={name}
-                  transformedText={transformText(debouncedText, name)}
-                  category={fontTransforms[name]?.category}
-                  isPopular={popularFonts.includes(name)}
-                  animationsEnabled={animationsEnabled}
-                  index={i}
-                  onCopy={trackFontCopy}
-                  onLike={trackFontLike}
-                  onShare={handleQuickShare}
-                />
-              ))}
-            </AnimatePresence>
-          </motion.div>
+         <motion.div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 mb-8" layout>
+  <AnimatePresence mode="popLayout">
+    {filteredFonts.map((name, i) => (
+      <PerformanceOptimizedFontCard
+        key={name}
+        fontName={name}
+        transformedText={{
+          transformed: debouncedText,
+          fontClassName: fontTransforms[name].className,
+        }}
+        category={fontTransforms[name]?.category}
+        isPopular={popularFonts.includes(name)}
+        animationsEnabled={animationsEnabled}
+        index={i}
+        onCopy={trackFontCopy}
+        onLike={trackFontLike}
+        onShare={handleQuickShare}
+      />
+    ))}
+  </AnimatePresence>
+</motion.div>
 
 
           <SocialButtons onShare={handleQuickShare} />