[Web] Error: Couldn't create typeface for

[tlow92]

Hi,

I am currently upgrading from expo 51 to 52 and noticed that after the upgrade no fonts are rendered in my skia canvas due to an error:

Font.js:67 Uncaught (in promise) Error: Couldn't create typeface for Inter-Regular
    at Font.js:67:17
    at async Promise.all (index 0)

I am adding inter fonts like this in all skia components and it used to work just fine

const fonts = useFonts({
  'Inter-Regular': [require('@tamagui/font-inter/otf/Inter-Regular.otf')],
});

After then I'm using them in the styles for paragraph

 Skia.ParagraphBuilder.Make({}, fonts).pushStyle({
  fontFamilies: ['Inter-Regular'],
}).addText(text).build()

It works fine in iOS (even after upgrade to expo 52) but not in Web anymore.

Tested with react-native-skia 1.5.0 and 1.6.0

[wcandillon]

can you share a reproduction?

[tlow92]

@wcandillon Sure, I added a skia paragraph using inter font to a fresh expo 52 create-expo-app.
https://github.com/tlow92/react-native-skia-typeface-issue

Let me know if you need more

[tlow92]

I found something, but I am not sure about the root cause and the consequences (I'm sure resolveAsset is used for a purpose), maybe you can help understanding this.

For some reason
Platform.resolveAsset(typefaceToLoad) is undefined on web
when removing the resolveAsset call and just passing typefaceToLoad typefaces are created and displayed correctly.

react-native-skia/packages/skia/src/skia/core/Font.ts

Line 106 in 42f81f0

return Skia.Data.fromURI(Platform.resolveAsset(typefaceToLoad)).then(

Patch used:

diff --git a/node_modules/@shopify/react-native-skia/lib/module/skia/core/Font.js b/node_modules/@shopify/react-native-skia/lib/module/skia/core/Font.js
index 25896be..58085c1 100644
--- a/node_modules/@shopify/react-native-skia/lib/module/skia/core/Font.js
+++ b/node_modules/@shopify/react-native-skia/lib/module/skia/core/Font.js
@@ -61,7 +61,7 @@ export const listFontFamilies = (fontMgr = Skia.FontMgr.System()) => new Array(f
 const loadTypefaces = typefacesToLoad => {
   const promises = Object.keys(typefacesToLoad).flatMap(familyName => {
     return typefacesToLoad[familyName].map(typefaceToLoad => {
-      return Skia.Data.fromURI(Platform.resolveAsset(typefaceToLoad)).then(data => {
+      return Skia.Data.fromURI(typefaceToLoad).then(data => {
         const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data);
         if (tf === null) {
           throw new Error(`Couldn't create typeface for ${familyName}`);