Custom fonts won't load on tvOS apps - Unrecognized font family

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS High Sierra 10.13.2 Node: 8.9.4 Yarn: Not Found npm: 5.6.0 Watchman: 4.9.0 Xcode: Xcode 9.2 Build version 9C40b Android Studio: Not Found

Packages: (wanted => installed) react: 16.2.0 => 16.2.0 react-native: 0.53.2 => 0.53.2

Steps to Reproduce

1. Create new project using `react-native init AwesomeProject
2. Create folder: resources/fonts
3. Add rnpm settings to package.json to link fonts:

  "rnpm": {
    "assets": [
      "resources/fonts"
    ]
  },

1. Download and add a custom font to resources/fonts (I used BioRhymeExpanded-Regular.ttf in this example - available at https://fonts.google.com/specimen/BioRhyme+Expanded
2. run react-native link
3. Modify App.js to utilize new font (Lines 48-53):

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontFamily: 'BioRhymeExpanded-Regular'
  },

1. Open XCode and run on iOS Simulator and on tvOS simulator

Expected Behavior

We should see the “Welcome to React Native” heading rendered using the new font in both iOS and tvOS apps.

Actual Behavior

We get Unrecognized font family 'BioRhymeExpanded-Regular' when running tvOS (on either AppleTV 4k or AppleTV 4k at 1080p). iOS apps display the correct/expected output.

Working iOS

Busted tvOS

Essentially, tvOS apps are not loading custom fonts. Additionally, noticed that font files did not have tvOS targets, but correcting this had no effect (even after clean, shutdown and restart of packager, and rebuild).

Reproducible Demo

https://gist.github.com/natestone/69b04c8725ef39893c3c5d1a7ca9f7f7

[psegalen]

I have a custom font on tvOS, I remember running in some issues but finally made it work. Check the following:

• The fonts are listed in your Info.plist “Fonts provided by application” section;
• Your tvOS target is correctly using this Info.plist file; (I think it was my problem)
• The tvOS target config “Build Phases” tab has your *.ttf files added in the “Copy Bundle Resources” section.

[natestone]

Overall, the solution posted by @psegalen is correct (and thank you for pointing me in the right direction). It was the second issue listed that was causing the problem (tvOS target using the correct info.plist file).

For reference to those who also have this issue, it turns out that the react native system does not make the -tvOS and -tvOSTests folders from the ios/ directory appear in XCode. However, it does create these folders and assigns the tvOS targets to use the Info.plist files in these directories. This was quite confusing as I kept checking the standard folder Info.plist as applying to both targets. This does not change the “build setting” in XCode, however. It just results in the file being added to the “copy resources” section of the “build phases” section in XCode.

To fix, you need to create groups matching the names of your -tvOS Targets. These folders already exist on the file system, but not in the XCode workspace:

I created two “groups without folders” matching the ones from the file system that were not showing. Note: if you create folders it will fail due to name collisions.

Then I dragged the Info.plist files from the file system to the new groups in the XCode workspace and assigned them to the correct targets.

Now the Info.plist files for the tvOS targets can be properly edited and maintained through the XCode interface. So, I’m up and running.

However, I’m not sure if it’s appropriate to close the issue as this is actually a workaround. It seems to me that this issue and the react-native link function should properly handle tvOS targets. I’ll try and fix it in the react-native code, but that may be out of my wheelhouse.

Let me know if others think this should be closed due to a workaround being found.