diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
index 90558f747..c411d4eca 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
@@ -6,8 +6,9 @@
   margin: 8px 5px;
   border-left: 2px solid;
   .user {
-    font-weight: bold;
+    font: var(--theme-header-font-family);
     color: var(--color-owncast-grey-100);
+    font-weight: bold;
   }
   .message {
     color: var(--color-owncast-grey-100);
diff --git a/web/package-lock.json b/web/package-lock.json
index 12f0ff0ef..c114156f9 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@ant-design/icons": "4.7.0",
         "@emoji-mart/data": "^1.0.1",
+        "@fontsource/open-sans": "^4.5.10",
+        "@fontsource/poppins": "^4.5.8",
         "@storybook/react": "^6.4.22",
         "@xstate/react": "^3.0.0",
         "antd": "^4.20.4",
@@ -2265,6 +2267,16 @@
         "react": "^16.14.0 || ^17.0.0"
       }
     },
+    "node_modules/@fontsource/open-sans": {
+      "version": "4.5.10",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.10.tgz",
+      "integrity": "sha512-MrtTDfWb1Tu9YxVh2KaKmsKBn6O3KL/lHZS0KRKK58jgqvdwuiDt4QW4udmW4FQf0XOWgnZ+4vKUF80F3SqBAA=="
+    },
+    "node_modules/@fontsource/poppins": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-4.5.8.tgz",
+      "integrity": "sha512-HE9yLDxYJEcxooVrYvvEhtyxaYU32hQIx1+npKegVefceE0l0zi0ePqKWWxYxkFpyy6WuZSQ+9rai3INnYKEJA=="
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -34235,6 +34247,16 @@
         "@lit-labs/react": "^1.0.2"
       }
     },
+    "@fontsource/open-sans": {
+      "version": "4.5.10",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.10.tgz",
+      "integrity": "sha512-MrtTDfWb1Tu9YxVh2KaKmsKBn6O3KL/lHZS0KRKK58jgqvdwuiDt4QW4udmW4FQf0XOWgnZ+4vKUF80F3SqBAA=="
+    },
+    "@fontsource/poppins": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-4.5.8.tgz",
+      "integrity": "sha512-HE9yLDxYJEcxooVrYvvEhtyxaYU32hQIx1+npKegVefceE0l0zi0ePqKWWxYxkFpyy6WuZSQ+9rai3INnYKEJA=="
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
diff --git a/web/package.json b/web/package.json
index 746486bbe..72ea18d1c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,8 @@
   "dependencies": {
     "@ant-design/icons": "4.7.0",
     "@emoji-mart/data": "^1.0.1",
+    "@fontsource/open-sans": "^4.5.10",
+    "@fontsource/poppins": "^4.5.8",
     "@storybook/react": "^6.4.22",
     "@xstate/react": "^3.0.0",
     "antd": "^4.20.4",
diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml
index d1b86f166..705a9ba38 100644
--- a/web/style-definitions/tokens/color/default-theme.yaml
+++ b/web/style-definitions/tokens/color/default-theme.yaml
@@ -16,6 +16,8 @@ theme:
     value: '{color.owncast.purple.500.value}'
   font-family:
     value: '{font.owncast.family.value}'
+  header-font-family:
+    value: '{font.owncast.header-family.value}'
   background:
     value: '{color.owncast.background.value}'
     comment: 'The main background color of the page.'
diff --git a/web/style-definitions/tokens/color/owncast-colors.yaml b/web/style-definitions/tokens/color/owncast-colors.yaml
index 8e6eeeca1..b34e9afaf 100644
--- a/web/style-definitions/tokens/color/owncast-colors.yaml
+++ b/web/style-definitions/tokens/color/owncast-colors.yaml
@@ -78,7 +78,11 @@ color:
 font:
   owncast:
     family:
-      value: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      value: "'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol', 'Noto Color Emoji'"
+    header-family:
+      value: "'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji'"
 
diff --git a/web/styles/theme.less b/web/styles/theme.less
index 87e4301b8..6f6d426a2 100644
--- a/web/styles/theme.less
+++ b/web/styles/theme.less
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 27 May 2022 21:42:18 GMT
+// Generated on Fri, 24 Jun 2022 23:11:54 GMT
 
 @text-color: var(--theme-text-color);
 @text-color-secondary: var(--theme-text-color-secondary);
@@ -21,7 +21,8 @@
 @theme-text-color: #d0d5dd; // The color of the text in the application.
 @theme-text-color-secondary: #667085;
 @theme-link-color: #9e77ed;
-@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@theme-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 @theme-background: #202232; // The main background color of the page.
 @theme-background-secondary: #282a30; // A secondary background color used in sections and controls.
 @theme-rounded-corners: 5px; // The radius of rounded corners used in places.
@@ -59,7 +60,8 @@
 @color-owncast-logo-blue: #2086e1;
 @color-owncast-background: #202232;
 @color-owncast-background-secondary: #282a30;
-@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@font-owncast-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@font-owncast-header-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 @owncast-purple: #7871ff;
 @owncast-purple-25: rgba(120, 113, 255, 0.25);
 @owncast-purple-50: rgba(120, 113, 255, 0.5);
diff --git a/web/styles/variables.css b/web/styles/variables.css
index fc978da7d..f1779828e 100644
--- a/web/styles/variables.css
+++ b/web/styles/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 May 2022 21:42:18 GMT
+ * Generated on Fri, 24 Jun 2022 23:11:54 GMT
  */
 
 :root {
@@ -23,7 +23,8 @@
   --theme-text-color: #d0d5dd; /* The color of the text in the application. */
   --theme-text-color-secondary: #667085;
   --theme-link-color: #9e77ed;
-  --theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --theme-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --theme-background: #202232; /* The main background color of the page. */
   --theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */
   --theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */
@@ -61,7 +62,8 @@
   --color-owncast-logo-blue: #2086e1;
   --color-owncast-background: #202232;
   --color-owncast-background-secondary: #282a30;
-  --font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-owncast-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-owncast-header-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --owncast-purple: #7871ff;
   --owncast-purple-25: rgba(120, 113, 255, 0.25);
   --owncast-purple-50: rgba(120, 113, 255, 0.5);
diff --git a/web/styles/variables.scss b/web/styles/variables.scss
index e5effd246..a39d3164a 100644
--- a/web/styles/variables.scss
+++ b/web/styles/variables.scss
@@ -1,4 +1,5 @@
-@import url('../public/fonts/inter/inter.css');
+@import "@fontsource/open-sans";
+@import "@fontsource/poppins";
 
 // See theme.less for specific Ant Design overrides.
 :root {
@@ -90,7 +91,5 @@
   --popover-base-color: var(--gray);
   --tooltip-base-color: var(--gray-medium);
 
-  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family: var(--theme-font-family);
 }