diff --git a/.storybook/fonts.css b/.storybook/fonts.css
index 906490c3a9d9..05002d893e61 100644
--- a/.storybook/fonts.css
+++ b/.storybook/fonts.css
@@ -1,52 +1,59 @@
 @font-face {
-    font-family: ExpensifyNeue-Regular;
+    font-family: Expensify Neue;
     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-family: Expensify Neue;
     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-family: Expensify Neue;
     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-family: Expensify Neue;
     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-family: Expensify Mono;
     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-family: Expensify Mono;
     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');
 }
 
 @font-face {
-    font-family: ExpensifyNewKansas-Medium;
-    font-weight: 400;
+    font-family: Expensify New Kansas;
+    font-weight: 500;
     font-style: normal;
     src: url('../assets/fonts/web/ExpensifyNewKansas-Medium.woff2') format('woff2'),  url('../assets/fonts/web/ExpensifyNewKansas-Medium.woff') format('woff');
 }
 
+@font-face {
+    font-family: Expensify New Kansas;
+    font-weight: 500;
+    font-style: italic;
+    src: url('../assets/fonts/web/ExpensifyNewKansas-MediumItalic.woff2') format('woff2'),  url('../assets/fonts/web/ExpensifyNewKansas-MediumItalic.woff') format('woff');
+}
+
 * {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index 7fc55a549a4a..ace6208bdb3b 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -6,7 +6,7 @@ import colors from '../src/styles/theme/colors';
 const theme: ThemeVars = create({
     brandTitle: 'New Expensify UI Docs',
     brandImage: 'logomark.svg',
-    fontBase: 'ExpensifyNeue-Regular',
+    fontBase: 'Expensify Neue',
     fontCode: 'monospace',
     base: 'dark',
     appBg: colors.productDark200,
diff --git a/android/app/src/main/java/com/expensify/chat/MainApplication.kt b/android/app/src/main/java/com/expensify/chat/MainApplication.kt
index e660a871359d..dac9e68b705b 100644
--- a/android/app/src/main/java/com/expensify/chat/MainApplication.kt
+++ b/android/app/src/main/java/com/expensify/chat/MainApplication.kt
@@ -1,5 +1,7 @@
 package com.expensify.chat
 
+import com.facebook.react.common.assets.ReactFontManager
+
 import android.app.ActivityManager
 import android.content.res.Configuration
 import android.database.CursorWindow
@@ -42,6 +44,9 @@ class MainApplication : MultiDexApplication(), ReactApplication {
 
     override fun onCreate() {
         super.onCreate()
+        ReactFontManager.getInstance().addCustomFont(this, "Expensify New Kansas", R.font.expensify_new_kansas)
+        ReactFontManager.getInstance().addCustomFont(this, "Expensify Neue", R.font.expensify_neue)
+        ReactFontManager.getInstance().addCustomFont(this, "Expensify Mono", R.font.expensify_mono)
 
         RNPerformance.getInstance().mark("appCreationStart", false);
 
diff --git a/android/app/src/main/res/font/expensify_mono.xml b/android/app/src/main/res/font/expensify_mono.xml
new file mode 100644
index 000000000000..346a34ba22b6
--- /dev/null
+++ b/android/app/src/main/res/font/expensify_mono.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
+  <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/expensifymono_regular"/>
+  <font app:fontStyle="normal" app:fontWeight="700" app:font="@font/expensifymono_bold"/>
+</font-family>
diff --git a/android/app/src/main/res/font/expensify_neue.xml b/android/app/src/main/res/font/expensify_neue.xml
new file mode 100644
index 000000000000..74cd402c5535
--- /dev/null
+++ b/android/app/src/main/res/font/expensify_neue.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
+  <font app:fontStyle="italic" app:fontWeight="400" app:font="@font/expensifyneue_italic"/>
+  <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/expensifyneue_regular"/>
+  <font app:fontStyle="italic" app:fontWeight="700" app:font="@font/expensifyneue_bolditalic"/>
+  <font app:fontStyle="normal" app:fontWeight="700" app:font="@font/expensifyneue_bold"/>
+</font-family>
diff --git a/android/app/src/main/res/font/expensify_new_kansas.xml b/android/app/src/main/res/font/expensify_new_kansas.xml
new file mode 100644
index 000000000000..18c2426cdad2
--- /dev/null
+++ b/android/app/src/main/res/font/expensify_new_kansas.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
+  <font app:fontStyle="italic" app:fontWeight="500" app:font="@font/expensifynewkansas_mediumitalic"/>
+  <font app:fontStyle="normal" app:fontWeight="500" app:font="@font/expensifynewkansas_medium"/>
+</font-family>
diff --git a/android/app/src/main/assets/fonts/ExpensifyMono-Bold.otf b/android/app/src/main/res/font/expensifymono_bold.otf
similarity index 100%
rename from android/app/src/main/assets/fonts/ExpensifyMono-Bold.otf
rename to android/app/src/main/res/font/expensifymono_bold.otf
diff --git a/android/app/src/main/assets/fonts/ExpensifyMono-Regular.otf b/android/app/src/main/res/font/expensifymono_regular.otf
similarity index 100%
rename from android/app/src/main/assets/fonts/ExpensifyMono-Regular.otf
rename to android/app/src/main/res/font/expensifymono_regular.otf
diff --git a/android/app/src/main/assets/fonts/ExpensifyNeue-Bold.otf b/android/app/src/main/res/font/expensifyneue_bold.otf
similarity index 100%
rename from android/app/src/main/assets/fonts/ExpensifyNeue-Bold.otf
rename to android/app/src/main/res/font/expensifyneue_bold.otf
diff --git a/android/app/src/main/assets/fonts/ExpensifyNeue-BoldItalic.otf b/android/app/src/main/res/font/expensifyneue_bolditalic.otf
similarity index 100%
rename from android/app/src/main/assets/fonts/ExpensifyNeue-BoldItalic.otf
rename to android/app/src/main/res/font/expensifyneue_bolditalic.otf
diff --git a/android/app/src/main/assets/fonts/ExpensifyNeue-Italic.otf b/android/app/src/main/res/font/expensifyneue_italic.otf
similarity index 100%
rename from android/app/src/main/assets/fonts/ExpensifyNeue-Italic.otf
rename to android/app/src/main/res/font/expensifyneue_italic.otf
diff --git a/android/app/src/main/assets/fonts/ExpensifyNeue-Regular.otf b/android/app/src/main/res/font/expensifyneue_regular.otf
similarity index 100%
rename from android/app/src/main/assets/fonts/ExpensifyNeue-Regular.otf
rename to android/app/src/main/res/font/expensifyneue_regular.otf
diff --git a/android/app/src/main/assets/fonts/ExpensifyNewKansas-Medium.otf b/android/app/src/main/res/font/expensifynewkansas_medium.otf
similarity index 100%
rename from android/app/src/main/assets/fonts/ExpensifyNewKansas-Medium.otf
rename to android/app/src/main/res/font/expensifynewkansas_medium.otf
diff --git a/android/app/src/main/assets/fonts/ExpensifyNewKansas-MediumItalic.otf b/android/app/src/main/res/font/expensifynewkansas_mediumitalic.otf
similarity index 100%
rename from android/app/src/main/assets/fonts/ExpensifyNewKansas-MediumItalic.otf
rename to android/app/src/main/res/font/expensifynewkansas_mediumitalic.otf
diff --git a/android/app/src/main/res/font/expneuebold.otf b/android/app/src/main/res/font/expneuebold.otf
deleted file mode 100755
index 7534aecda322..000000000000
Binary files a/android/app/src/main/res/font/expneuebold.otf and /dev/null differ
diff --git a/android/app/src/main/res/font/expneueregular.otf b/android/app/src/main/res/font/expneueregular.otf
deleted file mode 100755
index d4d8cbe63b44..000000000000
Binary files a/android/app/src/main/res/font/expneueregular.otf and /dev/null differ
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index a040598e982d..75126afbd407 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -24,7 +24,7 @@
     <style name="TextViewSpinnerDropDownItem" parent="Widget.AppCompat.DropDownItem.Spinner">
         <item name="android:textColor">@color/white</item>
         <item name="android:textSize">@dimen/spinner_font_size</item>
-        <item name="android:fontFamily">@font/expneuebold</item>
+        <item name="android:fontFamily">@font/expensifyneue_bold</item>
     </style>
 
     <!-- Theme used by the Alert dialog -->
@@ -37,15 +37,15 @@
     </style>
 
     <style name="AlertTextAppearanceSmall" parent="TextAppearance.AppCompat.Small">
-        <item name="android:fontFamily">@font/expneueregular</item>
+        <item name="android:fontFamily">@font/expensifyneue_regular</item>
     </style>
 
     <style name="AlertTextAppearanceMedium" parent="TextAppearance.AppCompat.Medium">
-        <item name="android:fontFamily">@font/expneueregular</item>
+        <item name="android:fontFamily">@font/expensifyneue_regular</item>
     </style>
 
     <style name="AlertTextAppearanceLarge" parent="TextAppearance.AppCompat.Large">
-        <item name="android:fontFamily">@font/expneuebold</item>
+        <item name="android:fontFamily">@font/expensifyneue_bold</item>
     </style>
 
     <style name="Theme.SplashScreen.Common" parent="Theme.AppCompat.NoActionBar">
diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
index a3ac1c2332f9..1c59d667fca1 100644
--- a/android/link-assets-manifest.json
+++ b/android/link-assets-manifest.json
@@ -1,5 +1,5 @@
 {
-  "migIndex": 1,
+  "migIndex": 2,
   "data": [
     {
       "path": "assets/fonts/native/ExpensifyMono-Bold.otf",
diff --git a/assets/README.md b/assets/README.md
new file mode 100644
index 000000000000..cf9fdd9e859f
--- /dev/null
+++ b/assets/README.md
@@ -0,0 +1,152 @@
+# Assets management
+
+## Fonts
+
+All fonts used by web, desktop and native apps are located inside `assets/fonts/` folder. The native app will use fonts with `.otf` or `.ttf` formats, where the web app will use fonts with `.otf`, `.ttf`, `.woff` or `.woff2` formats.
+
+### Adding / Removing fonts
+
+#### Native
+
+The font files used by the native apps are stored inside `assets/fonts/native/` folder. We use the [@react-native-community/cli-link-assets](https://github.com/react-native-community/cli/tree/main/packages/cli-link-assets) tool to link the fonts to each platform (Android and iOS).
+
+To add or remove a font used in the native app:
+
+1. Add or remove the desired font files inside `assets/fonts/native/` folder.
+2. Run `npx @react-native-community/cli-link-assets` to link the assets with the native files.
+   * On Android, native files like `MainApplication.kt` and font files will be synced with the updated fonts.
+   * On iOS, native files like `project.pbxproj` and `Info.plist` will be synced with the updated fonts.
+3. If you are adding a new font family into the project:
+   1. Add all the new font family variants to the [FontFamilyKey type](https://github.com/Expensify/App/blob/main/src/styles/utils/FontUtils/fontFamily/types.ts).
+      ```ts
+      type FontFamilyKey =
+          | 'SYSTEM'
+          | 'MONOSPACE'
+          | 'MONOSPACE_BOLD'
+          | 'EXP_NEUE'
+          | 'EXP_NEUE_BOLD'
+          | 'EXP_NEUE_ITALIC'
+          | 'EXP_NEUE_BOLD_ITALIC'
+          | 'EXP_NEW_KANSAS_MEDIUM'
+          | 'EXP_NEW_KANSAS_MEDIUM_ITALIC'
+          | 'NEW_FONT_FAMILY' // Add it here.
+          | 'NEW_FONT_FAMILY_BOLD' // Add it here (it it exists).
+          | 'NEW_FONT_FAMILY_ITALIC' // Add it here (it it exists).
+          | 'NEW_FONT_FAMILY_BOLD_ITALIC'; // Add it here (it it exists).
+      ```
+   2. Add all the font variants to the [singleFontFamily file](https://github.com/Expensify/App/blob/main/src/styles/utils/FontUtils/fontFamily/singleFontFamily/index.ts), replacing `<new_font_family>` with the font family name (you can find the name inside `MainApplication.kt` file).
+      ```ts
+      const fontFamily: FontFamilyStyles = {
+          ...
+          NEW_FONT_FAMILY: {
+              fontFamily: '<new_font_family>',
+              fontStyle: 'normal',
+              fontWeight: fontWeight.normal,
+          },
+          // Add the other variants too.
+      };
+      ```
+4. If you are removing a font family from the project:
+   1. Remove all the font family variants from the [FontFamilyKey type](https://github.com/Expensify/App/blob/main/src/styles/utils/FontUtils/fontFamily/types.ts).
+   2. Remove all the font family variants from the [singleFontFamily file](https://github.com/Expensify/App/blob/main/src/styles/utils/FontUtils/fontFamily/singleFontFamily/index.ts).
+
+#### Web / Desktop
+
+The font files used by the web / desktop apps are stored inside `assets/fonts/web/` folder.
+
+To add or remove a font used in the web / desktop app:
+
+1. Add or remove the desired font files inside `assets/fonts/web/` folder.
+2. If you are adding a new font family into the project:
+   1. Add all the new font family variants to the [FontFamilyKey type](https://github.com/Expensify/App/blob/main/src/styles/utils/FontUtils/fontFamily/types.ts).
+   2. Add all the font variants to the [multiFontFamily file](https://github.com/Expensify/App/blob/main/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.ts), replacing `<new_font_family>` with the font family name.
+      ```ts
+      const fontFamily: FontFamilyStyles = {
+          ...
+          NEW_FONT_FAMILY: {
+              fontFamily: '<new_font_family>, Segoe UI Emoji, Noto Color Emoji',
+              fontStyle: 'normal',
+              fontWeight: fontWeight.normal,
+          },
+          // Add the other variants too.
+      };
+      ```
+   3. Add all the new font family variants to the [fonts.css file](https://github.com/Expensify/App/blob/main/assets/css/fonts.css), replacing `<new_font_family>` with the font family name and `<font-family-file>` with the file name.
+      ```css
+      @font-face {
+          font-family: <new_font_family>;
+          font-weight: 500;
+          font-style: normal;
+          src: url('/fonts/<font-family-file>.woff2') format('woff2'),  url('/fonts/<font-family-file>.woff') format('woff');
+      }
+      /* Add the other variants too. */
+      ```
+3. If you are removing a font family from the project:
+   1. Remove all the font family variants from the [FontFamilyKey type](https://github.com/Expensify/App/blob/main/src/styles/utils/FontUtils/fontFamily/types.ts).
+   2. Remove all the font family variants from the [multiFontFamily file](https://github.com/Expensify/App/blob/main/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.ts).
+   3. Remove all the font family variants from the [fonts.css file](https://github.com/Expensify/App/blob/main/assets/css/fonts.css).
+
+#### Storybook (Web)
+
+The font files used by the Storybook web app are stored inside `assets/fonts/web/` folder.
+
+To add or remove a font used in the storybook web app:
+
+1. Add or remove the desired font files inside `assets/fonts/web/` folder.
+2. If you are adding a new font family into the project:
+   1. Add all the new font family variants to the [fonts.css storybook file](https://github.com/Expensify/App/blob/main/.storybook/fonts.css), replacing `<new_font_family>` with the font family name and `<font-family-file>` with the file name.
+      ```css
+      @font-face {
+          font-family: <new_font_family>;
+          font-weight: 500;
+          font-style: normal;
+          src: url('../assets/fonts/web/<font-family-file>.woff2') format('woff2'),  url('../assets/fonts/web/<font-family-file>.woff') format('woff');
+      }
+      /* Add the other variants too. */
+      ```
+3. If you are removing a font family from the project:
+   1. Remove all the font family variants from the [fonts.css storybook file](https://github.com/Expensify/App/blob/main/.storybook/fonts.css).
+
+#### Expensify Help (Web)
+
+The fonts files used by the Expensify Help web app are located inside `docs/assets/fonts/` folder.
+
+To add or remove a font used in the Expensify Help web app:
+
+1. Add or remove the desired font files inside `docs/assets/fonts/` folder.
+2. If you are adding a new font family into the project:
+   1. Add all the new font family variants to the [_fonts.scss file](https://github.com/Expensify/App/blob/main/docs/_sass/_fonts.scss), replacing `<new_font_family>` with the font family name and `<font-family-file>` with the file name.
+      ```scss
+      @font-face {
+        font-family: <new_font_family>;
+        font-weight: 500;
+        font-style: normal;
+        src: url('/assets/fonts/<font-family-file>.woff2') format('woff2'), url('/assets/fonts/<font-family-file>.woff') format('woff');
+      }
+      /* Add the other variants too. */
+      ```
+3. If you are removing a font family from the project:
+   1. Remove all the font family variants from the [_fonts.scss file](https://github.com/Expensify/App/blob/main/docs/_sass/_fonts.scss).
+
+### Using the fonts
+
+#### Native / Web / Desktop
+
+To use your fonts in the app, just import the desired font from [FontUtils](https://github.com/Expensify/App/blob/main/src/styles/utils/FontUtils/index.ts) and use in your style objects.
+
+You should use `FontUtils.fontFamily.platform.<font-family-key>` for most use cases in the app because it will use the correspondent set of font families (with fallback fonts or not) according to the platform. `FontUtils.fontFamily.single.` and `FontUtils.fontFamily.multi.` should only be used when we want a specific set of font families independently of the platform.
+
+```ts
+import FontUtils from '@styles/utils/FontUtils';
+
+const style = {
+    h4: {
+        ...FontUtils.fontFamily.platform.NEW_FONT_FAMILY,
+        fontSize: variables.fontSizeLabel,
+    },
+};
+```
+
+#### Storybook / Expensify Help
+
+To use your fonts in Storybook and Expensify Help, simply apply and use them as you would with regular web files.
\ No newline at end of file
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
index 078cec114c31..7705be0b1140 100644
--- a/assets/css/fonts.css
+++ b/assets/css/fonts.css
@@ -1,54 +1,54 @@
 @font-face {
-    font-family: ExpensifyNeue-Regular;
+    font-family: Expensify Neue;
     font-weight: 400;
     font-style: normal;
     src: url('/fonts/ExpensifyNeue-Regular.woff2') format('woff2'), url('/fonts/ExpensifyNeue-Regular.woff') format('woff');
 }
 
 @font-face {
-    font-family: ExpensifyNeue-Regular;
+    font-family: Expensify Neue;
     font-weight: 700;
     font-style: normal;
     src: url('/fonts/ExpensifyNeue-Bold.woff2') format('woff2'), url('/fonts/ExpensifyNeue-Bold.woff') format('woff');
 }
 
 @font-face {
-    font-family: ExpensifyNeue-Regular;
+    font-family: Expensify Neue;
     font-weight: 400;
     font-style: italic;
     src: url('/fonts/ExpensifyNeue-Italic.woff2') format('woff2'), url('/fonts/ExpensifyNeue-Italic.woff') format('woff');
 }
 
 @font-face {
-    font-family: ExpensifyNeue-Regular;
+    font-family: Expensify Neue;
     font-weight: 700;
     font-style: italic;
     src: url('/fonts/ExpensifyNeue-BoldItalic.woff2') format('woff2'), url('/fonts/ExpensifyNeue-BoldItalic.woff') format('woff');
 }
 
 @font-face {
-    font-family: ExpensifyMono-Regular;
+    font-family: Expensify Mono;
     font-weight: 400;
     font-style: normal;
     src: url('/fonts/ExpensifyMono-Regular.woff2') format('woff2'), url('/fonts/ExpensifyMono-Regular.woff') format('woff');
 }
 
 @font-face {
-    font-family: ExpensifyMono-Bold;
+    font-family: Expensify Mono;
     font-weight: 700;
     font-style: normal;
     src: url('/fonts/ExpensifyMono-Bold.woff2') format('woff2'),  url('/fonts/ExpensifyMono-Bold.woff') format('woff');
 }
 
 @font-face {
-    font-family: ExpensifyNewKansas-Medium;
+    font-family: Expensify New Kansas;
     font-weight: 500;
     font-style: normal;
     src: url('/fonts/ExpensifyNewKansas-Medium.woff2') format('woff2'),  url('/fonts/ExpensifyNewKansas-Medium.woff') format('woff');
 }
 
 @font-face {
-    font-family: ExpensifyNewKansas-MediumItalic;
+    font-family: Expensify New Kansas;
     font-weight: 500;
     font-style: italic;
     src: url('/fonts/ExpensifyNewKansas-MediumItalic.woff2') format('woff2'),  url('/fonts/ExpensifyNewKansas-MediumItalic.woff') format('woff');
diff --git a/docs/_sass/_fonts.scss b/docs/_sass/_fonts.scss
index cf905805ddd2..c62d15720197 100644
--- a/docs/_sass/_fonts.scss
+++ b/docs/_sass/_fonts.scss
@@ -1,26 +1,26 @@
 @font-face {
-  font-family: ExpensifyNeue;
+  font-family: Expensify Neue;
   font-weight: 400;
   font-style: normal;
   src: url('/assets/fonts/ExpensifyNeue-Regular.woff2') format('woff2'), url('/assets/fonts/ExpensifyNeue-Regular.woff') format('woff');
 }
 
 @font-face {
-  font-family: ExpensifyNeue;
+  font-family: Expensify Neue;
   font-weight: 700;
   font-style: bold;
   src: url('/assets/fonts/ExpensifyNeue-Bold.woff2') format('woff2'), url('/assets/fonts/ExpensifyNeue-Bold.woff') format('woff');
 }
 
 @font-face {
-  font-family: ExpensifyNewKansas;
+  font-family: Expensify New Kansas;
   font-weight: 500;
   font-style: normal;
   src: url('/assets/fonts/ExpensifyNewKansas-Medium.woff2') format('woff2'), url('/assets/fonts/ExpensifyNewKansas-Medium.woff') format('woff');
 }
 
 @font-face {
-  font-family: ExpensifyNewKansas;
+  font-family: Expensify New Kansas;
   font-weight: 500;
   font-style: italic;
   src: url('/assets/fonts/ExpensifyNewKansas-MediumItalic.woff2') format('woff2'), url('/assets/fonts/ExpensifyNewKansas-MediumItalic.woff') format('woff');
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index f3bf1035ed56..82446fe08b3a 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -131,7 +131,7 @@ details[open] > summary {
 
 h1,
 summary {
-    font-family: 'ExpensifyNewKansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+    font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
     font-weight: 500;
     font-size: larger;
 }
@@ -151,7 +151,7 @@ select,
 textarea {
     line-height: 1.4;
     font-weight: 400;
-    font-family: 'ExpensifyNeue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+    font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
     font-size: 16px;
     color: var(--color-text-supporting);
 }
@@ -159,7 +159,7 @@ textarea {
 button {
     border-radius: 12px;
     padding: 12px;
-    font-family: 'ExpensifyNeue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+    font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
     font-size: 15px;
     font-weight: bold;
 
@@ -426,12 +426,12 @@ button {
         h2 {
             font-size: 1.125em;
             font-weight: 500;
-            font-family: 'ExpensifyNewKansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+            font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
         }
 
         h3 {
             font-size: 1em;
-            font-family: 'ExpensifyNeue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+            font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
         }
 
         h2,
@@ -457,7 +457,7 @@ button {
 
             p:first-child {
                 font-size: large;
-                font-family: 'ExpensifyNewKansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+                font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
                 opacity: 0.8;
             }
         }
@@ -621,7 +621,7 @@ button {
     }
 
     h3.title {
-        font-family: 'ExpensifyNewKansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+        font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
     }
 
     h3.title,
@@ -820,7 +820,7 @@ button {
 
     h3 {
         color: var(--color-success);
-        font-family: 'ExpensifyNewKansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+        font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
         font-size: 17px;
         font-weight: 500;
         padding: 0;
diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss
index c9b66d1e4b4a..2a546d3a5be4 100644
--- a/docs/_sass/_search-bar.scss
+++ b/docs/_sass/_search-bar.scss
@@ -87,7 +87,7 @@ input#gsc-i-id1.gsc-input {
     padding: 15px 0px 0px !important;
     pointer-events: auto;
     color: var(--color-text) !important;
-    font-family: 'ExpensifyNeue', 'Segoe UI Emoji', 'Noto Color Emoji' !important;
+    font-family: 'Expensify Neue', 'Segoe UI Emoji', 'Noto Color Emoji' !important;
 }
 
 /* These below #gsc-iw-id1, .gsc-input-box & .gsib_a are inner wrapper of search bar input */
@@ -144,7 +144,7 @@ label.search-label {
     position: absolute;
     margin-top: -20px;
     font-size: 15px;
-    font-family: 'ExpensifyNeue', 'Segoe UI Emoji', 'Noto Color Emoji';
+    font-family: 'Expensify Neue', 'Segoe UI Emoji', 'Noto Color Emoji';
     transform: translateY(-50%);
     left: 20px;
     pointer-events: none;
@@ -166,7 +166,7 @@ label.search-label {
 .gsc-control-cse {
     background-color: var(--color-appBG) !important;
     border: var(--color-appBG) !important;
-    font-family: 'ExpensifyNeue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif !important;
+    font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif !important;
 }
 
 .gsc-webResult.gsc-result {
@@ -219,7 +219,7 @@ label.search-label {
 
 /* Change Font the Google Search result */
 .gsc-control-cse .gsc-table-result {
-    font-family: 'ExpensifyNeue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif !important;
+    font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif !important;
 }
 
 /* Change Font result Paragraph color */
diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json
index a3ac1c2332f9..1c59d667fca1 100644
--- a/ios/link-assets-manifest.json
+++ b/ios/link-assets-manifest.json
@@ -1,5 +1,5 @@
 {
-  "migIndex": 1,
+  "migIndex": 2,
   "data": [
     {
       "path": "assets/fonts/native/ExpensifyMono-Bold.otf",
diff --git a/src/components/EnvironmentBadge.tsx b/src/components/EnvironmentBadge.tsx
index 5122b7f461b0..272aad734eec 100644
--- a/src/components/EnvironmentBadge.tsx
+++ b/src/components/EnvironmentBadge.tsx
@@ -38,7 +38,7 @@ function EnvironmentBadge() {
             error={error}
             text={text}
             badgeStyles={[styles.alignSelfStart, styles.headerEnvBadge, styles.environmentBadge, badgeEnviromentStyle]}
-            textStyles={[styles.headerEnvBadgeText, {fontWeight: '700'}]}
+            textStyles={styles.headerEnvBadgeText}
             environment={environment}
             pressable
         />
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
index bab66dfab911..e2d1fb4c0949 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -101,7 +101,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             baseStyle={styles.webViewStyles.baseFontStyle}
             tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
-            systemFonts={Object.values(FontUtils.fontFamily.single)}
+            systemFonts={Object.values(FontUtils.fontFamily.single).map((font) => font.fontFamily)}
             htmlParserOptions={{
                 recognizeSelfClosing: true,
             }}
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx
index 788db4ea4de2..a319507bc3ad 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx
@@ -4,6 +4,7 @@ import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-ht
 import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import InlineCodeBlock from '@components/InlineCodeBlock';
 import useStyleUtils from '@hooks/useStyleUtils';
+import FontUtils from '@styles/utils/FontUtils';
 
 type CodeRendererProps = CustomRendererProps<TText | TPhrasing> & {
     /** Key of the element */
@@ -17,10 +18,7 @@ function CodeRenderer({TDefaultRenderer, key, style, ...defaultRendererProps}: C
     const {boxModelStyle, otherStyle: textStyle} = splitBoxModelStyle(style ?? {});
 
     /** Get the default fontFamily variant */
-    const font = StyleUtils.getFontFamilyMonospace({
-        fontStyle: undefined,
-        fontWeight: undefined,
-    });
+    const font = FontUtils.fontFamily.platform.MONOSPACE.fontFamily;
 
     // Determine the font size for the code based on whether it's inside an H1 element.
     const isInsideH1 = HTMLEngineUtils.isChildOfH1(defaultRendererProps.tnode);
diff --git a/src/components/Onfido/BaseOnfidoWeb.tsx b/src/components/Onfido/BaseOnfidoWeb.tsx
index d1c784c078bf..2a2882c155eb 100644
--- a/src/components/Onfido/BaseOnfidoWeb.tsx
+++ b/src/components/Onfido/BaseOnfidoWeb.tsx
@@ -29,12 +29,12 @@ function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLo
         customUI: {
             // Font styles are commented out until Onfido fixes it on their side, more info here - https://github.com/Expensify/App/issues/44570
             // For now we will use Onfido default font which is better than random serif font which it started defaulting to
-            // fontFamilyTitle: `${FontUtils.fontFamily.platform.EXP_NEUE}, -apple-system, serif`,
-            // fontFamilySubtitle: `${FontUtils.fontFamily.platform.EXP_NEUE}, -apple-system, serif`,
-            // fontFamilyBody: `${FontUtils.fontFamily.platform.EXP_NEUE}, -apple-system, serif`,
+            // fontFamilyTitle: `${FontUtils.fontFamily.platform.EXP_NEUE.fontFamily}, -apple-system, serif`,
+            // fontFamilySubtitle: `${FontUtils.fontFamily.platform.EXP_NEUE.fontFamily}, -apple-system, serif`,
+            // fontFamilyBody: `${FontUtils.fontFamily.platform.EXP_NEUE.fontFamily}, -apple-system, serif`,
             fontSizeTitle: `${variables.fontSizeLarge}px`,
             fontWeightTitle: Number(FontUtils.fontWeight.bold),
-            fontWeightSubtitle: 400,
+            fontWeightSubtitle: Number(FontUtils.fontWeight.normal),
             fontSizeSubtitle: `${variables.fontSizeNormal}px`,
             colorContentTitle: theme.text,
             colorContentSubtitle: theme.text,
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index 7d2303e31066..16aaf9a708c3 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -36,7 +36,7 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c
         color: color ?? theme.text,
         fontSize,
         textAlign,
-        fontFamily: FontUtils.fontFamily.platform[family],
+        ...FontUtils.fontFamily.platform[family],
         ...StyleSheet.flatten(style),
         ...StyleSheet.flatten(customStyle),
     };
diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts
index 51076b0818d4..c7e9bf2c0218 100644
--- a/src/hooks/useMarkdownStyle.ts
+++ b/src/hooks/useMarkdownStyle.ts
@@ -52,13 +52,13 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array<ke
                 paddingRight: 1,
             },
             code: {
-                fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+                ...FontUtils.fontFamily.platform.MONOSPACE,
                 fontSize: 13, // TODO: should be 15 if inside h1, see StyleUtils.getCodeFontSize
                 color: theme.text,
                 backgroundColor: 'transparent',
             },
             pre: {
-                fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+                ...FontUtils.fontFamily.platform.MONOSPACE,
                 fontSize: 13,
                 color: theme.text,
                 backgroundColor: 'transparent',
diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index 7077c1a325c5..481a497fe2a7 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -121,7 +121,7 @@ function HeaderView({report, personalDetails, parentReport, parentReportAction,
         }
         return (
             <>
-                <Text style={[styles.sidebarLinkText, styles.textLabelSupporting, styles.fontWeightNormal]}> {translate('threads.in')} </Text>
+                <Text style={[styles.sidebarLinkText, styles.textLabelSupporting]}> {translate('threads.in')} </Text>
                 <Text style={[styles.sidebarLinkText, styles.textLabelSupporting, styles.textStrong]}>{policyName}</Text>
             </>
         );
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 1e24d1779de6..05ec2649a030 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -99,7 +99,7 @@ const picker = (theme: ThemeColors) =>
     ({
         backgroundColor: theme.transparent,
         color: theme.text,
-        fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+        ...FontUtils.fontFamily.platform.EXP_NEUE,
         fontSize: variables.fontSizeNormal,
         lineHeight: variables.fontSizeNormalHeight,
         paddingBottom: 8,
@@ -115,7 +115,7 @@ const link = (theme: ThemeColors) =>
     ({
         color: theme.link,
         textDecorationColor: theme.link,
-        fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+        ...FontUtils.fontFamily.platform.EXP_NEUE,
     } satisfies ViewStyle & MixedStyleDeclaration);
 
 const baseCodeTagStyles = (theme: ThemeColors) =>
@@ -127,8 +127,7 @@ const baseCodeTagStyles = (theme: ThemeColors) =>
     } satisfies ViewStyle & MixedStyleDeclaration);
 
 const headlineFont = {
-    fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
-    fontWeight: '500',
+    ...FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
 } satisfies TextStyle;
 
 const modalNavigatorContainer = (isSmallScreenWidth: boolean) =>
@@ -147,8 +146,9 @@ const webViewStyles = (theme: ThemeColors) =>
         // component.
         tagStyles: {
             em: {
-                fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
-                fontStyle: 'italic',
+                // We set fontFamily and fontStyle directly in order to avoid overriding fontWeight.
+                fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_ITALIC.fontFamily,
+                fontStyle: FontUtils.fontFamily.platform.EXP_NEUE_ITALIC.fontStyle,
             },
 
             del: {
@@ -157,8 +157,9 @@ const webViewStyles = (theme: ThemeColors) =>
             },
 
             strong: {
-                fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
-                fontWeight: 'bold',
+                // We set fontFamily and fontWeight directly in order to avoid overriding fontStyle.
+                fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD.fontFamily,
+                fontWeight: FontUtils.fontFamily.platform.EXP_NEUE_BOLD.fontWeight,
             },
 
             a: link(theme),
@@ -191,7 +192,7 @@ const webViewStyles = (theme: ThemeColors) =>
                 paddingVertical: 8,
                 paddingHorizontal: 12,
                 fontSize: 13,
-                fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+                ...FontUtils.fontFamily.platform.MONOSPACE,
                 marginTop: 0,
                 marginBottom: 0,
             },
@@ -201,7 +202,7 @@ const webViewStyles = (theme: ThemeColors) =>
                 ...(codeStyles.codeTextStyle as MixedStyleDeclaration),
                 paddingLeft: 5,
                 paddingRight: 5,
-                fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+                ...FontUtils.fontFamily.platform.MONOSPACE,
                 // Font size is determined by getCodeFontSize function in `StyleUtils.js`
             },
 
@@ -233,7 +234,7 @@ const webViewStyles = (theme: ThemeColors) =>
         baseFontStyle: {
             color: theme.text,
             fontSize: variables.fontSizeNormal,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             flex: 1,
             lineHeight: variables.fontSizeNormalHeight,
             ...writingDirection.ltr,
@@ -311,8 +312,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         mentionSuggestionsDisplayName: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
         },
 
         textSupporting: {
@@ -326,7 +326,7 @@ const styles = (theme: ThemeColors) =>
         linkMuted: {
             color: theme.textSupporting,
             textDecorationColor: theme.textSupporting,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
         },
 
         linkMutedHovered: {
@@ -345,9 +345,8 @@ const styles = (theme: ThemeColors) =>
         },
 
         h4: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeLabel,
-            fontWeight: FontUtils.fontWeight.bold,
         },
 
         textAlignCenter: {
@@ -396,34 +395,33 @@ const styles = (theme: ThemeColors) =>
         },
 
         textSmall: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
         },
 
         textMicro: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
             lineHeight: variables.lineHeightSmall,
         },
 
         textMicroBold: {
             color: theme.text,
-            fontWeight: FontUtils.fontWeight.bold,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeSmall,
             lineHeight: variables.lineHeightSmall,
         },
 
         textMicroSupporting: {
             color: theme.textSupporting,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
             lineHeight: variables.lineHeightSmall,
         },
 
         textExtraSmallSupporting: {
             color: theme.textSupporting,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeExtraSmall,
         },
 
@@ -450,13 +448,12 @@ const styles = (theme: ThemeColors) =>
 
         textHero: {
             fontSize: variables.fontSizeHero,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
+            ...FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
             lineHeight: variables.lineHeightHero,
         },
 
         textStrong: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
         },
 
         fontWeightNormal: {
@@ -503,7 +500,7 @@ const styles = (theme: ThemeColors) =>
             color: theme.iconColorfulBackground,
             fontSize: variables.fontSizeNormal,
             lineHeight: variables.lineHeightNormal,
-            fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+            ...FontUtils.fontFamily.platform.MONOSPACE,
             textAlign: 'center',
         },
 
@@ -594,9 +591,8 @@ const styles = (theme: ThemeColors) =>
 
         buttonText: {
             color: theme.text,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeNormal,
-            fontWeight: FontUtils.fontWeight.bold,
             textAlign: 'center',
             flexShrink: 1,
 
@@ -642,22 +638,19 @@ const styles = (theme: ThemeColors) =>
 
         buttonSmallText: {
             fontSize: variables.fontSizeSmall,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             textAlign: 'center',
         },
 
         buttonMediumText: {
             fontSize: variables.fontSizeLabel,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             textAlign: 'center',
         },
 
         buttonLargeText: {
             fontSize: variables.fontSizeNormal,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             textAlign: 'center',
         },
 
@@ -800,7 +793,7 @@ const styles = (theme: ThemeColors) =>
         pickerSmall: (disabled = false, backgroundColor: string = theme.highlightBG) =>
             ({
                 inputIOS: {
-                    fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+                    ...FontUtils.fontFamily.platform.EXP_NEUE,
                     fontSize: variables.fontSizeSmall,
                     paddingLeft: 0,
                     paddingRight: 17,
@@ -828,7 +821,7 @@ const styles = (theme: ThemeColors) =>
                     backgroundColor: theme.highlightBG,
                 },
                 inputWeb: {
-                    fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+                    ...FontUtils.fontFamily.platform.EXP_NEUE,
                     fontSize: variables.fontSizeSmall,
                     paddingLeft: 0,
                     paddingRight: 17,
@@ -843,7 +836,7 @@ const styles = (theme: ThemeColors) =>
                     ...(disabled ? cursor.cursorDisabled : cursor.cursorPointer),
                 },
                 inputAndroid: {
-                    fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+                    ...FontUtils.fontFamily.platform.EXP_NEUE,
                     fontSize: variables.fontSizeSmall,
                     paddingLeft: 0,
                     paddingRight: 17,
@@ -1066,16 +1059,15 @@ const styles = (theme: ThemeColors) =>
 
         headerAnonymousFooter: {
             color: theme.heading,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
+            ...FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
             fontSize: variables.fontSizeXLarge,
             lineHeight: variables.lineHeightXXLarge,
         },
 
         headerText: {
             color: theme.heading,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeNormal,
-            fontWeight: FontUtils.fontWeight.bold,
         },
 
         headerGap: {
@@ -1094,7 +1086,7 @@ const styles = (theme: ThemeColors) =>
 
         chatItemComposeSecondaryRowSubText: {
             color: theme.textSupporting,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
             lineHeight: variables.lineHeightSmall,
         },
@@ -1195,7 +1187,7 @@ const styles = (theme: ThemeColors) =>
             top: 0,
             fontSize: variables.fontSizeNormal,
             color: theme.textSupporting,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             width: '100%',
             zIndex: 1,
         },
@@ -1218,7 +1210,7 @@ const styles = (theme: ThemeColors) =>
             } satisfies TextStyle),
 
         baseTextInput: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeNormal,
             lineHeight: variables.lineHeightXLarge,
             color: theme.text,
@@ -1268,7 +1260,7 @@ const styles = (theme: ThemeColors) =>
             borderColor: theme.border,
             borderWidth: 1,
             color: theme.text,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeNormal,
             paddingLeft: 12,
             paddingRight: 12,
@@ -1291,7 +1283,7 @@ const styles = (theme: ThemeColors) =>
 
         textInputPrefix: {
             color: theme.text,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeNormal,
             verticalAlign: 'middle',
         },
@@ -1368,34 +1360,31 @@ const styles = (theme: ThemeColors) =>
         noOutline: addOutlineWidth(theme, {}, 0),
 
         labelStrong: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
-            fontWeight: 'bold',
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeLabel,
             lineHeight: variables.lineHeightNormal,
         },
 
         textLabelSupporting: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeLabel,
             color: theme.textSupporting,
         },
 
         textLabelSupportingEmptyValue: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeNormal,
-            fontWeight: FontUtils.fontWeight.normal,
             color: theme.textSupporting,
         },
 
         textLabelSupportingNormal: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeLabel,
             color: theme.textSupporting,
-            fontWeight: FontUtils.fontWeight.normal,
         },
 
         textLabelError: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeLabel,
             color: theme.textError,
         },
@@ -1408,14 +1397,14 @@ const styles = (theme: ThemeColors) =>
         },
 
         subTextReceiptUpload: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             lineHeight: variables.lineHeightLarge,
             textAlign: 'center',
             color: theme.text,
         },
 
         furtherDetailsText: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
             color: theme.textSupporting,
         },
@@ -1631,7 +1620,7 @@ const styles = (theme: ThemeColors) =>
         sidebarFooterUsername: {
             color: theme.heading,
             fontSize: variables.fontSizeLabel,
-            fontWeight: '700',
+            fontWeight: FontUtils.fontWeight.bold,
             width: 200,
             textOverflow: 'ellipsis',
             overflow: 'hidden',
@@ -1642,7 +1631,7 @@ const styles = (theme: ThemeColors) =>
             color: theme.textSupporting,
             fontSize: variables.fontSizeSmall,
             textDecorationLine: 'none',
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             lineHeight: 20,
         },
 
@@ -1752,7 +1741,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         createMenuHeaderText: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeLabel,
             color: theme.textSupporting,
         },
@@ -1850,8 +1839,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         sidebarLinkTextBold: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             color: theme.heading,
         },
 
@@ -1868,7 +1856,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         optionDisplayName: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             minHeight: variables.alternateTextHeight,
             lineHeight: variables.lineHeightXLarge,
             ...whiteSpace.noWrap,
@@ -2039,9 +2027,8 @@ const styles = (theme: ThemeColors) =>
 
         chatItemMessageHeaderSender: {
             color: theme.heading,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeNormal,
-            fontWeight: FontUtils.fontWeight.bold,
             lineHeight: variables.lineHeightXLarge,
             ...wordBreak.breakWord,
         },
@@ -2056,7 +2043,7 @@ const styles = (theme: ThemeColors) =>
         chatItemMessage: {
             color: theme.text,
             fontSize: variables.fontSizeNormal,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             lineHeight: variables.lineHeightXLarge,
             maxWidth: '100%',
             ...whiteSpace.preWrap,
@@ -2066,7 +2053,7 @@ const styles = (theme: ThemeColors) =>
         renderHTMLTitle: {
             color: theme.text,
             fontSize: variables.fontSizeNormal,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             lineHeight: variables.lineHeightXLarge,
             maxWidth: '100%',
             ...whiteSpace.preWrap,
@@ -2144,7 +2131,7 @@ const styles = (theme: ThemeColors) =>
                 backgroundColor: theme.componentBG,
                 borderColor: theme.border,
                 color: theme.text,
-                fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+                ...FontUtils.fontFamily.platform.EXP_NEUE,
                 fontSize: variables.fontSizeNormal,
                 borderWidth: 0,
                 height: 'auto',
@@ -2210,8 +2197,7 @@ const styles = (theme: ThemeColors) =>
 
         emojiSkinToneTitle: {
             ...spacing.pv1,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             color: theme.heading,
             fontSize: variables.fontSizeSmall,
         },
@@ -2688,7 +2674,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         twoFactorAuthCode: {
-            fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+            ...FontUtils.fontFamily.platform.MONOSPACE,
             width: 112,
             textAlign: 'center',
         },
@@ -2736,7 +2722,7 @@ const styles = (theme: ThemeColors) =>
             height: 20,
         },
         anonymousRoomFooterLogoTaglineText: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeMedium,
             color: theme.text,
         },
@@ -2799,9 +2785,8 @@ const styles = (theme: ThemeColors) =>
         avatarInnerTextChat: {
             color: theme.text,
             fontSize: variables.fontSizeXLarge,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
+            ...FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
             textAlign: 'center',
-            fontWeight: 'normal',
             position: 'absolute',
             width: 88,
             left: -16,
@@ -2860,15 +2845,13 @@ const styles = (theme: ThemeColors) =>
             ...spacing.pb4,
             paddingLeft: 13,
             fontSize: 13,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
-            fontWeight: '400',
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             lineHeight: 16,
             color: theme.textSupporting,
         },
 
         accountSettingsSectionTitle: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
         },
 
         borderedContentCard: {
@@ -2986,14 +2969,13 @@ const styles = (theme: ThemeColors) =>
 
         unreadIndicatorText: {
             color: theme.unreadIndicator,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeSmall,
-            fontWeight: FontUtils.fontWeight.bold,
             textTransform: 'capitalize',
         },
 
         threadDividerText: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
             textTransform: 'capitalize',
         },
@@ -3335,7 +3317,7 @@ const styles = (theme: ThemeColors) =>
 
         growlNotificationText: {
             fontSize: variables.fontSizeNormal,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             width: '90%',
             lineHeight: variables.fontSizeNormalHeight,
             color: theme.textReversed,
@@ -3588,7 +3570,7 @@ const styles = (theme: ThemeColors) =>
             color: theme.text,
             fontSize: variables.fontSizeNormal,
             lineHeight: variables.fontSizeNormalHeight,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             flex: 1,
         },
 
@@ -3618,7 +3600,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         searchTableHeaderActive: {
-            fontWeight: 'bold',
+            fontWeight: FontUtils.fontWeight.bold,
         },
 
         threeDotsPopoverOffset: (windowWidth: number) =>
@@ -3706,7 +3688,7 @@ const styles = (theme: ThemeColors) =>
         inlineSystemMessage: {
             color: theme.textSupporting,
             fontSize: variables.fontSizeLabel,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             marginLeft: 6,
         },
 
@@ -3879,7 +3861,7 @@ const styles = (theme: ThemeColors) =>
         reactionCounterText: {
             fontSize: 13,
             marginLeft: 4,
-            fontWeight: 'bold',
+            fontWeight: FontUtils.fontWeight.bold,
         },
 
         fontColorReactionLabel: {
@@ -3901,8 +3883,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         quickActionTooltipTitle: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeLabel,
             color: theme.tooltipHighlightText,
         },
@@ -3931,7 +3912,7 @@ const styles = (theme: ThemeColors) =>
 
         validateCodeDigits: {
             color: theme.text,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeXXLarge,
             letterSpacing: 4,
         },
@@ -3981,9 +3962,8 @@ const styles = (theme: ThemeColors) =>
         },
 
         loginHeroHeader: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
+            ...FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
             color: theme.success,
-            fontWeight: '500',
             textAlign: 'center',
         },
 
@@ -4011,28 +3991,28 @@ const styles = (theme: ThemeColors) =>
         },
 
         eReceiptMerchant: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeXLarge,
             lineHeight: variables.lineHeightXXLarge,
             color: theme.textColorfulBackground,
         },
 
         eReceiptWaypointTitle: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
             lineHeight: variables.lineHeightSmall,
             color: colors.green400,
         },
 
         eReceiptWaypointAddress: {
-            fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+            ...FontUtils.fontFamily.platform.MONOSPACE,
             fontSize: variables.fontSizeNormal,
             lineHeight: variables.lineHeightNormal,
             color: theme.textColorfulBackground,
         },
 
         eReceiptGuaranteed: {
-            fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+            ...FontUtils.fontFamily.platform.MONOSPACE,
             fontSize: variables.fontSizeSmall,
             lineHeight: variables.lineHeightSmall,
             color: theme.textColorfulBackground,
@@ -4072,7 +4052,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         loginHeroBody: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSignInHeroBody,
             color: theme.textLight,
             textAlign: 'center',
@@ -4129,7 +4109,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         taskTitleDescription: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeLabel,
             color: theme.textSupporting,
             lineHeight: variables.lineHeightNormal,
@@ -4147,8 +4127,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         assigneeTextStyle: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             minHeight: variables.avatarSizeSubscript,
         },
 
@@ -4272,8 +4251,7 @@ const styles = (theme: ThemeColors) =>
         tabText: (isSelected: boolean) =>
             ({
                 marginLeft: 8,
-                fontFamily: isSelected ? FontUtils.fontFamily.platform.EXP_NEUE_BOLD : FontUtils.fontFamily.platform.EXP_NEUE,
-                fontWeight: isSelected ? FontUtils.fontWeight.bold : '400',
+                ...(isSelected ? FontUtils.fontFamily.platform.EXP_NEUE_BOLD : FontUtils.fontFamily.platform.EXP_NEUE),
                 color: isSelected ? theme.text : theme.textSupporting,
                 lineHeight: variables.lineHeightNormal,
                 fontSize: variables.fontSizeNormal,
@@ -4752,8 +4730,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         walletCardMenuItem: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             color: theme.text,
             fontSize: variables.fontSizeNormal,
             lineHeight: variables.lineHeightXLarge,
@@ -4866,8 +4843,7 @@ const styles = (theme: ThemeColors) =>
 
         interactiveStepHeaderStepText: {
             fontSize: variables.fontSizeLabel,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
-            fontWeight: FontUtils.fontWeight.bold,
+            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
         },
 
         interactiveStepHeaderCompletedStepButton: {
@@ -4894,7 +4870,7 @@ const styles = (theme: ThemeColors) =>
         },
         confirmBankInfoText: {
             fontSize: variables.fontSizeNormal,
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            ...FontUtils.fontFamily.platform.EXP_NEUE,
             color: theme.text,
         },
         confirmBankInfoCompanyIcon: {
@@ -4911,7 +4887,7 @@ const styles = (theme: ThemeColors) =>
             borderRadius: 50,
         },
         confirmBankInfoNumber: {
-            fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+            ...FontUtils.fontFamily.platform.MONOSPACE,
             fontSize: variables.fontSizeNormal,
             lineHeight: variables.lineHeightXLarge,
             color: theme.text,
@@ -4972,7 +4948,7 @@ const styles = (theme: ThemeColors) =>
         videoPlayerText: {
             textAlign: 'center',
             fontSize: variables.fontSizeLabel,
-            fontWeight: '700',
+            fontWeight: FontUtils.fontWeight.bold,
             lineHeight: 16,
             color: theme.white,
             userSelect: 'none',
diff --git a/src/styles/utils/FontUtils/fontFamily/bold/index.android.ts b/src/styles/utils/FontUtils/fontFamily/bold/index.android.ts
deleted file mode 100644
index 89f116f18c20..000000000000
--- a/src/styles/utils/FontUtils/fontFamily/bold/index.android.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type FontFamilyBoldStyles from './types';
-
-const singleBold: FontFamilyBoldStyles = 'ExpensifyNeue-Bold';
-const multiBold: FontFamilyBoldStyles = 'ExpensifyNeue-Bold';
-
-export {singleBold, multiBold};
diff --git a/src/styles/utils/FontUtils/fontFamily/bold/index.ios.ts b/src/styles/utils/FontUtils/fontFamily/bold/index.ios.ts
deleted file mode 100644
index a5dfea7ecd2e..000000000000
--- a/src/styles/utils/FontUtils/fontFamily/bold/index.ios.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type FontFamilyBoldStyles from './types';
-
-const singleBold: FontFamilyBoldStyles = 'ExpensifyNeue-Regular';
-const multiBold: FontFamilyBoldStyles = 'ExpensifyNeue-Regular';
-
-export {singleBold, multiBold};
diff --git a/src/styles/utils/FontUtils/fontFamily/bold/index.ts b/src/styles/utils/FontUtils/fontFamily/bold/index.ts
deleted file mode 100644
index d07951acd0f5..000000000000
--- a/src/styles/utils/FontUtils/fontFamily/bold/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type FontFamilyBoldStyles from './types';
-
-const singleBold: FontFamilyBoldStyles = 'ExpensifyNeue-Regular';
-const multiBold: FontFamilyBoldStyles = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji';
-
-export {singleBold, multiBold};
diff --git a/src/styles/utils/FontUtils/fontFamily/bold/types.ts b/src/styles/utils/FontUtils/fontFamily/bold/types.ts
deleted file mode 100644
index b393618102a5..000000000000
--- a/src/styles/utils/FontUtils/fontFamily/bold/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type {TextStyle} from 'react-native';
-
-type FontFamilyBoldStyles = NonNullable<TextStyle['fontFamily']>;
-
-export default FontFamilyBoldStyles;
diff --git a/src/styles/utils/FontUtils/fontFamily/multiFontFamily.ts b/src/styles/utils/FontUtils/fontFamily/multiFontFamily.ts
deleted file mode 100644
index 902b94021b32..000000000000
--- a/src/styles/utils/FontUtils/fontFamily/multiFontFamily.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import getOperatingSystem from '@libs/getOperatingSystem';
-import CONST from '@src/CONST';
-import {multiBold} from './bold';
-import type FontFamilyStyles from './types';
-
-// In windows and ubuntu, we need some extra system fonts for emojis to work properly
-// otherwise few of them will appear as black and white
-const fontFamily: FontFamilyStyles = {
-    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji',
-    EXP_NEUE_BOLD: multiBold,
-    EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji',
-    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji',
-    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji',
-    SYSTEM: 'System',
-    MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
-    MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
-    MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
-    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
-};
-
-if (getOperatingSystem() === CONST.OS.WINDOWS) {
-    Object.keys(fontFamily).forEach((key) => {
-        fontFamily[key as keyof FontFamilyStyles] = fontFamily[key as keyof FontFamilyStyles].replace('Segoe UI Emoji', 'Windows Segoe UI Emoji');
-    });
-}
-
-export default fontFamily;
diff --git a/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.native.ts b/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.native.ts
new file mode 100644
index 000000000000..c0350b7c3167
--- /dev/null
+++ b/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.native.ts
@@ -0,0 +1,5 @@
+// Since we don't use multiple font families on native platforms, we just fallback to single.
+// eslint-disable-next-line no-restricted-imports
+import fontFamily from '@styles/utils/FontUtils/fontFamily/singleFontFamily';
+
+export default fontFamily;
diff --git a/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.ts b/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.ts
new file mode 100644
index 000000000000..7104f905e72f
--- /dev/null
+++ b/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.ts
@@ -0,0 +1,67 @@
+import getOperatingSystem from '@libs/getOperatingSystem';
+// eslint-disable-next-line no-restricted-imports
+import type FontFamilyStyles from '@styles/utils/FontUtils/fontFamily/types';
+// eslint-disable-next-line no-restricted-imports
+import fontWeight from '@styles/utils/FontUtils/fontWeight';
+import CONST from '@src/CONST';
+
+// In windows and ubuntu, we need some extra system fonts for emojis to work properly
+// otherwise few of them will appear as black and white
+const fontFamily: FontFamilyStyles = {
+    SYSTEM: {
+        fontFamily: 'System',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.normal,
+    },
+
+    MONOSPACE: {
+        fontFamily: 'Expensify Mono, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.normal,
+    },
+    MONOSPACE_BOLD: {
+        fontFamily: 'Expensify Mono, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.bold,
+    },
+
+    EXP_NEUE: {
+        fontFamily: 'Expensify Neue, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.normal,
+    },
+    EXP_NEUE_BOLD: {
+        fontFamily: 'Expensify Neue, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.bold,
+    },
+    EXP_NEUE_ITALIC: {
+        fontFamily: 'Expensify Neue, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.normal,
+    },
+    EXP_NEUE_BOLD_ITALIC: {
+        fontFamily: 'Expensify Neue, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.bold,
+    },
+
+    EXP_NEW_KANSAS_MEDIUM: {
+        fontFamily: 'Expensify New Kansas, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.medium,
+    },
+    EXP_NEW_KANSAS_MEDIUM_ITALIC: {
+        fontFamily: 'Expensify New Kansas, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.medium,
+    },
+};
+
+if (getOperatingSystem() === CONST.OS.WINDOWS) {
+    Object.keys(fontFamily).forEach((key) => {
+        fontFamily[key as keyof FontFamilyStyles].fontFamily = fontFamily[key as keyof FontFamilyStyles].fontFamily.replace('Segoe UI Emoji', 'Windows Segoe UI Emoji');
+    });
+}
+
+export default fontFamily;
diff --git a/src/styles/utils/FontUtils/fontFamily/singleFontFamily.ts b/src/styles/utils/FontUtils/fontFamily/singleFontFamily.ts
deleted file mode 100644
index 71294c55ffaa..000000000000
--- a/src/styles/utils/FontUtils/fontFamily/singleFontFamily.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {singleBold} from './bold';
-import type FontFamilyStyles from './types';
-
-const fontFamily: FontFamilyStyles = {
-    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic',
-    EXP_NEUE_BOLD: singleBold,
-    EXP_NEUE: 'ExpensifyNeue-Regular',
-    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium',
-    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic',
-    SYSTEM: 'System',
-    MONOSPACE: 'ExpensifyMono-Regular',
-    MONOSPACE_ITALIC: 'ExpensifyMono-Regular',
-    MONOSPACE_BOLD: 'ExpensifyMono-Bold',
-    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold',
-};
-
-export default fontFamily;
diff --git a/src/styles/utils/FontUtils/fontFamily/singleFontFamily/index.ts b/src/styles/utils/FontUtils/fontFamily/singleFontFamily/index.ts
new file mode 100644
index 000000000000..6415835264ac
--- /dev/null
+++ b/src/styles/utils/FontUtils/fontFamily/singleFontFamily/index.ts
@@ -0,0 +1,57 @@
+// eslint-disable-next-line no-restricted-imports
+import type FontFamilyStyles from '@styles/utils/FontUtils/fontFamily/types';
+// eslint-disable-next-line no-restricted-imports
+import fontWeight from '@styles/utils/FontUtils/fontWeight';
+
+const fontFamily: FontFamilyStyles = {
+    SYSTEM: {
+        fontFamily: 'System',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.normal,
+    },
+
+    MONOSPACE: {
+        fontFamily: 'Expensify Mono',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.normal,
+    },
+    MONOSPACE_BOLD: {
+        fontFamily: 'Expensify Mono',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.bold,
+    },
+
+    EXP_NEUE: {
+        fontFamily: 'Expensify Neue',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.normal,
+    },
+    EXP_NEUE_BOLD: {
+        fontFamily: 'Expensify Neue',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.bold,
+    },
+    EXP_NEUE_ITALIC: {
+        fontFamily: 'Expensify Neue',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.normal,
+    },
+    EXP_NEUE_BOLD_ITALIC: {
+        fontFamily: 'Expensify Neue',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.bold,
+    },
+
+    EXP_NEW_KANSAS_MEDIUM: {
+        fontFamily: 'Expensify New Kansas',
+        fontStyle: 'normal',
+        fontWeight: fontWeight.medium,
+    },
+    EXP_NEW_KANSAS_MEDIUM_ITALIC: {
+        fontFamily: 'Expensify New Kansas',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.medium,
+    },
+};
+
+export default fontFamily;
diff --git a/src/styles/utils/FontUtils/fontFamily/types.ts b/src/styles/utils/FontUtils/fontFamily/types.ts
index 724f92d4edc7..75275c28ea9e 100644
--- a/src/styles/utils/FontUtils/fontFamily/types.ts
+++ b/src/styles/utils/FontUtils/fontFamily/types.ts
@@ -1,17 +1,22 @@
 import type {TextStyle} from 'react-native';
 
-type FontFamilyKeys =
-    | 'EXP_NEUE_ITALIC'
-    | 'EXP_NEUE_BOLD'
-    | 'EXP_NEUE'
-    | 'EXP_NEW_KANSAS_MEDIUM'
-    | 'EXP_NEW_KANSAS_MEDIUM_ITALIC'
+type FontFamilyKey =
     | 'SYSTEM'
     | 'MONOSPACE'
-    | 'MONOSPACE_ITALIC'
     | 'MONOSPACE_BOLD'
-    | 'MONOSPACE_BOLD_ITALIC';
+    | 'EXP_NEUE'
+    | 'EXP_NEUE_BOLD'
+    | 'EXP_NEUE_ITALIC'
+    | 'EXP_NEUE_BOLD_ITALIC'
+    | 'EXP_NEW_KANSAS_MEDIUM'
+    | 'EXP_NEW_KANSAS_MEDIUM_ITALIC';
+
+type FontFamily = {
+    fontFamily: string;
+    fontStyle: TextStyle['fontStyle'];
+    fontWeight: TextStyle['fontWeight'];
+};
 
-type FontFamilyStyles = Record<FontFamilyKeys, NonNullable<TextStyle['fontFamily']>>;
+type FontFamilyStyles = Record<FontFamilyKey, FontFamily>;
 
 export default FontFamilyStyles;
diff --git a/src/styles/utils/FontUtils/fontWeight/bold/index.android.ts b/src/styles/utils/FontUtils/fontWeight/bold/index.android.ts
deleted file mode 100644
index f4364eeb1e80..000000000000
--- a/src/styles/utils/FontUtils/fontWeight/bold/index.android.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type FontWeightBoldStyles from './types';
-
-// Android has ExpensifyNeue-Bold, but fontWeight: '700' will result in
-// an incorrect font displaying on Android
-const bold: FontWeightBoldStyles = '600';
-
-export default bold;
diff --git a/src/styles/utils/FontUtils/fontWeight/bold/index.ts b/src/styles/utils/FontUtils/fontWeight/bold/index.ts
deleted file mode 100644
index ecb6cb5ce2b1..000000000000
--- a/src/styles/utils/FontUtils/fontWeight/bold/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type FontWeightBoldStyles from './types';
-
-// Web only has ExpensifyNeue-Regular so to achieve bold we need to add this fontWeight
-const bold: FontWeightBoldStyles = '700';
-
-export default bold;
diff --git a/src/styles/utils/FontUtils/fontWeight/bold/types.ts b/src/styles/utils/FontUtils/fontWeight/bold/types.ts
deleted file mode 100644
index 624deb999a43..000000000000
--- a/src/styles/utils/FontUtils/fontWeight/bold/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type {TextStyle} from 'react-native';
-
-type FontWeightBoldStyles = NonNullable<TextStyle['fontWeight']>;
-
-export default FontWeightBoldStyles;
diff --git a/src/styles/utils/FontUtils/fontWeight/index.ts b/src/styles/utils/FontUtils/fontWeight/index.ts
new file mode 100644
index 000000000000..c5b98deb84e0
--- /dev/null
+++ b/src/styles/utils/FontUtils/fontWeight/index.ts
@@ -0,0 +1,11 @@
+import type {TextStyle} from 'react-native';
+
+type FontWeightStyles = Record<'normal' | 'medium' | 'bold', NonNullable<TextStyle['fontWeight']>>;
+
+const fontWeight: FontWeightStyles = {
+    normal: '400',
+    medium: '500',
+    bold: '700',
+};
+
+export default fontWeight;
diff --git a/src/styles/utils/FontUtils/index.ts b/src/styles/utils/FontUtils/index.ts
index c460a20d855d..8b18a7dc18ab 100644
--- a/src/styles/utils/FontUtils/index.ts
+++ b/src/styles/utils/FontUtils/index.ts
@@ -1,18 +1,26 @@
 import fontFamily from './fontFamily';
 import multiFontFamily from './fontFamily/multiFontFamily';
 import singleFontFamily from './fontFamily/singleFontFamily';
-import fontWeightBold from './fontWeight/bold';
+import fontWeight from './fontWeight';
 
 const FontUtils = {
     fontFamily: {
+        /**
+         * Set of font families that can either have fallback fonts (if web / desktop) or not (if native).
+         */
         platform: fontFamily,
+
+        /**
+         * Set of font families that don't include any fallback fonts, normally used on native platforms.
+         */
         single: singleFontFamily,
+
+        /**
+         * Set of font families that include fallback fonts, normally used on web / desktop platforms.
+         */
         multi: multiFontFamily,
     },
-    fontWeight: {
-        bold: fontWeightBold,
-        normal: '400',
-    },
+    fontWeight,
 } as const;
 
 type FontUtilsType = typeof FontUtils;
diff --git a/src/styles/utils/emojiDefaultStyles/index.native.ts b/src/styles/utils/emojiDefaultStyles/index.native.ts
index 20bb887161d6..d90e92340315 100644
--- a/src/styles/utils/emojiDefaultStyles/index.native.ts
+++ b/src/styles/utils/emojiDefaultStyles/index.native.ts
@@ -1,8 +1,9 @@
+import FontUtils from '@styles/utils/FontUtils';
 import type EmojiDefaultStyles from './types';
 
 const emojiDefaultStyles: EmojiDefaultStyles = {
     fontStyle: 'normal',
-    fontWeight: 'normal',
+    fontWeight: FontUtils.fontWeight.normal,
     textDecorationLine: 'none',
 };
 
diff --git a/src/styles/utils/emojiDefaultStyles/index.ts b/src/styles/utils/emojiDefaultStyles/index.ts
index a24424f6677c..88c42e7e95d1 100644
--- a/src/styles/utils/emojiDefaultStyles/index.ts
+++ b/src/styles/utils/emojiDefaultStyles/index.ts
@@ -1,10 +1,11 @@
 // eslint-disable-next-line no-restricted-imports
 import display from '@styles/utils/display';
+import FontUtils from '@styles/utils/FontUtils';
 import type EmojiDefaultStyles from './types';
 
 const emojiDefaultStyles: EmojiDefaultStyles = {
     fontStyle: 'normal',
-    fontWeight: 'normal',
+    fontWeight: FontUtils.fontWeight.normal,
     ...display.dInlineFlex,
 };
 
diff --git a/src/styles/utils/generators/TooltipStyleUtils/index.native.ts b/src/styles/utils/generators/TooltipStyleUtils/index.native.ts
index fa4264f45b1c..8ec3e1ded500 100644
--- a/src/styles/utils/generators/TooltipStyleUtils/index.native.ts
+++ b/src/styles/utils/generators/TooltipStyleUtils/index.native.ts
@@ -148,7 +148,7 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
             },
             textStyle: {
                 color: theme.textReversed,
-                fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+                ...FontUtils.fontFamily.platform.EXP_NEUE,
                 fontSize: variables.fontSizeSmall,
                 overflow: 'hidden',
                 lineHeight: variables.lineHeightSmall,
diff --git a/src/styles/utils/generators/TooltipStyleUtils/index.ts b/src/styles/utils/generators/TooltipStyleUtils/index.ts
index 846848ab25bd..4dfd0409a93e 100644
--- a/src/styles/utils/generators/TooltipStyleUtils/index.ts
+++ b/src/styles/utils/generators/TooltipStyleUtils/index.ts
@@ -268,7 +268,7 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
             },
             textStyle: {
                 color: theme.textReversed,
-                fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+                ...FontUtils.fontFamily.platform.EXP_NEUE,
                 fontSize: variables.fontSizeSmall,
                 overflow: 'hidden',
                 lineHeight: variables.lineHeightSmall,
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index c7fe153857e7..ed76abd484d0 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -18,7 +18,6 @@ import type {ThemeStyles} from '..';
 import shouldPreventScrollOnAutoCompleteSuggestion from './autoCompleteSuggestion';
 import getCardStyles from './cardStyles';
 import containerComposeStyles from './containerComposeStyles';
-import FontUtils from './FontUtils';
 import createModalStyleUtils from './generators/ModalStyleUtils';
 import createReportActionContextMenuStyleUtils from './generators/ReportActionContextMenuStyleUtils';
 import createTooltipStyleUtils from './generators/TooltipStyleUtils';
@@ -599,16 +598,6 @@ function getModalPaddingStyles({
     };
 }
 
-/**
- * Takes fontStyle and fontWeight and returns the correct fontFamily
- */
-function getFontFamilyMonospace({fontStyle, fontWeight}: TextStyle): string {
-    const italic = fontStyle === 'italic' && FontUtils.fontFamily.platform.MONOSPACE_ITALIC;
-    const bold = fontWeight === 'bold' && FontUtils.fontFamily.platform.MONOSPACE_BOLD;
-    const italicBold = italic && bold && FontUtils.fontFamily.platform.MONOSPACE_BOLD_ITALIC;
-
-    return italicBold || bold || italic || FontUtils.fontFamily.platform.MONOSPACE;
-}
 /**
  * Returns the font size for the HTML code tag renderer.
  */
@@ -1151,7 +1140,6 @@ const staticStyleUtils = {
     getEmojiPickerStyle,
     getEmojiReactionBubbleTextStyle,
     getTransformScaleStyle,
-    getFontFamilyMonospace,
     getCodeFontSize,
     getFontSizeStyle,
     getLineHeightStyle,
diff --git a/tests/ui/UnreadIndicatorsTest.tsx b/tests/ui/UnreadIndicatorsTest.tsx
index ca30eb10b065..1d31a707d81d 100644
--- a/tests/ui/UnreadIndicatorsTest.tsx
+++ b/tests/ui/UnreadIndicatorsTest.tsx
@@ -367,7 +367,7 @@ describe('Unread Indicators', () => {
                 const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
                 const displayNameTexts = screen.queryAllByLabelText(hintText);
                 expect(displayNameTexts).toHaveLength(2);
-                expect((displayNameTexts[0]?.props?.style as TextStyle)?.fontWeight).toBe(undefined);
+                expect((displayNameTexts[0]?.props?.style as TextStyle)?.fontWeight).toBe(FontUtils.fontWeight.normal);
                 expect(screen.getAllByText('C User')[0]).toBeOnTheScreen();
                 expect((displayNameTexts[1]?.props?.style as TextStyle)?.fontWeight).toBe(FontUtils.fontWeight.bold);
                 expect(screen.getByText('B User')).toBeOnTheScreen();