fix: bad fonts

icco · Dec 17, 2023 · 03a80a6 · 03a80a6
1 parent a4b0287
commit 03a80a6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -4,7 +4,7 @@
 
 body,
 p {
-  font-family: "Roboto", sans-serif;
+  font-family: var(--font-roboto);
   color: theme('colors.text');
   background-color: theme('colors.background');
 }
@@ -17,7 +17,7 @@ pre {
 }
 
 p code {
-  font-family: monospace;
+  font-family: var(--font-roboto-mono);
   overflow-wrap: break-word;
   padding: 0.2em;
 }
@@ -27,7 +27,7 @@ h2,
 h3,
 h4,
 .header {
-  font-family: "Roboto Slab", serif;
+  font-family: var(--font-roboto-slab);
 }
 
 
@@ -179,4 +179,4 @@ article hr {
   article ul {
     margin-left: 0.5rem;
   }
-}
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,16 +1,28 @@
 import "./globals.css"
 
 import type { Metadata } from "next"
-import { Roboto } from "next/font/google"
+import { Roboto, Roboto_Mono, Roboto_Slab } from "next/font/google"
 
 import Footer from "@/components/Footer"
 import Header from "@/components/Header"
 
-const font = Roboto({
+const roboto = Roboto({
   weight: "400",
+  variable: "--font-roboto",
   subsets: ["latin"],
 })
 
+const robotoSlab = Roboto_Slab({
+  variable: "--font-roboto-slab",
+  subsets: ["latin"],
+})
+
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+  display: "swap",
+})
+
 export const metadata: Metadata = {
   title: "Nat? Nat. Nat!",
   description: "The personal blog of Nat Welch",
@@ -22,8 +34,11 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className={font.className}>
+    <html
+      lang="en"
+      className={`${roboto.variable} ${robotoSlab.variable} ${robotoMono.variable}`}
+    >
+      <body>
         <Header />
         <main>{children}</main>
         <Footer />