Replace fonts loaded via stylesheet with use of next/font (#2600)

Solves #1832 

I wasn't sure to use local font or just use google font. I can undo that
change if use of Google font is undesirable

Author: spencerwmiles

website/package-lock.json

@@ -37,7 +37,7 @@
     "@marsidev/react-turnstile": "^0.0.7",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@next/bundle-analyzer": "^13.2.4",
-    "@next/font": "^13.2.4",
+    "@next/font": "13.0.6",
     "@nikolovlazar/chakra-ui-prose": "^1.2.1",
     "@prisma/client": "^4.11.0",
     "@tailwindcss/forms": "^0.5.3",

website/package.json

@@ -98,7 +98,7 @@ export function Header({ preLogoSlot }: HeaderProps) {
           {preLogoSlot}
           <Flex as={Link} gap="3" href={homeURL} aria-label="Home" alignItems="center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
-            <Text fontFamily="inter" fontSize={["lg", "2xl"]} fontWeight="bold" className="hidden sm:block">
+            <Text fontSize={["lg", "2xl"]} fontWeight="bold" className="hidden sm:block">
               {t("title")}
             </Text>
           </Flex>

website/public/fonts/Inter-italic.var.woff2

@@ -51,7 +51,6 @@ export function SideMenu({ items, collapsed }: SideMenuProps) {
           return (
             <Tooltip
               key={item.labelID}
-              fontFamily="inter"
               label={label}
               placement="right"
               className={clsx("hidden sm:block", { "lg:hidden": !collapsed })}

website/public/fonts/Inter-roman.var.woff2

@@ -168,7 +168,7 @@ const PrivacyPolicy = () => {
         <title>Privacy Policy - Open Assistant</title>
         <meta name="description" content="Open Assistant's Privacy Policy" />
       </Head>
-      <Box fontFamily="Inter" p="6" className="oa-basic-theme">
+      <Box p="6" className="oa-basic-theme">
         <Box className="max-w-4xl mx-auto">
           <Stack spacing="6" mb="6">
             <Heading as="h1" size="xl" color="blue.500">

website/src/components/Header/Header.tsx

@@ -17,7 +17,7 @@ const Team = () => {
         <title>{`${t("who_are_we")} - Open Assistant`}</title>
         <meta name="description" content="The team behind Open Assistant" />
       </Head>
-      <Box fontFamily="Inter" p="6" className="oa-basic-theme">
+      <Box p="6" className="oa-basic-theme">
         <Stack className="max-w-6xl mx-auto" spacing="6" mb="6">
           <Heading as="h1" size="xl" color="blue.500">
             {t("who_are_we")}

website/src/components/SideMenu.tsx

@@ -10,7 +10,7 @@ const TermsOfServicePage = () => {
         <title>Terms of Service - Open Assistant</title>
         <meta name="description" content="Open Assistant's Terms of Service" />
       </Head>
-      <Box fontFamily="Inter" p="6" className="oa-basic-theme">
+      <Box p="6" className="oa-basic-theme">
         <Box className="max-w-4xl mx-auto">
           <Heading as="h1" size="xl" color="blue.500" mb="6">
             Terms of Service

website/src/pages/privacy-policy.tsx

@@ -7,6 +7,9 @@ import { badgeTheme } from "./components/Badge";
 import { cardTheme } from "./components/Card";
 import { containerTheme } from "./components/Container";
 import { tableTheme } from "./components/Table";
+import { Inter } from "@next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
 
 const config: ThemeConfig = {
   initialColorMode: "light",
@@ -30,8 +33,8 @@ const breakpoints = {
 };
 
 const fonts = {
-  heading: "Inter",
-  body: "Inter",
+  heading: inter.style.fontFamily,
+  body: inter.style.fontFamily,
 };
 
 const styles: Styles = {