fix: secondary font not loading

YARC-Official · Jan 24, 2024 · 8c9593a · 8c9593a
1 parent 327f307
commit 8c9593a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/app/fonts.ts b/src/app/fonts.ts
@@ -0,0 +1,11 @@
+import { Inter, Red_Hat_Display } from 'next/font/google';
+
+export const inter = Inter({ 
+    subsets: ['latin'],
+});
+
+export const redHatDisplay = Red_Hat_Display({ 
+    weight: ["900"], 
+    subsets: ['latin'],
+    variable: "--font-red-hat-display",
+});
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,7 @@
 import type { Metadata, Viewport } from 'next'
-import { Inter } from 'next/font/google'
+import { inter, redHatDisplay } from '@/app/fonts';
 import './globals.css'
 
-const inter = Inter({ subsets: ['latin'] })
 
 const defaultTitle = "YARG | Yet Another Rhythm Game";
 const description = "YARG (a.k.a. Yet Another Rhythm Game) is a free, open-source, plastic guitar game that is still in development. It supports guitar (five fret), drums (plastic or e-kit), vocals, pro-guitar, and more!";
@@ -51,7 +50,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={[inter.className, redHatDisplay.variable].join(" ")}>{children}</body>
     </html>
   )
 }
diff --git a/src/components/Home/Hero/hero.module.css b/src/components/Home/Hero/hero.module.css
@@ -26,7 +26,7 @@
 }
 
 .hero .title {
-    font-family: 'Red Hat Display';
+    font-family: var(--font-red-hat-display);
     font-weight: 900;
     font-size: 3.75em;
     line-height: 1em;