Use Font XML resources and standardise font usage on native platforms

.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;

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);
 

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>

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>

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>

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">

android/link-assets-manifest.json

@@ -1,5 +1,5 @@
 {
-  "migIndex": 1,
+  "migIndex": 2,
   "data": [
     {
       "path": "assets/fonts/native/ExpensifyMono-Bold.otf",

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.

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');

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');