Use Font XML resources and standardise font usage on native platforms

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

ios/link-assets-manifest.json

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

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

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -91,7 +91,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,
             }}

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

src/components/Onfido/BaseOnfidoWeb.tsx

@@ -27,12 +27,12 @@ function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLo
         token: sdkToken,
         containerId: CONST.ONFIDO.CONTAINER_ID,
         customUI: {
-            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,

src/components/Text.tsx

@@ -34,7 +34,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),
     };
 

src/hooks/useMarkdownStyle.ts

@@ -30,13 +30,13 @@ function useMarkdownStyle(message: string | null = null): MarkdownStyle {
                 paddingLeft: 6,
             },
             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',

src/pages/home/HeaderView.tsx

@@ -190,7 +190,7 @@ function HeaderView({
         }
         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>
             </>
         );