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
LAION-AI · Apr 16, 2023 · e7cf828 · e7cf828
1 parent 6ebcd3b
commit e7cf828
Show file tree

Hide file tree

Showing 11 changed files with 14 additions and 30 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.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",

diff --git a/website/public/fonts/Inter-italic.var.woff2 b/website/public/fonts/Inter-italic.var.woff2
diff --git a/website/public/fonts/Inter-roman.var.woff2 b/website/public/fonts/Inter-roman.var.woff2
diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
@@ -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>

diff --git a/website/src/components/SideMenu.tsx b/website/src/components/SideMenu.tsx
@@ -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 })}

diff --git a/website/src/pages/privacy-policy.tsx b/website/src/pages/privacy-policy.tsx
@@ -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">

diff --git a/website/src/pages/team.tsx b/website/src/pages/team.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")}

diff --git a/website/src/pages/terms-of-service.tsx b/website/src/pages/terms-of-service.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

diff --git a/website/src/styles/Theme/index.ts b/website/src/styles/Theme/index.ts
@@ -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 = {

diff --git a/website/src/styles/globals.css b/website/src/styles/globals.css
@@ -2,24 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-    font-family: "Inter";
-    font-weight: 100 900;
-    font-display: block;
-    font-style: normal;
-    font-named-instance: "Regular";
-    src: url("/fonts/Inter-roman.var.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 100 900;
-    font-display: block;
-    font-style: italic;
-    font-named-instance: "Italic";
-    src: url("/fonts/Inter-italic.var.woff2") format("woff2");
-}
-
 #__next {
     min-height: 100%;
 }