Font.loadAsync failing on safari (and mobile safari) in web

[chrisdrackett]

🐛 Bug Report

Environment

Expo CLI 3.8.0 environment info:
System:
OS: macOS 10.15.2
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.14.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
IDEs:
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
npmGlobalPackages:
expo-cli: 3.8.0

Targeting Web

Steps to Reproduce

add

    Font.loadAsync({
      'FontName': require(`./fonts/FontName.ttf`),
    }),

to app and start app

Expected Behavior

fonts load and promise resolves without error

Actual Behavior

Get Unhandled Promise Rejection: Error: 3000ms timeout exceeded

Reproducible Demo

https://snack.expo.io/@chrisdrackett/brave-raspberries

replace the above placeholder with a real font (can't seem to add in a snack) and run on safari.

[gianpaj]

same issue on Firefox. Tested on Firefox Desktop 74.0 on a Mac

Error: 3000ms timeout exceeded 10

This should be added to the isFontLoadingListenerSupported() function:

+    const isFirefox = userAgent.includes('Firefox');
+    return !isSafari && !isIOS && !isEdge && !isFirefox;
-    return !isSafari && !isIOS && !isEdge;

[mauriciord]

Same as @gianpaj

The PR is here 👇🏻: #7420

[marco2216]

Hi, we have a similar issue on web, when using the useFonts hook. This error is returned from the hook.
It only occurs on some platforms; I can reproduce it on latest Chrome for Windows, but not MacOS. It only seems to occur when the tab is being loaded in the background, (e.g. open a page in a new tab, wait for the spinner to disappear, then open the tab). It is very inconsistent though and only happens maybe 1/20 times for me when opening a bunch of tabs at the same time, but some of our users are experiencing this issue often.
Fonts seem to be loaded when looking at the network events.