diff --git a/components/common/SearchBar/searchBar.tsx b/components/common/SearchBar/searchBar.tsx
index 0bd0f8b6..d468b075 100644
--- a/components/common/SearchBar/searchBar.tsx
+++ b/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">
diff --git a/components/graph/BoxGraph/BoxGraph.tsx b/components/graph/BoxGraph/BoxGraph.tsx
index f8d6c128..1234dc9f 100644
--- a/components/graph/BoxGraph/BoxGraph.tsx
+++ b/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: {
diff --git a/components/graph/HorizontalBarGraph/HorizontalBarGraph.tsx b/components/graph/HorizontalBarGraph/HorizontalBarGraph.tsx
index 9e3b4002..90452bdd 100644
--- a/components/graph/HorizontalBarGraph/HorizontalBarGraph.tsx
+++ b/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: {
diff --git a/components/graph/LineGraph/LineGraph.tsx b/components/graph/LineGraph/LineGraph.tsx
index 4b65ce4c..798cfed9 100644
--- a/components/graph/LineGraph/LineGraph.tsx
+++ b/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: {
diff --git a/components/graph/RadarChart/RadarChart.tsx b/components/graph/RadarChart/RadarChart.tsx
index dbeba0b6..ae9a4c8f 100644
--- a/components/graph/RadarChart/RadarChart.tsx
+++ b/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: {
diff --git a/components/graph/RadialBarChart/RadialBarChart.tsx b/components/graph/RadialBarChart/RadialBarChart.tsx
index f2b3913b..56488959 100644
--- a/components/graph/RadialBarChart/RadialBarChart.tsx
+++ b/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: {
diff --git a/components/graph/VerticalBarGraph/VerticalBarGraph.tsx b/components/graph/VerticalBarGraph/VerticalBarGraph.tsx
index 7654b050..3c152d5f 100644
--- a/components/graph/VerticalBarGraph/VerticalBarGraph.tsx
+++ b/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: {
diff --git a/fonts/Kallisto/Kallisto Bold Italic.otf b/fonts/Kallisto/Kallisto Bold Italic.otf
new file mode 100644
index 00000000..1d862e4b
Binary files /dev/null and b/fonts/Kallisto/Kallisto Bold Italic.otf differ
diff --git a/fonts/Kallisto/Kallisto Bold.otf b/fonts/Kallisto/Kallisto Bold.otf
new file mode 100644
index 00000000..fb7595a9
Binary files /dev/null and b/fonts/Kallisto/Kallisto Bold.otf differ
diff --git a/fonts/Kallisto/Kallisto Heavy Italic.otf b/fonts/Kallisto/Kallisto Heavy Italic.otf
new file mode 100644
index 00000000..55750f93
Binary files /dev/null and b/fonts/Kallisto/Kallisto Heavy Italic.otf differ
diff --git a/fonts/Kallisto/Kallisto Heavy.otf b/fonts/Kallisto/Kallisto Heavy.otf
new file mode 100644
index 00000000..0bf573ee
Binary files /dev/null and b/fonts/Kallisto/Kallisto Heavy.otf differ
diff --git a/fonts/Kallisto/Kallisto Light Italic.otf b/fonts/Kallisto/Kallisto Light Italic.otf
new file mode 100644
index 00000000..186e031f
Binary files /dev/null and b/fonts/Kallisto/Kallisto Light Italic.otf differ
diff --git a/fonts/Kallisto/Kallisto Light.otf b/fonts/Kallisto/Kallisto Light.otf
new file mode 100644
index 00000000..278d4a1d
Binary files /dev/null and b/fonts/Kallisto/Kallisto Light.otf differ
diff --git a/fonts/Kallisto/Kallisto Medium Italic.otf b/fonts/Kallisto/Kallisto Medium Italic.otf
new file mode 100644
index 00000000..1c36a2e4
Binary files /dev/null and b/fonts/Kallisto/Kallisto Medium Italic.otf differ
diff --git a/fonts/Kallisto/Kallisto Medium.otf b/fonts/Kallisto/Kallisto Medium.otf
new file mode 100644
index 00000000..b0f8ad77
Binary files /dev/null and b/fonts/Kallisto/Kallisto Medium.otf differ
diff --git a/fonts/Kallisto/Kallisto Thin Italic.otf b/fonts/Kallisto/Kallisto Thin Italic.otf
new file mode 100644
index 00000000..f2356b55
Binary files /dev/null and b/fonts/Kallisto/Kallisto Thin Italic.otf differ
diff --git a/fonts/Kallisto/Kallisto Thin.otf b/fonts/Kallisto/Kallisto Thin.otf
new file mode 100644
index 00000000..d9e71701
Binary files /dev/null and b/fonts/Kallisto/Kallisto Thin.otf differ
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 93f15f75..d057f78c 100644
--- a/pages/_app.tsx
+++ b/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 ? (
diff --git a/pages/_document.tsx b/pages/_document.tsx
index cce80209..bfcd9057 100644
--- a/pages/_document.tsx
+++ b/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>
diff --git a/pages/index.tsx b/pages/index.tsx
index d17bbea5..f530825d 100644
--- a/pages/index.tsx
+++ b/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>
diff --git a/styles/Home.module.css b/styles/Home.module.css
deleted file mode 100644
index 32a57d52..00000000
--- a/styles/Home.module.css
+++ /dev/null
@@ -1,116 +0,0 @@
-.container {
-  padding: 0 2rem;
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
diff --git a/styles/globals.css b/styles/globals.css
index 7f8fbd20..9cdb7611 100644
--- a/styles/globals.css
+++ b/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));
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 2b09c9eb..3be9d8de 100644
--- a/tailwind.config.js
+++ b/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: [],