Fix font display on Android (#5776)

* Fix font display on Android

* Format

* Split out fake fonts hook for platforms

4 files changed, 70 insertions, 20 deletions

diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts
index c17e35e5e..786916721 100644
--- a/src/alf/fonts.ts
+++ b/src/alf/fonts.ts
@@ -1,7 +1,6 @@
 import {TextStyle} from 'react-native'
-import {useFonts} from 'expo-font'
 
-import {isWeb} from '#/platform/detection'
+import {isAndroid, isWeb} from '#/platform/detection'
 import {Device, device} from '#/storage'
 
 const WEB_FONT_FAMILIES = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
@@ -40,14 +39,40 @@ export function setFontFamily(fontFamily: Device['fontFamily']) {
  */
 export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
   if (fontFamily === 'theme') {
-    style.fontFamily = 'InterVariable'
+    if (isAndroid) {
+      style.fontFamily =
+        {
+          400: 'Inter-Regular',
+          500: 'Inter-Regular',
+          600: 'Inter-SemiBold',
+          700: 'Inter-SemiBold',
+          800: 'Inter-ExtraBold',
+          900: 'Inter-ExtraBold',
+        }[String(style.fontWeight || '400')] || 'Inter-Regular'
 
-    if (style.fontStyle === 'italic') {
-      style.fontFamily += 'Italic'
+      if (style.fontStyle === 'italic') {
+        if (style.fontFamily === 'Inter-Regular') {
+          style.fontFamily = 'Inter-Italic'
+        } else {
+          style.fontFamily += 'Italic'
+        }
+      }
+
+      /*
+       * These are not supported on Android and actually break the styling.
+       */
+      delete style.fontWeight
+      delete style.fontStyle
+    } else {
+      style.fontFamily = 'InterVariable'
+
+      if (style.fontStyle === 'italic') {
+        style.fontFamily += 'Italic'
+      }
     }
 
-    // fallback families only supported on web
     if (isWeb) {
+      // fallback families only supported on web
       style.fontFamily += `, ${WEB_FONT_FAMILIES}`
     }
 
@@ -70,16 +95,7 @@ export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
   }
 }
 
-/*
- * IMPORTANT: This is unused. Expo statically extracts these fonts.
- *
- * All used fonts MUST be configured here. Unused fonts can be commented out.
- *
- * This is used for both web fonts and native fonts.
+/**
+ * Here only for bundling purposes, not actually used.
  */
-export function DO_NOT_USE() {
-  return useFonts({
-    InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'),
-    'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'),
-  })
-}
+export {DO_NOT_USE} from '#/alf/util/unusedUseFonts'
diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts
index 9ea585ee7..1d99e5e57 100644
--- a/src/alf/tokens.ts
+++ b/src/alf/tokens.ts
@@ -52,8 +52,8 @@ export const borderRadius = {
  */
 export const fontWeight = {
   normal: '400',
-  bold: isAndroid ? '700' : '600',
-  heavy: isAndroid ? '900' : '800',
+  bold: '600',
+  heavy: '800',
 } as const
 
 export const gradients = {
diff --git a/src/alf/util/unusedUseFonts.android.ts b/src/alf/util/unusedUseFonts.android.ts
new file mode 100644
index 000000000..083c9d4d6
--- /dev/null
+++ b/src/alf/util/unusedUseFonts.android.ts
@@ -0,0 +1,19 @@
+import {useFonts} from 'expo-font'
+
+/*
+ * IMPORTANT: This is unused. Expo statically extracts these fonts.
+ *
+ * All used fonts MUST be configured here. Unused fonts can be commented out.
+ *
+ * This is used for both web fonts and native fonts.
+ */
+export function DO_NOT_USE() {
+  return useFonts({
+    'Inter-Regular': require('../../../assets/fonts/inter/Inter-Regular.otf'),
+    'Inter-Italic': require('../../../assets/fonts/inter/Inter-Italic.otf'),
+    'Inter-Bold': require('../../../assets/fonts/inter/Inter-SemiBold.otf'),
+    'Inter-BoldItalic': require('../../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
+    'Inter-Black': require('../../../assets/fonts/inter/Inter-ExtraBold.otf'),
+    'Inter-BlackItalic': require('../../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'),
+  })
+}
diff --git a/src/alf/util/unusedUseFonts.ts b/src/alf/util/unusedUseFonts.ts
new file mode 100644
index 000000000..70bdc285b
--- /dev/null
+++ b/src/alf/util/unusedUseFonts.ts
@@ -0,0 +1,15 @@
+import {useFonts} from 'expo-font'
+
+/*
+ * IMPORTANT: This is unused. Expo statically extracts these fonts.
+ *
+ * All used fonts MUST be configured here. Unused fonts can be commented out.
+ *
+ * This is used for both web fonts and native fonts.
+ */
+export function DO_NOT_USE() {
+  return useFonts({
+    InterVariable: require('../../../assets/fonts/inter/InterVariable.ttf'),
+    'InterVariable-Italic': require('../../../assets/fonts/inter/InterVariable-Italic.ttf'),
+  })
+}