expo-font 58.0.0 → 58.0.2

package/CHANGELOG.md

@@ -10,6 +10,28 @@
 
 ### 💡 Others
 
+## 58.0.2 — 2026-09-21
+
+### 🐛 Bug fixes
+
+- [iOS] Import `UIKit` in the `UIFont` extension, which relied on another file in the module importing it. ([#50277](https://github.com/expo/expo/pull/50277) by [@chrfalch](https://github.com/chrfalch))
+
+## 58.0.1 — 2026-09-15
+
+### 🛠 Breaking changes
+
+- [web] Removed `FontResource.testString`. The CSS Font Loading API detects font loading without a test string. ([#49497](https://github.com/expo/expo/pull/49497) by [@vonovak](https://github.com/vonovak))
+
+### 🎉 New features
+
+- [android][ios] Select a face of a multi-face font family with the `fontWeight` and `fontStyle` style props. ([#49486](https://github.com/expo/expo/pull/49486) by [@vonovak](https://github.com/vonovak))
+- Support loading multiple font weights and styles per `fontFamily` in `useFonts`/`loadAsync` on Android, iOS, and web. Use `fontWeight` and `fontStyle` style props to select the correct face. ([#47939](https://github.com/expo/expo/pull/47939) by [@bryanmylee](https://github.com/bryanmylee))
+- [web] Accept a variable-font weight range, for example `weight: '100 900'`, on a font face. Android and iOS ignore a range and read the weight from the font file. ([#49487](https://github.com/expo/expo/pull/49487) by [@vonovak](https://github.com/vonovak))
+
+### 💡 Others
+
+- [web] Replaced the `fontfaceobserver` dependency with the CSS Font Loading API, so `loadAsync` also waits for the font on Safari and iOS browsers. ([#49497](https://github.com/expo/expo/pull/49497) by [@vonovak](https://github.com/vonovak))
+
 ## 58.0.0 — 2026-09-10
 
 ### 🛠 Breaking changes

package/android/build.gradle

@@ -4,13 +4,13 @@ plugins {
 }
 
 group = 'host.exp.exponent'
-version = '58.0.0'
+version = '58.0.2'
 
 android {
   namespace "expo.modules.font"
   defaultConfig {
     versionCode 29
-    versionName "58.0.0"
+    versionName "58.0.2"
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
 }

package/android/src/main/java/expo/modules/font/FontFamilyFaces.kt

@@ -0,0 +1,66 @@
+package expo.modules.font
+
+import expo.modules.kotlin.exception.CodedException
+
+private const val MIN_WEIGHT = 1
+private const val MAX_WEIGHT = 1000
+private const val DEFAULT_WEIGHT = 400
+
+// Kept free of android.* imports so it can be unit-tested on the plain JVM.
+object FontFamilyFaces {
+  private fun isItalic(style: String?) = style == "italic"
+
+  fun assertWeightsInRange(fontFamilyName: String, faces: List<FontFaceRecord>) {
+    for (face in faces) {
+      val weight = face.weight ?: DEFAULT_WEIGHT
+      if (weight !in MIN_WEIGHT..MAX_WEIGHT) {
+        throw CodedException(
+          "Font face '${face.localUri}' for family '$fontFamilyName' declares weight $weight, " +
+            "but weight must be between $MIN_WEIGHT and $MAX_WEIGHT. " +
+            "Set the 'weight' of this face to a value in that range."
+        )
+      }
+    }
+  }
+
+  // Call only with resolved values (after `setWeight`/`setSlant`).
+  fun assertNoDuplicateFaces(fontFamilyName: String, faces: List<FontFaceRecord>) {
+    val seenFaces = mutableMapOf<Pair<Int, Boolean>, String>()
+
+    for (face in faces) {
+      val weight = face.weight ?: DEFAULT_WEIGHT
+      val italic = isItalic(face.style)
+      val key = weight to italic
+      val conflictingUri = seenFaces[key]
+      if (conflictingUri != null) {
+        throw CodedException(
+          "Font family '$fontFamilyName' declares two faces with weight $weight and " +
+            "style '${if (italic) "italic" else "normal"}': '$conflictingUri' and '${face.localUri}'. " +
+            "Give each face of a family a distinct weight or style so the correct file is selected at render time."
+        )
+      }
+      seenFaces[key] = face.localUri
+    }
+  }
+
+  // The face to load when only one can be (below API 29).
+  fun defaultFaceIndex(faces: List<FontFaceRecord>): Int {
+    var bestIndex = 0
+    var bestDistance = Int.MAX_VALUE
+    var bestIsItalic = true
+
+    faces.forEachIndexed { index, face ->
+      val distance = kotlin.math.abs((face.weight ?: DEFAULT_WEIGHT) - DEFAULT_WEIGHT)
+      val isItalic = isItalic(face.style)
+
+      val isBetter = distance < bestDistance || (distance == bestDistance && bestIsItalic && !isItalic)
+      if (isBetter) {
+        bestIndex = index
+        bestDistance = distance
+        bestIsItalic = isItalic
+      }
+    }
+
+    return bestIndex
+  }
+}

package/android/src/main/java/expo/modules/font/FontLoaderModule.kt

@@ -8,6 +8,7 @@ import android.os.Build
 import android.util.Log
 import androidx.annotation.RequiresApi
 import com.facebook.react.common.assets.ReactFontManager
+import expo.modules.kotlin.exception.CodedException
 import expo.modules.kotlin.exception.Exceptions
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
@@ -32,24 +33,57 @@ open class FontLoaderModule : Module() {
       return@Function getLoadedFonts()
     }
 
-    AsyncFunction("loadAsync") { fontFamilyName: String, localUri: String ->
-      val context = appContext.reactContext ?: throw Exceptions.ReactContextLost()
+    fun registerTypeface(fontFamilyName: String, typeface: Typeface) {
+      ReactFontManager.getInstance().addCustomFont(fontFamilyName, typeface)
+      loadedFonts = getLoadedFonts().toMutableSet().apply { add(fontFamilyName) }.toList()
+    }
 
-      // TODO(nikki): make sure path is in experience's scope
-      val source = FontSource.resolve(localUri, fontFamilyName, context)
+    AsyncFunction("loadAsync") { fontFamilyName: String, localUri: String ->
+      registerTypeface(fontFamilyName, loadSingleFaceTypeface(fontFamilyName, localUri))
+    }
 
-      val instanced = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-        buildVariableWeightTypeface(fontFamilyName, source)
-      } else {
-        // This needs `android.graphics.fonts`, which API 29 added. Before API 29, every weight
-        // comes from the one weight that Android loads, and Android synthesizes bold from it.
-        null
+    AsyncFunction("loadFontFamilyAsync") { fontFamilyName: String, faces: List<FontFaceRecord> ->
+      if (faces.isEmpty()) {
+        throw CodedException(
+          "Could not load font family '$fontFamilyName' because 'faces' is empty. Pass at " +
+            "least one face with a 'localUri' pointing to a font file."
+        )
       }
-      val typeface = instanced ?: source.load()
+      FontFamilyFaces.assertWeightsInRange(fontFamilyName, faces)
 
-      ReactFontManager.getInstance().addCustomFont(fontFamilyName, typeface)
-      loadedFonts = getLoadedFonts().toMutableSet().apply { add(fontFamilyName) }.toList()
+      registerTypeface(fontFamilyName, familyTypeface(fontFamilyName, faces))
+    }
+  }
+
+  // Below API 29, `android.graphics.fonts.FontFamily` doesn't exist, so only the default face
+  // loads and Android synthesizes bold/italic from it.
+  private fun familyTypeface(fontFamilyName: String, faces: List<FontFaceRecord>): Typeface {
+    val face = faces.first()
+    if (faces.size == 1 && face.weight == null && face.style == null) {
+      return loadSingleFaceTypeface(fontFamilyName, face.localUri)
+    }
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) {
+      val defaultFace = faces[FontFamilyFaces.defaultFaceIndex(faces)]
+      return loadSingleFaceTypeface(fontFamilyName, defaultFace.localUri)
     }
+    return buildMultiFaceTypeface(fontFamilyName, faces)
+  }
+
+  private fun loadSingleFaceTypeface(fontFamilyName: String, localUri: String): Typeface {
+    val source = FontSource.resolve(localUri, fontFamilyName, context)
+
+    val instanced = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      buildVariableWeightTypeface(fontFamilyName, source)
+    } else {
+      null
+    }
+    return instanced ?: source.load()
+  }
+
+  @RequiresApi(Build.VERSION_CODES.Q)
+  private fun buildMultiFaceTypeface(fontFamilyName: String, faces: List<FontFaceRecord>): Typeface {
+    val sources = faces.map { FontSource.resolve(it.localUri, fontFamilyName, context) }
+    return MultiFaceTypeface.build(fontFamilyName, faces, sources)
   }
 
   /**

package/android/src/main/java/expo/modules/font/FontLoaderRecords.kt

@@ -0,0 +1,17 @@
+package expo.modules.font
+
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.types.OptimizedRecord
+
+@OptimizedRecord
+data class FontFaceRecord(
+  @Field
+  val localUri: String = "",
+
+  @Field
+  val weight: Int? = null,
+
+  @Field
+  val style: String? = null
+) : Record

package/android/src/main/java/expo/modules/font/FontSource.kt

@@ -4,7 +4,10 @@ package expo.modules.font
 
 import android.content.Context
 import android.graphics.Typeface
+import android.graphics.fonts.Font
 import android.net.Uri
+import android.os.Build
+import androidx.annotation.RequiresApi
 import expo.modules.kotlin.exception.CodedException
 import java.io.File
 import java.io.FileInputStream
@@ -35,6 +38,10 @@ internal sealed interface FontSource {
    */
   fun readForInstancing(): ByteBuffer?
 
+  // Reads the file itself; no [readForInstancing] buffer needed.
+  @RequiresApi(Build.VERSION_CODES.Q)
+  fun newFontBuilder(): Font.Builder
+
   class Asset(private val path: String, private val context: Context) : FontSource {
     override fun load(): Typeface =
       Typeface.createFromAsset(context.assets, path)
@@ -49,6 +56,9 @@ internal sealed interface FontSource {
 
         readWholeFont(header, input)
       }
+
+    @RequiresApi(Build.VERSION_CODES.Q)
+    override fun newFontBuilder(): Font.Builder = Font.Builder(context.assets, path)
   }
 
   class LocalFile(private val file: File) : FontSource {
@@ -60,6 +70,9 @@ internal sealed interface FontSource {
       }
       return mapped.takeIf { FontVariationAxes.declaresVariations(it) }
     }
+
+    @RequiresApi(Build.VERSION_CODES.Q)
+    override fun newFontBuilder(): Font.Builder = Font.Builder(file)
   }
 
   companion object {

package/android/src/main/java/expo/modules/font/MultiFaceTypeface.kt

@@ -0,0 +1,130 @@
+// Copyright 2015-present 650 Industries. All rights reserved.
+
+package expo.modules.font
+
+import android.graphics.Typeface
+import android.graphics.fonts.Font
+import android.graphics.fonts.FontFamily
+import android.graphics.fonts.FontStyle
+import android.os.Build
+import androidx.annotation.RequiresApi
+import expo.modules.kotlin.exception.CodedException
+import java.io.IOException
+import java.nio.ByteBuffer
+import kotlin.math.abs
+
+/**
+ * Builds one [Typeface] from the faces of a font family. `fontWeight` and `fontStyle` then select
+ * between them.
+ *
+ * A face that is a variable font keeps its `wght` axis: a declared weight pins the face to that
+ * weight's instance, and a face with no declared weight contributes one instance per weight that
+ * `fontWeight` can request. Without the instances, every weight would render the file's default.
+ */
+@RequiresApi(Build.VERSION_CODES.Q)
+internal object MultiFaceTypeface {
+  /** [faces] and [sources] pair up by index. */
+  fun build(
+    fontFamilyName: String,
+    faces: List<FontFaceRecord>,
+    sources: List<FontSource>
+  ): Typeface {
+    val builtFaces = faces.zip(sources).map { (face, source) ->
+      try {
+        buildFace(face, source)
+      } catch (e: IOException) {
+        throw CodedException(
+          "Could not read font face '${face.localUri}' for family '$fontFamilyName'. The file " +
+            "may be corrupted or in a format Android can't parse. Open it in a font editor to " +
+            "check it, or replace it with a valid .ttf or .otf file.",
+          e
+        )
+      }
+    }
+
+    // The duplicate check runs on each face's primary font. The extra instances of a variable
+    // face are not declared by the caller, so a collision there is resolved below, not an error.
+    val resolvedFaces = faces.zip(builtFaces).map { (face, built) ->
+      FontFaceRecord(
+        localUri = face.localUri,
+        weight = built.primary.style.weight,
+        style = if (built.primary.style.slant == FontStyle.FONT_SLANT_ITALIC) "italic" else "normal"
+      )
+    }
+    FontFamilyFaces.assertNoDuplicateFaces(fontFamilyName, resolvedFaces)
+
+    // Primaries first: a weight and slant a face declares wins over another face's instance of it.
+    val seenStyles = mutableSetOf<Pair<Int, Int>>()
+    val fonts = mutableListOf<Font>()
+    for (built in builtFaces) {
+      seenStyles.add(built.primary.styleKey)
+      fonts.add(built.primary)
+    }
+    for (built in builtFaces) {
+      for (instance in built.instances) {
+        if (seenStyles.add(instance.styleKey)) {
+          fonts.add(instance)
+        }
+      }
+    }
+
+    val familyBuilder = FontFamily.Builder(fonts[0])
+    for (font in fonts.drop(1)) {
+      try {
+        familyBuilder.addFont(font)
+      } catch (e: IllegalArgumentException) {
+        throw CodedException(
+          "expo-font couldn't build the font family '$fontFamilyName' because of an internal " +
+            "error. Please report this at https://github.com/expo/expo/issues.",
+          e
+        )
+      }
+    }
+
+    return VariableTypefaces.wrapWithSystemFallback(familyBuilder.build())
+  }
+
+  /**
+   * The fonts one face contributes to the family. [primary] carries the face's declared (or the
+   * file's own) weight and slant; [instances] cover the rest of a variable face's `wght` axis.
+   */
+  private class BuiltFace(val primary: Font, val instances: List<Font> = emptyList())
+
+  private val Font.styleKey: Pair<Int, Int>
+    get() = style.weight to style.slant
+
+  private fun buildFace(face: FontFaceRecord, source: FontSource): BuiltFace {
+    val fontData = source.readForInstancing()
+    val axis = fontData?.let { FontVariationAxes.readWeightAxis(it) }
+    if (axis == null) {
+      val builder = source.newFontBuilder()
+      face.weight?.let { builder.setWeight(it) }
+      face.style?.let { builder.setSlant(slantFor(it)) }
+      return BuiltFace(builder.build())
+    }
+
+    if (face.weight != null) {
+      // A declared weight pins the face to that instance; the clamp keeps the axis ends.
+      return BuiltFace(instance(fontData, face.weight.coerceIn(axis), face.weight, face.style))
+    }
+
+    // `FontFamily.Builder.buildVariableFamily` can't replace the fixed instances here: it exists
+    // only on Android 15 and later, and accepts nothing but one upright font plus at most one
+    // italic one. The instance nearest the regular weight stands in as the face's primary, which
+    // is also the weight the face resolves to today when the whole file is loaded as one font.
+    val instances = FontVariationAxes.weightsFor(axis).map { instance(fontData, it, it, face.style) }
+    val primary = instances.minByOrNull { abs(it.style.weight - FontStyle.FONT_WEIGHT_NORMAL) }!!
+    return BuiltFace(primary, instances)
+  }
+
+  private fun instance(fontData: ByteBuffer, axisWeight: Int, weight: Int, style: String?): Font {
+    val builder = Font.Builder(fontData)
+      .setFontVariationSettings("'wght' $axisWeight")
+      .setWeight(weight)
+    style?.let { builder.setSlant(slantFor(it)) }
+    return builder.build()
+  }
+
+  private fun slantFor(style: String) =
+    if (style == "italic") FontStyle.FONT_SLANT_ITALIC else FontStyle.FONT_SLANT_UPRIGHT
+}

package/android/src/main/java/expo/modules/font/VariableTypefaces.kt

@@ -36,10 +36,13 @@ internal object VariableTypefaces {
       ?: buildInstancedFamily(fontData)
       ?: return null
 
-    return Typeface.CustomFallbackBuilder(family)
+    return wrapWithSystemFallback(family)
+  }
+
+  fun wrapWithSystemFallback(family: FontFamily): Typeface =
+    Typeface.CustomFallbackBuilder(family)
       .setSystemFallback(SYSTEM_FALLBACK)
       .build()
-  }
 
   /**
    * The family that Android builds. It covers the axis continuously, not at nine fixed steps. It

package/build/ExpoFontLoader.d.ts

@@ -1,7 +1,13 @@
 import type { ServerFontResourceDescriptor, UnloadFontOptions } from './Font.types';
+export type NativeFontFace = {
+    localUri: string;
+    weight?: number;
+    style?: 'normal' | 'italic';
+};
 export type ExpoFontLoaderModule = {
     getLoadedFonts: () => string[];
     loadAsync: (fontFamilyName: string, localUriOrWebAsset: any) => Promise<void>;
+    loadFontFamilyAsync: (fontFamilyName: string, faces: NativeFontFace[]) => Promise<void>;
     unloadAllAsync?: () => Promise<void>;
     unloadAsync?: (fontFamilyName: string, options?: UnloadFontOptions) => Promise<void>;
     isLoaded?: (fontFamilyName: string, options?: UnloadFontOptions) => boolean;

package/build/ExpoFontLoader.js

@@ -5,6 +5,9 @@ const m = typeof window === 'undefined' ? {
     },
     loadAsync () {
         return Promise.resolve();
+    },
+    loadFontFamilyAsync () {
+        return Promise.resolve();
     }
 } : requireNativeModule('ExpoFontLoader');
 export default m;

package/build/ExpoFontLoader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ExpoFontLoader.ts"],"sourcesContent":[null],"names":["requireNativeModule","m","window","getLoadedFonts","loadAsync","Promise","resolve"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,oBAAoB;AAexD,MAAMC,IACJ,OAAOC,WAAW,cAEd;IACEC;QACE,OAAO,EAAE;IACX;IACAC;QACE,OAAOC,QAAQC,OAAO;IACxB;AACF,IACAN,oBAAoB;AAC1B,eAAeC,EAAE"}
+{"version":3,"sources":["ExpoFontLoader.ts"],"sourcesContent":[null],"names":["requireNativeModule","m","window","getLoadedFonts","loadAsync","Promise","resolve","loadFontFamilyAsync"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,oBAAoB;AAuBxD,MAAMC,IACJ,OAAOC,WAAW,cAEd;IACEC;QACE,OAAO,EAAE;IACX;IACAC;QACE,OAAOC,QAAQC,OAAO;IACxB;IACAC;QACE,OAAOF,QAAQC,OAAO;IACxB;AACF,IACAN,oBAAoB;AAC1B,eAAeC,EAAE"}

package/build/ExpoFontLoader.web.d.ts

@@ -1,6 +1,9 @@
 import type { ExpoFontLoaderModule } from './ExpoFontLoader';
-import { type FontResource } from './Font.types';
-declare const ExpoFontLoader: Required<ExpoFontLoaderModule>;
+import type { UnloadFontOptions } from './Font';
+import type { FontResource } from './Font.types';
+export declare function _matchesFontFaceOptions(rule: Pick<CSSFontFaceRule, 'style'>, fontFamilyName: string, options?: UnloadFontOptions): boolean;
+export declare function _fontFaceRuleSrcMatches(rule: Pick<CSSFontFaceRule, 'style'>, uri: string | number | undefined): boolean;
+declare const ExpoFontLoader: Required<Omit<ExpoFontLoaderModule, 'loadFontFamilyAsync'>>;
 declare const _default: typeof ExpoFontLoader;
 export default _default;
 export declare function _createWebFontTemplate(fontFamily: string, resource: FontResource): string;

package/build/ExpoFontLoader.web.js

@@ -1,6 +1,4 @@
 import { CodedError, registerWebModule } from 'expo-modules-core';
-import FontObserver from 'fontfaceobserver';
-import { FontDisplay } from './Font.types';
 import { addServerFont, getLoadedServerFonts, getServerResourceDescriptors as readServerResourceDescriptors, isServerFontLoaded } from './serverContext';
 function getFontFaceStyleSheet() {
     if (typeof window === 'undefined') {
@@ -44,11 +42,56 @@ function normalizeFontFamilyName(fontFamily) {
     }
     return trimmed;
 }
+function canonicalCssWeight(weight) {
+    if (weight == null || weight === '') {
+        return undefined;
+    }
+    if (typeof weight === 'number') {
+        return Number.isFinite(weight) ? weight : undefined;
+    }
+    const lower = weight.trim().toLowerCase();
+    if (lower === 'normal') {
+        return 400;
+    }
+    if (lower === 'bold') {
+        return 700;
+    }
+    const numeric = Number(lower);
+    return Number.isFinite(numeric) ? numeric : lower;
+}
+// jsdom doesn't implement `CSSFontFaceRule`, so tests call this directly with plain `{ style }` objects.
+export function _matchesFontFaceOptions(rule, fontFamilyName, options) {
+    if (normalizeFontFamilyName(rule.style.fontFamily) !== fontFamilyName) {
+        return false;
+    }
+    if (options?.display && options.display !== rule.style.fontDisplay) {
+        return false;
+    }
+    if (options?.weight != null && canonicalCssWeight(options.weight) !== canonicalCssWeight(rule.style.fontWeight)) {
+        return false;
+    }
+    if (options?.style != null && options.style !== rule.style.fontStyle) {
+        return false;
+    }
+    return true;
+}
 function getFontFaceRulesMatchingResource(fontFamilyName, options) {
-    const rules = getFontFaceRules();
-    return rules.filter(({ rule })=>{
-        return normalizeFontFamilyName(rule.style.fontFamily) === fontFamilyName && (options && options.display ? options.display === rule.style.fontDisplay : true);
-    });
+    return getFontFaceRules().filter(({ rule })=>_matchesFontFaceOptions(rule, fontFamilyName, options));
+}
+export function _fontFaceRuleSrcMatches(rule, uri) {
+    const src = rule.style.getPropertyValue('src');
+    const match = src.match(/url\((['"]?)([^'")]*)\1\)/);
+    if (!match) {
+        // Every rule carries a `url(...)`; an unreadable `src` means the engine doesn't expose it.
+        return true;
+    }
+    let ruleUri = match[2] ?? '';
+    try {
+        ruleUri = decodeURIComponent(ruleUri);
+    } catch  {
+    // decodeURIComponent throws on malformed percent-encoding; compare the raw value instead.
+    }
+    return ruleUri === String(uri);
 }
 const ExpoFontLoader = {
     async unloadAllAsync () {
@@ -62,7 +105,11 @@ const ExpoFontLoader = {
         const sheet = getFontFaceStyleSheet();
         if (!sheet) return;
         const items = getFontFaceRulesMatchingResource(fontFamilyName, options);
-        for (const item of items.reverse()){
+        // Descending: `deleteRule` shifts every later index down by one.
+        const descending = [
+            ...items
+        ].sort((a, b)=>b.index - a.index);
+        for (const item of descending){
             sheet.deleteRule(item.index);
         }
     },
@@ -86,8 +133,16 @@ const ExpoFontLoader = {
         if (typeof window === 'undefined') {
             return getLoadedServerFonts();
         }
-        const rules = getFontFaceRules();
-        return rules.map(({ rule })=>normalizeFontFamilyName(rule.style.fontFamily));
+        const seen = new Set();
+        const families = [];
+        for (const { rule } of getFontFaceRules()){
+            const name = normalizeFontFamilyName(rule.style.fontFamily);
+            if (!seen.has(name)) {
+                seen.add(name);
+                families.push(name);
+            }
+        }
+        return families;
     },
     isLoaded (fontFamilyName, resource = {}) {
         if (typeof window === 'undefined') {
@@ -117,19 +172,39 @@ const ExpoFontLoader = {
         }
         const style = getStyleElement();
         document.head.appendChild(style);
-        const res = getFontFaceRulesMatchingResource(fontFamilyName, resource);
-        if (!res.length) {
+        const alreadyLoaded = getFontFaceRulesMatchingResource(fontFamilyName, resource).some(({ rule })=>_fontFaceRuleSrcMatches(rule, resource.uri));
+        if (!alreadyLoaded) {
             _createWebStyle(fontFamilyName, resource);
         }
-        if (!isFontLoadingListenerSupported()) {
+        if (typeof document.fonts?.load !== 'function') {
             return Promise.resolve();
         }
-        return new FontObserver(fontFamilyName, {
-            // @ts-expect-error: TODO(@kitten): Typings indicate that the polyfill may not support this?
-            display: resource.display
-        }).load(resource.testString ?? null, 12000);
+        // Resolve when the browser has fetched the file, so text renders with it on resolution. The
+        // face is selected with the `font` shorthand syntax; skip a descriptor the CSS sanitization
+        // in `_createWebFontTemplate` drops, and a range weight, which the shorthand can't express.
+        let shorthand = '';
+        if (typeof resource.style === 'string' && CSS_IDENT_RE.test(resource.style)) {
+            shorthand += `${resource.style} `;
+        }
+        if (typeof resource.weight === 'number' && Number.isFinite(resource.weight) || typeof resource.weight === 'string' && (CSS_IDENT_RE.test(resource.weight) || CSS_WEIGHT_NUMERIC_RE.test(resource.weight) && !resource.weight.includes(' '))) {
+            shorthand += `${resource.weight} `;
+        }
+        return withLoadTimeout(document.fonts.load(`${shorthand}1em ${JSON.stringify(fontFamilyName)}`), fontFamilyName);
     }
 };
+const FONT_LOAD_TIMEOUT_MS = 12000;
+function withLoadTimeout(loading, fontFamilyName) {
+    let timer;
+    const timingOut = new Promise((_resolve, reject)=>{
+        timer = setTimeout(()=>{
+            reject(new CodedError('ERR_DOWNLOAD', `Fetching the font family "${fontFamilyName}" timed out after ${FONT_LOAD_TIMEOUT_MS}ms. ` + `Check that the font URL is reachable and served with CORS headers.`));
+        }, FONT_LOAD_TIMEOUT_MS);
+    });
+    return Promise.race([
+        loading,
+        timingOut
+    ]).finally(()=>clearTimeout(timer)).then(()=>undefined);
+}
 const isServer = process.env.EXPO_OS === 'web' && typeof window === 'undefined';
 function createExpoFontLoader() {
     return ExpoFontLoader;
@@ -149,9 +224,26 @@ function getStyleElement() {
     return styleElement;
 }
 const CSS_IDENT_RE = /^[a-zA-Z_-][\w-]*$/;
+// CSS font weights run from 1 to 1000, alone or as a variable-font range ('100 900').
+// No leading zero: '0400' is not a weight.
+const CSS_WEIGHT_NUMERIC_RE = /^(1000|[1-9]\d{0,2})( (1000|[1-9]\d{0,2}))?$/;
 export function _createWebFontTemplate(fontFamily, resource) {
-    const display = typeof resource.display === 'string' && CSS_IDENT_RE.test(resource.display) ? resource.display : FontDisplay.AUTO;
-    return `@font-face{font-family:${JSON.stringify(fontFamily)};src:url(${JSON.stringify(resource.uri)});font-display:${display}}`;
+    const declarations = [
+        `font-family:${JSON.stringify(fontFamily)}`,
+        `src:url(${JSON.stringify(resource.uri)})`
+    ];
+    if (typeof resource.display === 'string' && CSS_IDENT_RE.test(resource.display)) {
+        declarations.push(`font-display:${resource.display}`);
+    }
+    if (typeof resource.weight === 'number' && Number.isFinite(resource.weight)) {
+        declarations.push(`font-weight:${resource.weight}`);
+    } else if (typeof resource.weight === 'string' && (CSS_IDENT_RE.test(resource.weight) || CSS_WEIGHT_NUMERIC_RE.test(resource.weight))) {
+        declarations.push(`font-weight:${resource.weight}`);
+    }
+    if (typeof resource.style === 'string' && CSS_IDENT_RE.test(resource.style)) {
+        declarations.push(`font-style:${resource.style}`);
+    }
+    return `@font-face{${declarations.join(';')}}`;
 }
 function _createWebStyle(fontFamily, resource) {
     const fontStyle = _createWebFontTemplate(fontFamily, resource);
@@ -167,16 +259,5 @@ function _createWebStyle(fontFamily, resource) {
     }
     return styleElement;
 }
-function isFontLoadingListenerSupported() {
-    const { userAgent } = window.navigator;
-    // WebKit is broken https://github.com/bramstein/fontfaceobserver/issues/95
-    const isIOS = !!userAgent.match(/iPad|iPhone/i);
-    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-    // Edge is broken https://github.com/bramstein/fontfaceobserver/issues/109#issuecomment-333356795
-    const isEdge = userAgent.includes('Edge');
-    // Internet Explorer
-    const isIE = userAgent.includes('Trident');
-    return !isSafari && !isIOS && !isEdge && !isIE;
-}
 
 //# sourceMappingURL=ExpoFontLoader.web.js.map