diff --git a/apps/browser/src/popup/scss/popup.scss b/apps/browser/src/popup/scss/popup.scss
index 9bec001c93..b150de2c75 100644
--- a/apps/browser/src/popup/scss/popup.scss
+++ b/apps/browser/src/popup/scss/popup.scss
@@ -1,4 +1,3 @@
-@import "../../../../../libs/angular/src/scss/webfonts.css";
 @import "../../../../../libs/angular/src/scss/bwicons/styles/style.scss";
 @import "variables.scss";
 @import "../../../../../libs/angular/src/scss/icons.scss";
diff --git a/apps/desktop/src/scss/styles.scss b/apps/desktop/src/scss/styles.scss
index 187b4bf23c..c579e6acdc 100644
--- a/apps/desktop/src/scss/styles.scss
+++ b/apps/desktop/src/scss/styles.scss
@@ -1,4 +1,3 @@
-@import "../../../../libs/angular/src/scss/webfonts.css";
 @import "../../../../libs/angular/src/scss/bwicons/styles/style.scss";
 @import "@angular/cdk/overlay-prebuilt.css";
 @import "variables.scss";
diff --git a/apps/web/src/scss/styles.scss b/apps/web/src/scss/styles.scss
index 3424749445..62a2ac3314 100644
--- a/apps/web/src/scss/styles.scss
+++ b/apps/web/src/scss/styles.scss
@@ -1,6 +1,5 @@
 @import "./variables";
 
-@import "../../../../libs/angular/src/scss/webfonts.css";
 @import "../../../../libs/angular/src/scss/bwicons/styles/style.scss";
 @import "../../../../libs/angular/src/scss/icons.scss";
 @import "../../../../libs/components/src/multi-select/scss/bw.theme";
diff --git a/libs/angular/src/scss/webfonts.css b/libs/angular/src/scss/webfonts.css
deleted file mode 100644
index cd35271bf8..0000000000
--- a/libs/angular/src/scss/webfonts.css
+++ /dev/null
@@ -1,8 +0,0 @@
-@font-face {
-  font-family: Roboto;
-  src:
-    url("webfonts/roboto.woff2") format("woff2 supports variations"),
-    url("webfonts/roboto.woff2") format("woff2-variations");
-  font-display: swap;
-  font-weight: 100 900;
-}
diff --git a/libs/components/src/styles.scss b/libs/components/src/styles.scss
index 6394688b6e..27970008d8 100644
--- a/libs/components/src/styles.scss
+++ b/libs/components/src/styles.scss
@@ -3,7 +3,6 @@ $card-icons-base: "../../src/billing/images/cards/";
 
 @import "./variables";
 
-@import "../../angular/src/scss/webfonts.css";
 @import "../../angular/src/scss/bwicons/styles/style.scss";
 @import "../../angular/src/scss/icons.scss";
 @import "multi-select/scss/bw.theme.scss";
diff --git a/libs/components/src/theme.css b/libs/components/src/theme.css
new file mode 100644
index 0000000000..f9ccc774d4
--- /dev/null
+++ b/libs/components/src/theme.css
@@ -0,0 +1,27 @@
+/**
+ * This file contains CSS variables that can be used across frontend systems.
+ * This allows us to share styling between Angular, content scripts and more.
+ */
+
+/**
+ * Font faces
+ */
+@font-face {
+  font-family: Roboto;
+  src:
+    url("~@bitwarden/components/src/webfonts/roboto.woff2") format("woff2 supports variations"),
+    url("~@bitwarden/components/src/webfonts/roboto.woff2") format("woff2-variations");
+  font-display: swap;
+  font-weight: 100 900;
+}
+
+/**
+ * CSS variables
+ */
+:root {
+  --font-sans:
+    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: Menlo, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index bfdd976366..51205657e2 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -1,3 +1,4 @@
+@import "theme.css";
 @import "@angular/cdk/a11y-prebuilt.css";
 @import "@angular/cdk/text-field-prebuilt.css";
 @import "./reset.css";
diff --git a/libs/angular/src/scss/webfonts/roboto.woff2 b/libs/components/src/webfonts/roboto.woff2
similarity index 100%
rename from libs/angular/src/scss/webfonts/roboto.woff2
rename to libs/components/src/webfonts/roboto.woff2
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index 95b239537f..6c492900f6 100644
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -138,26 +138,9 @@ module.exports = {
       },
     },
     fontFamily: {
-      sans: [
-        "Roboto",
-        '"Helvetica Neue"',
-        "Helvetica",
-        "Arial",
-        "sans-serif",
-        '"Apple Color Emoji"',
-        '"Segoe UI Emoji"',
-        '"Segoe UI Symbol"',
-      ],
-      serif: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
-      mono: [
-        "Menlo",
-        "SFMono-Regular",
-        "Monaco",
-        "Consolas",
-        '"Liberation Mono"',
-        '"Courier New"',
-        "monospace",
-      ],
+      sans: "var(--font-sans)",
+      serif: "var(--font-serif)",
+      mono: "var(--font-mono)",
     },
     ringOffsetColor: ({ theme }) => ({
       DEFAULT: theme("colors.background"),