diff --git a/public/index.html b/public/index.html
index 446d4b8..74dfbcf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,7 +14,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com"/>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
     <link
-            href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap"
             rel="stylesheet"
     />
     <title>ShowIt</title>
diff --git a/src/app/theme.ts b/src/app/theme.ts
index f9bc992..d3d0578 100644
--- a/src/app/theme.ts
+++ b/src/app/theme.ts
@@ -23,7 +23,20 @@ const theme = createTheme({
     //  background: { default: 'black' },
   },
   typography: {
-    fontFamily: ["Poppins", "sans-serif"].join(","),
+    fontFamily: [
+      "-apple-system",
+      "BlinkMacSystemFont",
+      '"Open Sans"',
+      "sans-serif",
+      '"Segoe UI"',
+      "Roboto",
+      '"Helvetica Neue"',
+      "Arial",
+      "sans-serif",
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(","),
     h1: {
       fontWeight: 600,
       fontSize: 60,
diff --git a/src/components/VocabularyTermsListWindow.tsx b/src/components/VocabularyTermsListWindow.tsx
index fbffd15..9628f89 100644
--- a/src/components/VocabularyTermsListWindow.tsx
+++ b/src/components/VocabularyTermsListWindow.tsx
@@ -18,7 +18,6 @@ const useStyles = makeStyles(() => ({
   },
   text: {
     fontSize: "1.25rem",
-    fontFamily: "Poppins,sans-serif",
     fontWeight: 500,
     lineHeight: "1.6",
     display: "block",