diff --git a/.storybook/fonts.css b/.storybook/fonts.css
new file mode 100644
index 000000000000..bbbcf3839000
--- /dev/null
+++ b/.storybook/fonts.css
@@ -0,0 +1,50 @@
+@font-face {
+    font-family: ExpensifyNeue-Regular;
+    font-weight: 400;
+    font-style: normal;
+    src: url('../assets/fonts/web/ExpensifyNeue-Regular.woff2') format('woff2'), url('../assets/fonts/web/ExpensifyNeue-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: ExpensifyNeue-Regular;
+    font-weight: 700;
+    font-style: normal;
+    src: url('../assets/fonts/web/ExpensifyNeue-Bold.woff2') format('woff2'), url('../assets/fonts/web/ExpensifyNeue-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: ExpensifyNeue-Regular;
+    font-weight: 400;
+    font-style: italic;
+    src: url('../assets/fonts/web/ExpensifyNeue-Italic.woff2') format('woff2'), url('../assets/fonts/web/ExpensifyNeue-Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: ExpensifyNeue-Regular;
+    font-weight: 700;
+    font-style: italic;
+    src: url('../assets/fonts/web/ExpensifyNeue-BoldItalic.woff2') format('woff2'), url('../assets/fonts/web/ExpensifyNeue-BoldItalic.woff') format('woff');
+}
+
+@font-face {
+    font-family: ExpensifyMono-Regular;
+    font-weight: 400;
+    font-style: normal;
+    src: url('../assets/fonts/web/ExpensifyMono-Regular.woff2') format('woff2'), url('../assets/fonts/web/ExpensifyMono-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: ExpensifyMono-Bold;
+    font-weight: 700;
+    font-style: normal;
+    src: url('../assets/fonts/web/ExpensifyMono-Bold.woff2') format('woff2'),  url('../assets/fonts/web/ExpensifyMono-Bold.woff') format('woff');
+}
+
+* {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+strong {
+    font-weight: 600;
+}
diff --git a/.storybook/main.js b/.storybook/main.js
index d34252604b41..479ed26cc907 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -10,7 +10,8 @@ module.exports = {
     ],
     staticDirs: [
         './public',
-        '../assets/css',
+        {from: '../assets/css', to: 'css'},
+        {from: '../assets/fonts/web', to: 'fonts'},
     ],
     core: {
         builder: 'webpack5',
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index b9a271bb6097..d9e41443cbb2 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -1,3 +1,3 @@
 <link rel="icon" type="image/png" href="logo.png" />
-<link rel="stylesheet" type="text/css" href="fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/fonts.css" />
 <link rel="stylesheet" type="text/css" href="index.css" />
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 65508e6bed71..d69b253a18b6 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Onyx from 'react-native-onyx';
-import '../assets/css/fonts.css';
+import './fonts.css';
 import ComposeProviders from '../src/components/ComposeProviders';
 import HTMLEngineProvider from '../src/components/HTMLEngineProvider';
 import OnyxProvider from '../src/components/OnyxProvider';