Use nextjs font loader

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;

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>}