Fixes

app.config.js

@@ -225,12 +225,12 @@ module.exports = function (config) {
           'expo-font',
           {
             fonts: [
-              './assets/fonts/inter/Inter-Thin.otf',
+              // './assets/fonts/inter/Inter-Thin.otf',
-              './assets/fonts/inter/Inter-ThinItalic.otf',
+              // './assets/fonts/inter/Inter-ThinItalic.otf',
-              './assets/fonts/inter/Inter-ExtraLight.otf',
+              // './assets/fonts/inter/Inter-ExtraLight.otf',
-              './assets/fonts/inter/Inter-ExtraLightItalic.otf',
+              // './assets/fonts/inter/Inter-ExtraLightItalic.otf',
-              './assets/fonts/inter/Inter-Light.otf',
+              // './assets/fonts/inter/Inter-Light.otf',
-              './assets/fonts/inter/Inter-LightItalic.otf',
+              // './assets/fonts/inter/Inter-LightItalic.otf',
               './assets/fonts/inter/Inter-Regular.otf',
               './assets/fonts/inter/Inter-Italic.otf',
               './assets/fonts/inter/Inter-Medium.otf',

src/alf/fonts.ts

@@ -1,8 +1,11 @@
 import {useFonts as defaultUseFonts} from 'expo-font'
 
+import {isWeb} from '#/platform/detection'
 import {IS_PROD} from '#/env'
 import {Device, device} from '#/storage'
 
+const FAMILIES = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif`
+
 const factor = 0.0625 // 1 - (15/16)
 const fontScaleMultipliers: Record<Device['fontScale'], number> = {
   '-2': 1 - factor * 3,
@@ -36,7 +39,12 @@ export function setFontFamily(fontFamily: Device['fontFamily']) {
  * Unused fonts are commented out, but the files are there if we need them.
  */
 export function useFonts() {
-  if (IS_PROD) return [true, undefined]
+  /**
+   * Local native builds work fine with `expo-font` config plugin, but web does
+   * not. So in dev, we ensure things are loaded using the async hook. In
+   * production, fonts load via the config plugin on all platforms.
+   */
+  if (IS_PROD) return [true, null]
   return defaultUseFonts({
     // 'Inter-Thin': require('../../assets/fonts/inter/Inter-Thin.otf'),
     // 'Inter-ThinItalic': require('../../assets/fonts/inter/Inter-ThinItalic.otf'),
@@ -62,7 +70,11 @@ export function useFonts() {
 /*
  * Unused fonts are commented out, but the files are there if we need them.
  */
-export function applyFonts(style: Record<string, any>) {
+export function applyFonts(
+  style: Record<string, any>,
+  fontFamily: 'system' | 'theme',
+) {
+  if (fontFamily === 'theme') {
     style.fontFamily =
       {
         // '100': 'Inter-Thin',
@@ -87,6 +99,14 @@ export function applyFonts(style: Record<string, any>) {
       }
     }
 
-  style.fontFamily +=
+    // fallback families only supported on web
-    ', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif'
+    if (isWeb) {
+      style.fontFamily += `, ${FAMILIES}`
+    }
+  } else {
+    // fallback families only supported on web
+    if (isWeb) {
+      style.fontFamily = style.fontFamily || FAMILIES
+    }
+  }
 }

src/components/Typography.tsx

@@ -56,9 +56,7 @@ export function normalizeTextStyles(
     s.lineHeight = s.fontSize
   }
 
-  if (fontFamily === 'theme') {
+  applyFonts(s, fontFamily)
-    applyFonts(s)
-  }
 
   return s
 }

src/view/com/util/text/Text.tsx

@@ -43,9 +43,7 @@ export function Text({
       style,
     ])
 
-    if (fonts.family === 'theme') {
+    applyFonts(flattened, fonts.family)
-      applyFonts(flattened)
-    }
 
     // should always be defined on `typography`
     // @ts-ignore
@@ -73,9 +71,7 @@ export function Text({
     style,
   ])
 
-  if (fonts.family === 'theme') {
+  applyFonts(flattened, fonts.family)
-    applyFonts(flattened)
-  }
 
   // should always be defined on `typography`
   // @ts-ignore