Support Custom Font (Google Font)

stayingcool · Aug 23, 2021 · d808807 · d808807
1 parent d6a6114
commit d808807
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,26 @@
+// pages/_document.js
+
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Merienda&family=Montserrat+Alternates&display=swap"
+            rel="stylesheet"
+          ></link>
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  font-family: "Montserrat Alternates", sans-serif;
+  font-family: "Merienda", cursive;
+}