Fix: Apply Nasalization font to all titles

lovable-dev[bot] · lovable-dev[bot] · commit fff04f5eb89e · 2025-05-10T13:08:21.000Z
Ensure the Nasalization font is correctly applied to all titles across the application, including the logo, menu, and all page components.
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
  
     <!-- 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">
     
     <!-- Font Stylesheets -->
@@ -31,6 +32,21 @@
  
     <!-- Favicon -->
     <link rel="icon" href="/lovable-uploads/ALogo.png" type="image/x-icon" />
+
+    <!-- Inline font CSS to ensure the Nasalization font is loaded properly -->
+    <style>
+      @font-face {
+        font-family: 'Nasalization';
+        font-style: normal;
+        font-weight: 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 {
+        font-family: 'Nasalization', sans-serif !important;
+      }
+    </style>
   </head>
  
   <body>
diff --git a/src/components/Header/ConnectButton.tsx b/src/components/Header/ConnectButton.tsx
@@ -10,7 +10,7 @@ const ConnectButton = () => {
         alt="Wallet" 
         className="h-5 w-5 sm:h-6 sm:w-6 rounded-full" 
       />
-      <span className="alien-logo-text">Connect Portal</span>
+      <span className="font-atomic-force">Connect Portal</span>
     </Button>
   );
 };
diff --git a/src/components/Header/DesktopNav.tsx b/src/components/Header/DesktopNav.tsx
@@ -14,16 +14,16 @@ const DesktopNav = () => {
   return (
     <nav className="hidden md:flex items-center gap-6">
       <div className="hidden md:flex space-x-4">
-        <Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
+        <Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force">
           Home
         </Link>
-        <Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
+        <Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force">
           About
         </Link>
-        <Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
+        <Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force">
           AlienTrip
         </Link>
-        <Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
+        <Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force">
           Contact
         </Link>
         
@@ -32,9 +32,9 @@ const DesktopNav = () => {
           <DropdownMenuTrigger asChild>
             <Button 
               variant="ghost" 
-              className="text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/30 px-2 py-2 rounded flex items-center group alien-logo-text"
+              className="text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/30 px-2 py-2 rounded flex items-center group font-atomic-force"
             >
-              <span className="alien-logo-text">Explore Spaces</span>
+              <span className="font-atomic-force">Explore Spaces</span>
               <ChevronDown 
                 className="ml-2 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180 group-hover:text-alien-green" 
               />
diff --git a/src/components/Header/Logo.tsx b/src/components/Header/Logo.tsx
@@ -12,7 +12,7 @@ const Logo = () => {
           alt="AlienFlowSpaceDAO Logo" 
           className="h-9" 
         />
-        <span className="alien-logo-text text-base sm:text-lg md:text-xl overflow-hidden text-ellipsis">
+        <span className="font-atomic-force text-base sm:text-lg md:text-xl overflow-hidden text-ellipsis">
           <span className="text-alien-green">Δlieπ</span>
           <span className="text-alien-gold">FlΦw</span>
           <span className="text-alien-green"> $pac€</span>
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 */
+/* Nasalization font configuration - corrected path and format */
 @font-face {
   font-family: 'Nasalization';
   font-style: normal;
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,4 @@
+
 @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');
 
@@ -55,7 +56,7 @@
     font-family: 'Exo', system-ui, sans-serif;
   }
 
-  /* Ensure Nasalization font is loaded with direct source */
+  /* Direct font-face declaration to ensure Nasalization is loaded */
   @font-face {
     font-family: 'Nasalization';
     font-style: normal;

Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ main {`
`55`	`55`	`box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);`
`56`	`56`	`}`
`57`	`57`
`58`		`-/* Nasalization font configuration */`
	`58`	`+/* Nasalization font configuration - corrected path and format */`
`59`	`59`	`@font-face {`
`60`	`60`	`font-family: 'Nasalization';`
`61`	`61`	`font-style: normal;`