Fix font display on Android (#5776)

* Fix font display on Android

* Format

* Split out fake fonts hook for platforms

app.config.js

@@ -236,6 +236,13 @@ module.exports = function (config) {
             fonts: [
               './assets/fonts/inter/InterVariable.ttf',
               './assets/fonts/inter/InterVariable-Italic.ttf',
+              // Android only
+              './assets/fonts/inter/Inter-Regular.otf',
+              './assets/fonts/inter/Inter-Italic.otf',
+              './assets/fonts/inter/Inter-SemiBold.otf',
+              './assets/fonts/inter/Inter-SemiBoldItalic.otf',
+              './assets/fonts/inter/Inter-ExtraBold.otf',
+              './assets/fonts/inter/Inter-ExtraBoldItalic.otf',
             ],
           },
         ],

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') {
+      if (style.fontStyle === 'italic') {
-      style.fontFamily += '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.
+ * Here only for bundling purposes, not actually used.
- *
- * 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() {
+export {DO_NOT_USE} from '#/alf/util/unusedUseFonts'
-  return useFonts({
-    InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'),
-    'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'),
-  })
-}

src/alf/tokens.ts

@@ -52,8 +52,8 @@ export const borderRadius = {
  */
 export const fontWeight = {
   normal: '400',
-  bold: isAndroid ? '700' : '600',
+  bold: '600',
-  heavy: isAndroid ? '900' : '800',
+  heavy: '800',
 } as const
 
 export const gradients = {

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'),
+  })
+}

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'),
+  })
+}