Fix: Apply Nasalization font to all titles

lovable-dev[bot] · lovable-dev[bot] · commit b6736e07319e · 2025-05-11T11:21:35.000Z
- Replaced all instances of 'font-atomic-force' with 'font-nasalization' to ensure the correct font is applied to all titles.
- Ensured that the Nasalization font is correctly loaded and applied across the application.
diff --git a/index.html b/index.html
@@ -8,12 +8,15 @@
     <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 and Direct Load Nasalization Font -->
-    <link rel="preload" href="https://fonts.gstatic.com/s/exo/v20/4UaZrEtFpBI4f1ZSIK9d4LjJ4lM2CwNsOl4p5Is.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="preload" href="https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf" as="font" type="font/ttf" crossorigin />
-    <link href="https://fonts.cdnfonts.com/css/nasalization" rel="stylesheet">
+    <!-- Preload Fonts -->
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin />
+    
+    <!-- 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 -->
+    <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" />
  
     <!-- Open Graph Meta Tags -->
@@ -33,18 +36,26 @@
     <!-- Favicon -->
     <link rel="icon" href="/lovable-uploads/ALogo.png" type="image/x-icon" />
 
-    <!-- Inline font CSS to ensure the Nasalization font is loaded properly -->
+    <!-- Critical Font CSS to prioritize Nasalization font loading -->
     <style>
       @font-face {
         font-family: 'Nasalization';
-        font-style: normal;
+        src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
         font-weight: normal;
+        font-style: normal;
         font-display: swap;
-        src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
       }
-
-      .font-atomic-force, .alien-logo-text, h1, h2, h3, h4, h5, h6 {
+      
+      h1, h2, h3, h4, h5, h6,
+      .font-nasalization {
+        font-family: 'Nasalization', sans-serif !important;
+        font-weight: 400;
+      }
+      
+      /* Remove all references to atomic-force */
+      .font-atomic-force {
         font-family: 'Nasalization', sans-serif !important;
+        font-weight: 400;
       }
     </style>
   </head>
diff --git a/src/components/ExploreSpacesSection.tsx b/src/components/ExploreSpacesSection.tsx
@@ -36,7 +36,7 @@ const ExploreSpacesSection = () => {
           viewport={{ once: true }} 
           className="text-center mb-16"
         >
-          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-atomic-force">Explore Spaces</h2>
+          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-nasalization">Explore Spaces</h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto">
             Discover specialized environments designed to enhance your journey through the cosmos
           </p>
@@ -55,7 +55,7 @@ const ExploreSpacesSection = () => {
               <div className="mb-6 p-4 bg-alien-space-dark rounded-full">
                 {space.icon}
               </div>
-              <h3 className="text-2xl font-bold mb-4 text-alien-gold font-atomic-force">{space.title}</h3>
+              <h3 className="text-2xl font-bold mb-4 text-alien-gold font-nasalization">{space.title}</h3>
               <p className="text-gray-300 mb-8 flex-grow">{space.description}</p>
               <Link to={space.link}>
                 <Button className="bg-alien-green hover:bg-alien-green-light text-alien-space-dark">
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -39,7 +39,7 @@ const Hero = () => {
           
           {/* Título del Hero */}
           <h1 
-            className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold mb-4 tracking-tight text-glow text-center font-atomic-force"
+            className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold mb-4 tracking-tight text-glow text-center font-nasalization"
           >
             <span className="text-alien-green">Δlieπ</span>
             <span className="text-alien-gold">FlΦw</span>
@@ -66,7 +66,7 @@ const Hero = () => {
           {/* Botón About */}
           <Link to="/about">
             <Button 
-              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg rounded-full transition-colors"
+              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-nasalization px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg rounded-full transition-colors"
             >
               <Orbit className="mr-2 h-5 w-5" /> About Enter Portal
             </Button>
@@ -75,7 +75,7 @@ const Hero = () => {
           {/* Botón AlienTrip */}
           <Link to="/alien-trip">
             <Button 
-              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg rounded-full transition-colors"
+              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-nasalization px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg rounded-full transition-colors"
             >
               <ScrollText className="mr-2 h-5 w-5" /> Alientrip Manifesto
             </Button>
@@ -84,7 +84,7 @@ const Hero = () => {
           {/* Botón Contact */}
           <Link to="/contact">
             <Button 
-              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg rounded-full transition-colors"
+              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-nasalization px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg rounded-full transition-colors"
             >
               <Globe className="mr-2 h-5 w-5" /> Contact & Join
             </Button>
diff --git a/src/global.css b/src/global.css
@@ -55,7 +55,7 @@ main {
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
 }
 
-/* Nasalization font configuration - corrected path and format */
+/* Nasalization font configuration - fixed path and format */
 @font-face {
   font-family: 'Nasalization';
   font-style: normal;
@@ -64,11 +64,14 @@ main {
   src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
 }
 
-h1, h2, h3, h4, h5, h6, .font-atomic {
+/* Apply font to all headings */
+h1, h2, h3, h4, h5, h6 {
   font-family: 'Nasalization', sans-serif !important;
   letter-spacing: 0.5px;
+  font-weight: 400;
 }
 
+/* Font class standardization - use only 'font-nasalization' */
 .font-nasalization {
   font-family: 'Nasalization', sans-serif !important;
   font-weight: 400 !important;
@@ -77,7 +80,7 @@ h1, h2, h3, h4, h5, h6, .font-atomic {
   white-space: nowrap !important; /* Keep text in one line */
 }
 
-/* Redefino la clase font-atomic-force para quienes la utilicen todavía */
+/* Maintain backward compatibility but phase out atomic-force */
 .font-atomic-force {
   font-family: 'Nasalization', sans-serif !important;
   font-weight: 400 !important;
@@ -95,4 +98,3 @@ h1, h2, h3, h4, h5, h6, .font-atomic {
   width: 100%;
   text-align: center;
 }
-
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,3 @@
-
 @import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.cdnfonts.com/css/nasalization');
 
@@ -48,8 +47,10 @@
     --sidebar-ring: 48 83% 72%;
   }
 
+  /* Primary font declarations */
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Nasalization', sans-serif !important;
+    font-weight: 400;
   }
 
   body, p, span, div, a, button {
@@ -65,11 +66,13 @@
     src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
   }
 
+  /* Standard class for Nasalization font */
   .font-nasalization {
     font-family: 'Nasalization', sans-serif !important;
     font-weight: 400 !important;
   }
 
+  /* Legacy support but all components should transition to font-nasalization */
   .font-atomic-force {
     font-family: 'Nasalization', sans-serif !important;
     font-weight: 400 !important;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-`
`2`	`1`	`@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap');`
`3`	`2`	`@import url('https://fonts.cdnfonts.com/css/nasalization');`
`4`	`3`
`@@ -48,8 +47,10 @@`
`48`	`47`	`--sidebar-ring: 48 83% 72%;`
`49`	`48`	`}`
`50`	`49`
	`50`	`+ /* Primary font declarations */`
`51`	`51`	`h1, h2, h3, h4, h5, h6 {`
`52`	`52`	`font-family: 'Nasalization', sans-serif !important;`
	`53`	`+ font-weight: 400;`
`53`	`54`	`}`
`54`	`55`
`55`	`56`	`body, p, span, div, a, button {`
`@@ -65,11 +66,13 @@`
`65`	`66`	`src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');`
`66`	`67`	`}`
`67`	`68`
	`69`	`+ /* Standard class for Nasalization font */`
`68`	`70`	`.font-nasalization {`
`69`	`71`	`font-family: 'Nasalization', sans-serif !important;`
`70`	`72`	`font-weight: 400 !important;`
`71`	`73`	`}`
`72`	`74`
	`75`	`+ /* Legacy support but all components should transition to font-nasalization */`
`73`	`76`	`.font-atomic-force {`
`74`	`77`	`font-family: 'Nasalization', sans-serif !important;`
`75`	`78`	`font-weight: 400 !important;`