Integrated Nextjs Fonts (#177)

Integrated Nextjs font system

src/pages/_app.tsx

@@ -1,7 +1,17 @@
-import '@/styles/globals.scss';
-import type { AppProps } from 'next/app';
-import { ReactElement } from 'react';
+import type { AppProps } from "next/app";
+import { ReactElement } from "react";
+import { Inter } from "@next/font/google";
+
+const inter = Inter ({
+  weight: ["400", "700"],
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
 
 export default function App({ Component, pageProps }: AppProps): ReactElement {
-  return <Component {...pageProps} />;
+  return (
+    <div className={`${inter.variable}`}>
+      <Component {...pageProps} />
+    </div>
+  );
 }

src/pages/about-us.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function AboutUs(): React.JSX.Element {
+  return (
+    <div>
+      <h1>About Us</h1>
+    </div>
+  );
+};

src/pages/index.tsx

@@ -1,8 +1,5 @@
-import { Inter } from '@next/font/google';
 import { ReactElement } from 'react';
 
-const inter = Inter({ subsets: ['latin'] });
-
 export default function Home(): ReactElement {
   return (
     <div>

src/styles/about-us/about-us.modules.scss

@@ -0,0 +1,2 @@
+@use 'src/styles/mixins';
+

src/styles/globals.scss

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
-
 :root {
 
   // colors
@@ -14,52 +12,41 @@
   --spacer: 48px;
 }
 
+h1, h1, h3, h4, p, .p-small, .p-details {
+  font-family: var(--font-inter);
+  font-style: normal;
+  font-weight: 700;
+}
+
 h1 {
-  font-family: 'Inter';
   font-size: 7.5rem;
-  font-style: normal;
   font-weight: 400;
 }
 
 h2 {
-  font-family: 'Inter';
   font-size: 3.875rem;
-  font-style: normal;
-  font-weight: 700;
 }
 
 h3 {
-  font-family: 'Inter';
   font-size: 3.25rem;
-  font-style: normal;
-  font-weight: 700;
 }
 
 h4 {
-  font-family: 'Inter';
   font-size: 2.625rem;
-  font-style: normal;
-  font-weight: 700;
 }
 
 p {
-  font-family: 'Inter';
   font-size: 2rem;
-  font-style: normal;
   font-weight: 400;
 }
 
 .p-small {
-  font-family: 'Inter';
   font-size: 1.5rem;
-  font-style: normal;
   font-weight: 400;
 }
 
 .p-details {
-  font-family: 'Inter';
   font-size: 1.125rem;
-  font-style: normal;
   font-weight: 400;
 }