Add Poppins font family

pages/_app.css

@@ -1,3 +1,7 @@
+* {
+  font-family: "Poppins", "sans-serif";
+}
+
 /* Default is light theme */
 body {
   --off-white: #fdf8f5;
@@ -27,4 +31,4 @@ body {
     #1481e3 -17.95%,
     #4ed4b2 172.82%
   );
-}
+}

pages/_app.tsx

@@ -3,6 +3,7 @@ import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
 import "./_app.css";
+import "./font.css";
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (

pages/font.css

@@ -0,0 +1,145 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 8, 2021 */
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-thin-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-thin-webfont.woff") format("woff");
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-thinitalic-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-thinitalic-webfont.woff") format("woff");
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-extralight-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-extralight-webfont.woff") format("woff");
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-extralightitalic-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-extralightitalic-webfont.woff") format("woff");
+  font-weight: 200;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-light-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-light-webfont.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-lightitalic-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-lightitalic-webfont.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-regular-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-regular-webfont.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-italic-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-italic-webfont.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-medium-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-medium-webfont.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-mediumitalic-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-mediumitalic-webfont.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-semibold-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-semibold-webfont.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-semibolditalic-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-semibolditalic-webfont.woff") format("woff");
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-bold-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-bold-webfont.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-bolditalic-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-bolditalic-webfont.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-extrabold-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-extrabold-webfont.woff") format("woff");
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-extrabolditalic-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-extrabolditalic-webfont.woff") format("woff");
+  font-weight: 800;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-black-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-black-webfont.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("/fonts/poppins-blackitalic-webfont.woff2") format("woff2"),
+    url("/fonts/poppins-blackitalic-webfont.woff") format("woff");
+  font-weight: 900;
+  font-style: italic;
+}