diff --git a/apps/www/app/custom.scss b/apps/www/app/custom.scss
index 90c7692..69f35eb 100644
--- a/apps/www/app/custom.scss
+++ b/apps/www/app/custom.scss
@@ -1,4 +1,4 @@
-@import url('nelum-kuluna.css');
+@import 'nelum-kuluna.scss';
 
 .underlined {
   position: relative;
diff --git a/apps/www/app/favicon.ico b/apps/www/app/favicon.ico
index 718d6fe..9c90448 100644
Binary files a/apps/www/app/favicon.ico and b/apps/www/app/favicon.ico differ
diff --git a/apps/www/app/fonts.ts b/apps/www/app/fonts.ts
new file mode 100644
index 0000000..2f6f2a6
--- /dev/null
+++ b/apps/www/app/fonts.ts
@@ -0,0 +1,31 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2024, Brion Mario
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {Space_Grotesk, Inter} from 'next/font/google';
+import {NextFont} from 'next/dist/compiled/@next/font';
+import localFont from 'next/font/local';
+
+export const spaceGrotesk: NextFont = Space_Grotesk({subsets: ['latin'], weight: ['400', '500']});
+export const inter: NextFont = Inter({subsets: ['latin']});
+export const goodBrush: NextFont = localFont({src: '../public/fonts/Good Brush.ttf', variable: '--font-good-brush'});
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index d71c0f6..f0375d4 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -23,15 +23,11 @@
  */
 
 import type {Metadata} from 'next';
-import {Space_Grotesk, Inter} from 'next/font/google';
 import {ReactElement} from 'react';
-import {NextFont} from 'next/dist/compiled/@next/font';
 import ThemeProvider from '@/components/ThemeProvider';
 import './globals.scss';
 import './custom.scss';
-
-const spaceGrotesk: NextFont = Space_Grotesk({subsets: ['latin'], weight: ['400', '500']});
-const inter: NextFont = Inter({subsets: ['latin']});
+import {inter, spaceGrotesk} from './fonts';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
diff --git a/apps/www/app/nelum-kuluna.css b/apps/www/app/nelum-kuluna.scss
similarity index 100%
rename from apps/www/app/nelum-kuluna.css
rename to apps/www/app/nelum-kuluna.scss
diff --git a/apps/www/components/Hero.tsx b/apps/www/components/Hero.tsx
index 986aa7a..c1f2374 100644
--- a/apps/www/components/Hero.tsx
+++ b/apps/www/components/Hero.tsx
@@ -35,6 +35,7 @@ import CoffeeBeans from '@/icons/CoffeeBeans';
 import RegisterButton from './RegisterButton';
 import FlipWords from './FlipWords';
 import Meetup from '@/icons/Meetup';
+import {goodBrush} from '@/app/fonts';
 
 export type HeroProps = HTMLAttributes<HTMLDivElement> & TestableComponent;
 
@@ -62,7 +63,9 @@ const Hero: ForwardRefExoticComponent<HeroProps & RefAttributes<HTMLDivElement>>
         )}
       >
         <div className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6">
-          <h1 className="hero__title font-good-brush tracking-[-0.04em] leading-none text-[40px] md:text-5xl lg:text-[12em] max-w-lg md:max-w-xl lg:max-w-4xl text-center text-white">
+          <h1
+            className={`hero__title ${goodBrush.className} tracking-[-0.04em] leading-none text-[40px] md:text-5xl lg:text-[12em] max-w-lg md:max-w-xl lg:max-w-4xl text-center text-white`}
+          >
             JavaScript Colombo
           </h1>
           <h3 className="flex gap-2 flex-wrap justify-center items-center font-space-grotesk leading-snug dark:text-[#FFFFFFB2] text-[#00000080] text-[20px] lg:text-xl max-w-md md:max-w-xl lg:max-w-[640px] text-center">
diff --git a/apps/www/public/fonts/Good Brush.ttf b/apps/www/public/fonts/Good Brush.ttf
new file mode 100644
index 0000000..e72dad1
Binary files /dev/null and b/apps/www/public/fonts/Good Brush.ttf differ
diff --git a/apps/www/tailwind.config.ts b/apps/www/tailwind.config.ts
index 0b73931..fd4f523 100644
--- a/apps/www/tailwind.config.ts
+++ b/apps/www/tailwind.config.ts
@@ -25,6 +25,7 @@
 import type {Config} from 'tailwindcss';
 import defaultTheme from 'tailwindcss/defaultTheme';
 import animate from 'tailwindcss-animate';
+import {goodBrush} from './app/fonts';
 
 const config: Config = {
   darkMode: ['class'],
@@ -80,7 +81,6 @@ const config: Config = {
       fontFamily: {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],
         'space-grotesk': ['Space Grotesk', 'monospace'],
-        'good-brush': ['Good Brush'],
         mono: [
           'Menlo',
           'Monaco',