diff --git a/src/app/globals.css b/src/app/globals.css
index a448ab5..4518585 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,6 +7,8 @@
     --futuristic-cyan: #06b6d4;
     --futuristic-pink: #ec4899;
     --futuristic-blue: #3b82f6;
+    --font-outfit: 'Outfit', sans-serif;
+    --font-inter: 'Inter', sans-serif;
   }
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5ea1100..230cfa8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { Inter, Outfit } from "next/font/google";
 import { Navbar } from "@/components/Navbar";
 import NewsTicker from "@/components/NewsTicker";
 import { GlobalTopBanner } from "@/components/AdWrappers";
@@ -7,8 +6,7 @@ import { getEntity } from "@/app/actions/entity";
 import { GlobalPlayer } from "@/components/media/GlobalPlayer";
 import "./globals.css";
 
-const outfit = Outfit({ subsets: ["latin"], variable: "--font-outfit" });
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+
 
 export async function generateMetadata(): Promise<Metadata> {
   const entity = await getEntity();
@@ -30,7 +28,12 @@ export default async function RootLayout({
   const entity = await getEntity();
 
   return (
-    <html lang="es" className={`${outfit.variable} ${inter.variable}`}>
+    <html lang="es">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Outfit:wght@100..900&display=swap" rel="stylesheet" />
+      </head>
       <body className="bg-slate-950 font-inter text-slate-50 antialiased selection:bg-cyan-500/30 overflow-x-hidden min-h-screen">
           <Navbar entity={entity} />