adds custom font

Author: Lailo

src/pages/_document.tsx

@@ -23,7 +23,7 @@ class Document extends NextDocument {
             content="initial-scale=1.0, width=device-width"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,800;1,800&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;800&display=swap"
             rel="stylesheet"
           />
         </Head>

src/pages/index.tsx

@@ -9,11 +9,11 @@ const IndexPage: NextPage = () => {
   return (
     <Layout title="Your Awesome App" className="container py-8 max-w-xl">
       <h1 className="dark:text-gray-100 text-3xl font-black mb-4">Welcome</h1>
-      <p className="mb-4">
+      <p className="mb-4 font-light text-lg">
         This is an template project using NextJS with TailwindCSS including dark
         mode switcher.
       </p>
-      <p className="mb-6">
+      <p className="mb-6 font-light text-lg">
         It includes some example components with jest testing and typography but
         it's not complete nor is it tested well.
       </p>

src/styles/main.css

@@ -8,10 +8,15 @@
 
 body {
   @apply bg-gray-200;
-  @apply text-black
+  @apply text-black;
+  @apply font-body;
 }
 
 body.dark-mode {
   @apply bg-gray-900;
-  @apply text-white
+  @apply text-white;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  @apply font-header;
 }

tailwind.config.js

@@ -6,6 +6,10 @@ module.exports = {
       center: true,
       padding: '1rem',
     },
+    fontFamily: {
+      header: ['Open Sans', 'sans-serif'],
+      body: ['Open Sans', 'sans-serif'],
+    },
     extend: {},
   },
   variants: {