Fix: Apply Nasalization font to headings

Ensures the Nasalization font is correctly applied to all heading elements.

Author: lovable-dev[bot]

index.html

@@ -12,10 +12,10 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin />
 
-    <!-- Preload Nasalization Font -->
+    <!-- Preload Nasalization Font with high priority -->
     <link rel="preload" href="https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
 
-    <!-- Font Stylesheets -->
+    <!-- Font Stylesheets - Direct import without @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,12 +36,12 @@
     <!-- Favicon -->
     <link rel="icon" href="/lovable-uploads/ALogo.png" type="image/x-icon" />
 
-    <!-- Critical Font CSS to prioritize Nasalization font loading -->
+    <!-- Critical Font CSS inlined to ensure Nasalization loads first -->
     <style>
       @font-face {
         font-family: 'Nasalization';
         src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
-        font-weight: normal;
+        font-weight: 400;
         font-style: normal;
         font-display: swap;
       }
@@ -50,12 +50,15 @@
       .font-nasalization {
         font-family: 'Nasalization', sans-serif !important;
         font-weight: 400;
+        letter-spacing: 0.5px;
       }
 
       /* Remove all references to atomic-force */
-      .font-atomic-force {
+      body * .font-atomic-force,
+      body * .font-atomic {
         font-family: 'Nasalization', sans-serif !important;
         font-weight: 400;
+        letter-spacing: 0.5px;
       }
     </style>
   </head>

src/global.css

@@ -55,7 +55,7 @@ main {
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
 }
 
-/* Nasalization font configuration - fixed path and format */
+/* Direct font-face declarations with fixed path and format */
 @font-face {
   font-family: 'Nasalization';
   font-style: normal;
@@ -64,14 +64,14 @@ main {
   src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
 }
 
-/* Apply font to all headings */
+/* Apply font to all headings with !important to enforce */
 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' */
+/* Standardize font class - use only 'font-nasalization' */
 .font-nasalization {
   font-family: 'Nasalization', sans-serif !important;
   font-weight: 400 !important;
@@ -80,8 +80,9 @@ h1, h2, h3, h4, h5, h6 {
   white-space: nowrap !important; /* Keep text in one line */
 }
 
-/* Maintain backward compatibility but phase out atomic-force */
-.font-atomic-force {
+/* Legacy support - convert all instances to Nasalization */
+.font-atomic-force,
+.font-atomic {
   font-family: 'Nasalization', sans-serif !important;
   font-weight: 400 !important;
   font-style: normal !important;

src/index.css

@@ -1,10 +1,17 @@
-@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');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* Direct font loading - no @import to ensure better loading */
+@font-face {
+  font-family: 'Nasalization';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
+}
+
 @layer base {
   :root {
     --background: 240 33% 5%;
@@ -47,7 +54,7 @@
     --sidebar-ring: 48 83% 72%;
   }
 
-  /* Primary font declarations */
+  /* Primary font declarations with !important to override any other styles */
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Nasalization', sans-serif !important;
     font-weight: 400;
@@ -57,23 +64,15 @@
     font-family: 'Exo', system-ui, sans-serif;
   }
 
-  /* Direct font-face declaration to ensure Nasalization is loaded */
-  @font-face {
-    font-family: 'Nasalization';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    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 {
+  /* Convert all atomic-force references to nasalization */
+  .font-atomic-force,
+  .font-atomic {
     font-family: 'Nasalization', sans-serif !important;
     font-weight: 400 !important;
   }
@@ -221,11 +220,7 @@
   }
 }
 
-/* Additional corrections */
-.font-atomic {
-  font-family: 'Nasalization', sans-serif !important;
-}
-
+/* Additional corrections for font consistency */
 .section-center {
   display: flex;
   flex-direction: column;