Fix font display on Android

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,7 @@
 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 +40,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}`
     }
 
@@ -78,8 +104,19 @@ export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
  * This is used for both web fonts and native fonts.
  */
 export function DO_NOT_USE() {
-  return useFonts({
+  return useFonts(
-    InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'),
+    isAndroid
-    'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'),
+      ? {
-  })
+          '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'),
+        }
+      : {
+          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 = {