Update fonts (#124)

components/common/SearchBar/searchBar.tsx

@@ -76,7 +76,7 @@ export const SearchBar = (props: SearchProps) => {
         <Autocomplete
           autoHighlight={true}
           disabled={props.disabled}
-          className="w-full h-12 bg-primary-light font-sans"
+          className="w-full h-12 bg-primary-light"
           open={open}
           onOpen={() => {
             setOpen(true);
@@ -115,7 +115,7 @@ export const SearchBar = (props: SearchProps) => {
               ref={params.InputProps.ref}
               inputProps={params.inputProps}
               fullWidth={true}
-              className="font-sans w-full h-12 bg-primary-light text-gray-600 dark:text-gray-200 placeholder-dark"
+              className="w-full h-12 bg-primary-light text-gray-600 dark:text-gray-200 placeholder-dark"
               placeholder="Search course, professor, or both...."
               startAdornment={
                 <InputAdornment position="start">

components/graph/BoxGraph/BoxGraph.tsx

@@ -103,6 +103,9 @@ export function BoxGraph(props: GraphProps) {
     title: {
       text: props.title,
       align: 'left',
+      style: {
+        fontFamily: 'inherit',
+      },
     },
     noData: {
       text: 'Please select a class to add',
@@ -111,9 +114,8 @@ export function BoxGraph(props: GraphProps) {
       offsetX: 0,
       offsetY: 0,
       style: {
-        color: undefined,
         fontSize: '14px',
-        fontFamily: undefined,
+        fontFamily: 'inherit',
       },
     },
     theme: {

components/graph/HorizontalBarGraph/HorizontalBarGraph.tsx

@@ -78,6 +78,9 @@ export function HorizontalBarGraph(props: GraphProps) {
     title: {
       text: props.title,
       align: 'left',
+      style: {
+        fontFamily: 'inherit',
+      },
     },
     noData: {
       text: 'Please select a class to add',
@@ -86,9 +89,8 @@ export function HorizontalBarGraph(props: GraphProps) {
       offsetX: 0,
       offsetY: 0,
       style: {
-        color: undefined,
         fontSize: '14px',
-        fontFamily: undefined,
+        fontFamily: 'inherit',
       },
     },
     theme: {

components/graph/LineGraph/LineGraph.tsx

@@ -71,6 +71,9 @@ export function LineGraph(props: GraphProps) {
     title: {
       text: props.title,
       align: 'left',
+      style: {
+        fontFamily: 'inherit',
+      },
     },
     noData: {
       text: 'Please select a class to add',
@@ -79,9 +82,8 @@ export function LineGraph(props: GraphProps) {
       offsetX: 0,
       offsetY: 0,
       style: {
-        color: undefined,
         fontSize: '14px',
-        fontFamily: undefined,
+        fontFamily: 'inherit',
       },
     },
     theme: {

components/graph/RadarChart/RadarChart.tsx

@@ -60,6 +60,9 @@ export function RadarChart(props: GraphProps) {
     title: {
       text: props.title,
       align: 'left',
+      style: {
+        fontFamily: 'inherit',
+      },
     },
     noData: {
       text: 'Please select a class to add',
@@ -68,9 +71,8 @@ export function RadarChart(props: GraphProps) {
       offsetX: 0,
       offsetY: 0,
       style: {
-        color: undefined,
         fontSize: '14px',
-        fontFamily: undefined,
+        fontFamily: 'inherit',
       },
     },
     theme: {

components/graph/RadialBarChart/RadialBarChart.tsx

@@ -61,6 +61,9 @@ export function RadialBarChart(props: GraphProps) {
     title: {
       text: props.title,
       align: 'left',
+      style: {
+        fontFamily: 'inherit',
+      },
     },
     noData: {
       text: 'Please select a class to add',
@@ -69,9 +72,8 @@ export function RadialBarChart(props: GraphProps) {
       offsetX: 0,
       offsetY: 0,
       style: {
-        color: undefined,
         fontSize: '14px',
-        fontFamily: undefined,
+        fontFamily: 'inherit',
       },
     },
     plotOptions: {

components/graph/VerticalBarGraph/VerticalBarGraph.tsx

@@ -73,6 +73,9 @@ export function VerticalBarGraph(props: GraphProps) {
     title: {
       text: props.title,
       align: 'left',
+      style: {
+        fontFamily: 'inherit',
+      },
     },
     noData: {
       text: 'Please select a class to add',
@@ -81,9 +84,8 @@ export function VerticalBarGraph(props: GraphProps) {
       offsetX: 0,
       offsetY: 0,
       style: {
-        color: undefined,
         fontSize: '14px',
-        fontFamily: undefined,
+        fontFamily: 'inherit',
       },
     },
     theme: {

pages/_app.tsx

@@ -5,9 +5,71 @@ import { Card, IconButton, Tooltip, useMediaQuery } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { Analytics } from '@vercel/analytics/react';
 import type { AppProps } from 'next/app';
+import { Inter } from 'next/font/google';
+import localFont from 'next/font/local';
 import Head from 'next/head';
 import React from 'react';
 
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+});
+const kallisto = localFont({
+  src: [
+    {
+      path: '../fonts/Kallisto/Kallisto Thin.otf',
+      weight: '100',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Kallisto/Kallisto Thin Italic.otf',
+      weight: '100',
+      style: 'italic',
+    },
+    {
+      path: '../fonts/Kallisto/Kallisto Light.otf',
+      weight: '300',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Kallisto/Kallisto Light Italic.otf',
+      weight: '300',
+      style: 'italic',
+    },
+    {
+      path: '../fonts/Kallisto/Kallisto Medium.otf',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Kallisto/Kallisto Medium Italic.otf',
+      weight: '500',
+      style: 'italic',
+    },
+    {
+      path: '../fonts/Kallisto/Kallisto Bold.otf',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Kallisto/Kallisto Bold Italic.otf',
+      weight: '700',
+      style: 'italic',
+    },
+    {
+      path: '../fonts/Kallisto/Kallisto Heavy.otf',
+      weight: '900',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Kallisto/Kallisto Heavy Italic.otf',
+      weight: '900',
+      style: 'italic',
+    },
+  ],
+  variable: '--font-kallisto',
+});
+
 function MyApp({ Component, pageProps }: AppProps) {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 
@@ -25,6 +87,9 @@ function MyApp({ Component, pageProps }: AppProps) {
         main: '#7486ce',
       },
     },
+    typography: {
+      fontFamily: 'inherit',
+    },
   });
 
   return (
@@ -52,7 +117,9 @@ function MyApp({ Component, pageProps }: AppProps) {
         <link rel="manifest" href="/site.webmanifest" />
       </Head>
       <ThemeProvider theme={muiTheme}>
-        <Component {...pageProps} />
+        <main className={inter.variable + ' ' + kallisto.variable}>
+          <Component {...pageProps} />
+        </main>
       </ThemeProvider>
       <Analytics />
       {showGitInfo ? (

pages/_document.tsx

@@ -29,7 +29,7 @@ function Document() {
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:domain" content="trends.utdnebula.com" />
       </Head>
-      <body>
+      <body className="font-inter">
         <Main />
         <NextScript />
       </body>

pages/index.tsx

@@ -118,7 +118,7 @@ const Home: NextPage = () => {
                     />
                   </div>
                   <div className="text-center pb-2">
-                    <h2 className="text-headline4 text-light-always">
+                    <h2 className="text-headline4 text-light-always font-kallisto">
                       Welcome to UTD Trends!
                     </h2>
                   </div>

styles/globals.css

@@ -8,8 +8,6 @@ body {
   margin: 0;
   height: 100%;
   width: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   background-color: rgb(var(--light-DEFAULT));
 }
 

tailwind.config.js

@@ -135,9 +135,10 @@ module.exports = {
       gridTemplateColumns: {
         onboardingHonors: '40px minmax(0, 1fr)',
       },
-    },
-    fontFamily: {
-      sans: ['Roboto', 'ui-sans-serif', 'system-ui'],
+      fontFamily: {
+        kallisto: ['var(--font-kallisto)', 'Roboto', 'sans-serif'],
+        inter: ['var(--font-inter)', 'Roboto', 'sans-serif'],
+      },
     },
   },
   plugins: [],