diff --git a/frontend/public/fonts/karla-italic-variable.ttf b/frontend/public/fonts/karla-italic-variable.ttf
deleted file mode 100644
index aecc468..0000000
Binary files a/frontend/public/fonts/karla-italic-variable.ttf and /dev/null differ
diff --git a/frontend/public/fonts/karla-variable.ttf b/frontend/public/fonts/karla-variable.ttf
deleted file mode 100644
index 172b500..0000000
Binary files a/frontend/public/fonts/karla-variable.ttf and /dev/null differ
diff --git a/frontend/public/fonts/molot.woff b/frontend/public/fonts/molot.woff
deleted file mode 100644
index a73dbb1..0000000
Binary files a/frontend/public/fonts/molot.woff and /dev/null differ
diff --git a/frontend/public/fonts/samuraibob.woff b/frontend/public/fonts/samuraibob.woff
deleted file mode 100644
index d33d9a2..0000000
Binary files a/frontend/public/fonts/samuraibob.woff and /dev/null differ
diff --git a/frontend/src/app/global.css b/frontend/src/app/global.css
index 4cd66c9..1dcd3f1 100644
--- a/frontend/src/app/global.css
+++ b/frontend/src/app/global.css
@@ -1,25 +1,3 @@
-@font-face {
-  font-family: 'Karla';
-  src: url('/fonts/karla-variable.ttf') format('truetype');
-  font-weight: 200 800;
-}
-
-@font-face {
-  font-family: 'Samurai Bob';
-  src: url('/fonts/samuraibob.woff2') format('woff2'),
-    url('/fonts/samuraibob.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Molot';
-  src: url('/fonts/molot.woff2') format('woff2'),
-    url('/fonts/molot.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-}
-
 :root {
   color-scheme: light dark;
 
@@ -85,7 +63,6 @@ html {
 
 body {
   margin: 0;
-  font-family: 'Karla', sans-serif;
   background: var(--background);
   color: var(--text);
   font-weight: var(--font-weight);
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index d045f04..18cf665 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next'
+import { Karla } from 'next/font/google'
 
 import Egg from '/src/components/Egg/Egg'
 import Settings from '/src/components/Settings/Settings'
@@ -8,6 +9,8 @@ import { useTranslation } from '/src/i18n/server'
 
 import './global.css'
 
+const karla = Karla({ subsets: ['latin'] })
+
 export const metadata: Metadata = {
   metadataBase: new URL('https://crab.fit'),
   title: {
@@ -33,7 +36,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   const { resolvedLanguage } = await useTranslation([])
 
   return <html lang={resolvedLanguage ?? fallbackLng}>
-    <body>
+    <body className={karla.className}>
       <Settings />
       <Egg />
       <TranslateDialog />
diff --git a/frontend/src/components/Header/Header.module.scss b/frontend/src/components/Header/Header.module.scss
index 7b67da0..1622086 100644
--- a/frontend/src/components/Header/Header.module.scss
+++ b/frontend/src/components/Header/Header.module.scss
@@ -48,7 +48,6 @@
   display: block;
   font-size: 2rem;
   color: var(--primary);
-  font-family: 'Molot', sans-serif;
   font-weight: 400;
   text-shadow: 0 2px 0 var(--shadow);
   line-height: 1em;
@@ -72,7 +71,6 @@
   margin: 0;
   font-size: 3rem;
   text-align: center;
-  font-family: 'Samurai Bob', sans-serif;
   font-weight: 400;
   color: var(--secondary);
   line-height: 1em;
@@ -96,7 +94,6 @@
   font-size: 4rem;
   text-align: center;
   color: var(--primary);
-  font-family: 'Molot', sans-serif;
   font-weight: 400;
   text-shadow: 0 4px 0 var(--shadow);
   line-height: 1em;
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index 37b01ba..7942d94 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -1,3 +1,4 @@
+import localFont from 'next/font/local'
 import Link from 'next/link'
 
 import { useTranslation } from '/src/i18n/server'
@@ -6,6 +7,15 @@ import { makeClass } from '/src/utils'
 
 import styles from './Header.module.scss'
 
+const samuraiBob = localFont({
+  src: './samuraibob.woff2',
+  fallback: ['sans-serif'],
+})
+const molot = localFont({
+  src: './molot.woff2',
+  fallback: ['sans-serif'],
+})
+
 interface HeaderProps {
   /** Show the full header */
   isFull?: boolean
@@ -18,12 +28,12 @@ const Header = async ({ isFull, isSmall }: HeaderProps) => {
   return <header className={styles.header} data-small={isSmall}>
     {isFull ? <>
       {!isSmall && <img className={styles.bigLogo} src={logo.src} alt="" />}
-      <span className={makeClass(styles.subtitle, !/^[A-Za-z ]+$/.test(t('home:create')) && styles.hasAltChars)}>{t('home:create')}</span>
-      <h1 className={styles.bigTitle}>CRAB FIT</h1>
+      <span className={makeClass(styles.subtitle, samuraiBob.className, !/^[A-Za-z ]+$/.test(t('home:create')) && styles.hasAltChars)}>{t('home:create')}</span>
+      <h1 className={makeClass(styles.bigTitle, molot.className)}>CRAB FIT</h1>
     </> : <Link href="/" className={styles.link}>
       <div className={styles.top}>
         <img className={styles.logo} src={logo.src} alt="" />
-        <span className={styles.title}>CRAB FIT</span>
+        <span className={makeClass(styles.title, molot.className)}>CRAB FIT</span>
       </div>
       <span className={styles.tagline}>{t('common:tagline')}</span>
     </Link>}
diff --git a/frontend/public/fonts/molot.woff2 b/frontend/src/components/Header/molot.woff2
similarity index 100%
rename from frontend/public/fonts/molot.woff2
rename to frontend/src/components/Header/molot.woff2
diff --git a/frontend/public/fonts/samuraibob.woff2 b/frontend/src/components/Header/samuraibob.woff2
similarity index 100%
rename from frontend/public/fonts/samuraibob.woff2
rename to frontend/src/components/Header/samuraibob.woff2
