Fix: Apply Nasalization font to headings

Ensures the Nasalization font is correctly applied to all headings across the application, including the menu and page titles.

Author: lovable-dev[bot]

index.html

@@ -8,14 +8,14 @@
     <meta name="author" content="AlienFlowSpace" />
     <meta name="description" content="AlienFlowSpace DAO unites BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi, and TradFi under one cosmic ecosystem." />
 
-    <!-- Preload Fonts -->
+    <!-- Preload Fonts - Alta prioridad para Nasalization -->
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin />
 
-    <!-- Preload Nasalization Font with high priority -->
+    <!-- MAXIMUM PRIORITY: Preload Nasalization Font -->
     <link rel="preload" href="https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
 
-    <!-- Font Stylesheets - Direct import without @import -->
+    <!-- Font Stylesheets - Carga directa sin @import -->
     <link href="https://fonts.cdnfonts.com/css/nasalization" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" />
 
@@ -36,8 +36,9 @@
     <!-- Favicon -->
     <link rel="icon" href="/lovable-uploads/ALogo.png" type="image/x-icon" />
 
-    <!-- Critical Font CSS inlined to ensure Nasalization loads first -->
+    <!-- Critical Font CSS inlined para asegurar carga inmediata de Nasalization -->
     <style>
+      /* CRITICAL: Carga prioritaria de Nasalization */
       @font-face {
         font-family: 'Nasalization';
         src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
@@ -46,19 +47,20 @@
         font-display: swap;
       }
 
+      /* FORZAR aplicación de Nasalization a todos los elementos con clase o etiqueta */
       h1, h2, h3, h4, h5, h6,
       .font-nasalization {
         font-family: 'Nasalization', sans-serif !important;
-        font-weight: 400;
-        letter-spacing: 0.5px;
+        font-weight: 400 !important;
+        letter-spacing: 0.5px !important;
       }
 
-      /* Remove all references to atomic-force */
-      body * .font-atomic-force,
-      body * .font-atomic {
+      /* Eliminar todas las referencias a atomic-force/atomic */
+      .font-atomic-force,
+      .font-atomic {
         font-family: 'Nasalization', sans-serif !important;
-        font-weight: 400;
-        letter-spacing: 0.5px;
+        font-weight: 400 !important;
+        letter-spacing: 0.5px !important;
       }
     </style>
   </head>

src/global.css

@@ -55,7 +55,7 @@ main {
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
 }
 
-/* Direct font-face declarations with fixed path and format */
+/* NASALIZATION FONT: Carga directa con ruta fija */
 @font-face {
   font-family: 'Nasalization';
   font-style: normal;
@@ -64,30 +64,28 @@ main {
   src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
 }
 
-/* Apply font to all headings with !important to enforce */
+/* IMPORTANTE: Aplicar fuente a TODOS los encabezados con !important para forzar */
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Nasalization', sans-serif !important;
-  letter-spacing: 0.5px;
-  font-weight: 400;
+  letter-spacing: 0.5px !important;
+  font-weight: 400 !important;
 }
 
-/* Standardize font class - use only 'font-nasalization' */
+/* Clase estandarizada para la fuente - usar solo 'font-nasalization' */
 .font-nasalization {
   font-family: 'Nasalization', sans-serif !important;
   font-weight: 400 !important;
   font-style: normal !important;
   letter-spacing: 0.5px !important;
-  white-space: nowrap !important; /* Keep text in one line */
 }
 
-/* Legacy support - convert all instances to Nasalization */
+/* Soporte legacy - convertir todas las instancias a Nasalization */
 .font-atomic-force,
 .font-atomic {
   font-family: 'Nasalization', sans-serif !important;
   font-weight: 400 !important;
   font-style: normal !important;
   letter-spacing: 0.5px !important;
-  white-space: nowrap !important; /* Keep text in one line */
 }
 
 /* Alignment correction for sections */

src/index.css

@@ -3,7 +3,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Direct font loading - no @import to ensure better loading */
+/* NASALIZATION FONT: Carga directa sin @import para mejor rendimiento */
 @font-face {
   font-family: 'Nasalization';
   font-style: normal;
@@ -54,27 +54,30 @@
     --sidebar-ring: 48 83% 72%;
   }
 
-  /* Primary font declarations with !important to override any other styles */
+  /* IMPORTANTE: Declaraciones de fuente prioritarias con !important */
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Nasalization', sans-serif !important;
-    font-weight: 400;
+    font-weight: 400 !important;
+    letter-spacing: 0.5px !important;
   }
 
   body, p, span, div, a, button {
     font-family: 'Exo', system-ui, sans-serif;
   }
 
-  /* Standard class for Nasalization font */
+  /* Clase estándar para fuente Nasalization */
   .font-nasalization {
     font-family: 'Nasalization', sans-serif !important;
     font-weight: 400 !important;
+    letter-spacing: 0.5px !important;
   }
 
-  /* Convert all atomic-force references to nasalization */
+  /* Convertir todas las referencias atomic-force/atomic a nasalization */
   .font-atomic-force,
   .font-atomic {
     font-family: 'Nasalization', sans-serif !important;
     font-weight: 400 !important;
+    letter-spacing: 0.5px !important;
   }
 }
 

src/main.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
+import './global.css'; // Asegurar que global.css se carga explícitamente
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

src/pages/Academy.tsx

@@ -26,7 +26,7 @@ const CourseCard = ({ title, description, icon, level, duration, color }: {
           <span className="px-2 py-1 text-xs bg-alien-space-light rounded-full text-alien-green">{duration}</span>
         </div>
       </div>
-      <h3 className="text-xl font-semibold mb-2 text-alien-gold font-atomic-force">{title}</h3>
+      <h3 className="text-xl font-semibold mb-2 text-alien-gold font-nasalization">{title}</h3>
       <p className="text-gray-300 text-sm mb-4">{description}</p>
       <Button variant="outline" className="w-full border-alien-gold/30 text-alien-gold hover:bg-alien-gold/10">
         Explore Course
@@ -95,7 +95,7 @@ const Academy: React.FC = () => {
         <div className="max-w-6xl mx-auto">
           <div className="text-center mb-16">
             <GraduationCap className="h-16 w-16 text-alien-gold mx-auto mb-4" />
-            <h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-6 font-atomic-force">Academy</h1>
+            <h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-6 font-nasalization">Academy</h1>
             <p className="text-xl text-gray-300 max-w-3xl mx-auto font-[Exo]">
               Expand your cosmic knowledge and master the principles of decentralized technologies through our immersive learning experiences.
             </p>
@@ -105,7 +105,7 @@ const Academy: React.FC = () => {
           <div className="mb-16 bg-alien-space-dark/60 rounded-xl overflow-hidden backdrop-blur-md border border-alien-gold/30">
             <div className="grid grid-cols-1 md:grid-cols-2">
               <div className="p-8 md:p-12">
-                <h2 className="text-3xl font-bold text-alien-gold mb-4 font-atomic-force">Certification Degree Master's Program</h2>
+                <h2 className="text-3xl font-bold text-alien-gold mb-4 font-nasalization">Certification Degree Master's Program</h2>
                 <p className="text-gray-300 mb-6 font-[Exo]">
                   Become a certified ΔlieπFlΦw $pac€ Explorer & Navigator and unlock exclusive opportunities in our expanding cosmic ecosystem.
                 </p>
@@ -135,7 +135,7 @@ const Academy: React.FC = () => {
 
           {/* Course Grid */}
           <div className="mb-16">
-            <h2 className="text-2xl font-bold text-alien-gold mb-8 font-atomic-force">Featured Courses</h2>
+            <h2 className="text-2xl font-bold text-alien-gold mb-8 font-nasalization">Featured Courses</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {courses.map((course, index) => (
                 <CourseCard key={index} {...course} />
@@ -145,7 +145,7 @@ const Academy: React.FC = () => {
 
           {/* CTA Section */}
           <div className="text-center bg-alien-space-dark/50 rounded-xl p-8 backdrop-blur-md border border-alien-gold/20">
-            <h2 className="text-2xl font-bold text-alien-gold mb-4 font-atomic-force">Ready to Expand Your Cosmic Knowledge?</h2>
+            <h2 className="text-2xl font-bold text-alien-gold mb-4 font-nasalization">Ready to Expand Your Cosmic Knowledge?</h2>
             <p className="text-gray-300 mb-6 max-w-2xl mx-auto font-[Exo]">
               Join thousands of space navigators on their journey to master the principles of the decentralized multiverse.
             </p>

src/pages/Index.tsx

@@ -27,7 +27,7 @@ const Index: React.FC = () => {
       <div className="relative z-10">
         <Hero />
         <div className="container mx-auto text-center px-4 py-8 section-center">
-          <h2 className="text-4xl md:text-5xl mb-4 text-alien-gold font-atomic-force">₿£€$$</h2>
+          <h2 className="text-4xl md:text-5xl mb-4 text-alien-gold font-nasalization">₿£€$$</h2>
         </div>
         <FinancialFreedomSection />
         <ExploreSpacesSection />