diff --git a/src/components/blocks/hero/hero.tsx b/src/components/blocks/hero/hero.tsx
index 3d0b4a7..d03b278 100644
--- a/src/components/blocks/hero/hero.tsx
+++ b/src/components/blocks/hero/hero.tsx
@@ -77,7 +77,7 @@ export default function HeroSection() {
                   preset="fade-in-blur"
                   speedSegment={0.3}
                   as="h1"
-                  className="mt-8 text-balance text-5xl lg:mt-16 xl:text-[5rem]"
+                  className="mt-8 text-balance text-5xl font-bricolage-grotesque lg:mt-16 xl:text-[5rem]"
                 >
                   {t('title')}
                 </TextEffect>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 43e3650..71c70a4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -14,6 +14,8 @@
  *
  * default theme: Clean Slate
  * https://tweakcn.com/editor/theme
+ * 
+ * NOTICE: when you change the theme, you need to check the fonts and keep the animation variables
  *
  * 3. How to Add a Theme Selector to Your Next.js App
  * https://ouassim.tech/notes/how-to-add-a-theme-selector-to-your-nextjs-app/
@@ -52,10 +54,6 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  --font-sans: var(--font-noto-sans);
-  --font-mono: var(--font-noto-sans-mono);
-  --font-serif: var(--font-noto-serif);
-
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -70,6 +68,12 @@
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);
 
+  /* fonts */
+  --font-sans: var(--font-noto-sans);
+  --font-mono: var(--font-noto-sans-mono);
+  --font-serif: var(--font-noto-serif);
+  --font-bricolage-grotesque: var(--font-bricolage-grotesque);
+
   /* animate */
   --animate-shiny-text: shiny-text 8s infinite;
   --animate-rainbow: rainbow var(--speed, 2s) infinite linear;