SDK 37: Unrecognized font family

[ouihealth]

Please provide the following:

1. SDK Version: 37
2. Platforms(Android/iOS/web/all): ios (simulator), android (pixel 4)

My font loading / rendering code was working in SDK 36. Upon upgrade to SDK 37 I started getting Unrecognized font family errors for all of my custom ttf fonts when rendering <Text style={{ fontFamily: 'custom-font' }} />. Font.loadAsync` does not throw an error.

on Android, the fonts are not rendering properly, but i’m not getting the “Unrecognized font family” error

[ermalshkullaku]

Dealing with the same issue on my end - looks like expo-fonts package may need some updating/not compatible with this latest SDK.

[kar]

Same issue. But I’m getting it on the font ‘material-community’.

[soukupl]

This is related to - [Font] Expo cannot load a font due to multiple versions of `expo-font` installed · Issue #5507 · expo/expo · GitHub

Quick and dirty fix is adding “postinstall”: “rm -rf ./node_modules/expo/node_modules/expo-font/” to your “scripts” in package.json (or run rm -rf ./node_modules/expo/node_modules/expo-font/ manualy after npm install).

[ouihealth]

The fix that worked for me: Unrecognized font family on SDK37 · Issue #7565 · expo/expo · GitHub

[ermalshkullaku]

The link you referenced fixed it for me, thank you! Bump expo-cli version and have only ['svg'] under sourceExt in app.json like so:

  "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": ["svg"]
    },

[aeife]

I have the same issue with our custom font. Removing expo-font in expos node_modules folder fixes the issue for now but that surely is no permanent solution.

I also do not have a metro.config.js file in use, so packagerOpts does not fix it in my case. Can anyone from the expo team respond please why such an issue appears with SDK37?

[bookplay]

I still with the same problem.

I did bumped expo-cli to lastest version (3.17.11)
I do not use svg to do the reported fix but I did to try with no success.

=/

[notbrent]

hi all! it is not very useful to say that you have this issue without providing a reproducible example. initialize a new app and notice that it will work. this means that there is something in the config in your app. so, please provide a reproducible example and we will happily look into why this is happpening for you

[notbrent]

hi everybody! i looked into this based off of a friendly person on twitter providing me with some info, and it seems that npm does not do a very good job of deduping modules with the same version in node_modules in some cases. so, i updated expo-cli so that when you run expo upgrade it will delete your package-lock.json and node_modules, then reinstall everything, as you would have to do manually to get this to work anyways.

so, i would suggest the following:

• if you have already upgraded and not reverted, just install the latest expo-cli with npm i -g expo-cli and then run expo upgrade in your project again - this is a useful trick to ensure that all of your packages are using the correct version, you can run it as many times as you want on the same project and if you’re already on the latest version it will just reinstall whatever is needed for that version.
• if you are still on an old sdk version, be sure to install the latest expo-cli with npm i -g expo-cli and run expo upgrade as usual

[ermalshkullaku]

Thank you for the quick turnaround!

[sbue]

I am still seeing this issue while using expo-cli version 3.18.6

I’ve tried every solution I’ve found so far

Among the solutions, I added the following to my app.json (and followed this guide: GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would in a Web application.)

  "packagerOpts": {
    "config": "metro.config.js",
    "sourceExts": ["svg"]
  },

I also have run

rm -rf node_modules
npm cache clean --force
rm -rf .expo
rm package-lock.json
npm install

I also tried
rm -rf ./node_modules/expo/node_modules/expo-font/ but am not seeing the directory node_modules inside of the expo folder.

[badbod99]

Same issue here. Tried all above solutions. Was working on SDK 36, but no longer working on 37.

[cjslimm55]

The upgrade worked for me, thanks!

[gabrieljoelc]

I’ve been having this issue since 36 only on iOS (Android works fine). Nothing changed after upgrading to 37.

After reading all of the GH issues and SO posts that everyone here has read, I stumbled on this GH issue comment that says it’s actually “working” but still throwing the error. Sure enough, I tapped the dismiss error button on the RN error and I see it is using the custom font!

Not sure what that means yet cause I obviously don’t want that error…

[notbrent]

your best bet on getting help is to post an issue with a reproducible example, if you can do that someone will have a solution for you in no time