[Text] The IBMPlexSans-Regular font is not being successfully applied to carbon Text components

[matthewscottconroy]

What was observed

When using the Text component import {Text} from '@carbon/react-native'; the IBMPlexSans-Regular font is not being applied to the text of the component.

The inspector in the simulator reports that the font is IBMPlexSans-Regular, but in the console the error message Unrecognized font family 'IBMPlexSans-Regular' is printed, and if you compare the capital letter I (as in I am going to the store) and the lowercase L (as in love) on the application screen to the letters contained in the font file inside the project at './node_modules/@carbon/react-native/src/assets/fonts/IBMPlexSans-Regular.ttf' you can see that the capital 'I' in the application is missing the top and bottom serifs and that the lowercase 'L' (as in love) in the app is missing its curved tail.

How to replicate

Create a new React Native starter project and add the necessary carbon dependencies. Import the @carbon/react-native text component and add an element to the screen and notice the discrepency between the letters and those in the font file contained at './node_modules/@carbon/react-native/src/assets/fonts/IBMPlexSans-Regular.ttf'

Here is a screenshot of the font file letters being displayed from the font file in the project:

And here is a screenshot of the device in simulator with the font not being applied and the console error message:

And here is a screenshot of the Inspector falsely reporting that the font is IBM Plex (so that you are aware the Inspector can't be relied on to verify the fix:

Additional Notes

The font file itself in the @carbon/react-native library appears to be the correct font. For one reason or another, it doesn't get applied to the component.

The correction can only be verified by directly comparing the fonts. The Inspector is not correctly reporting state.

[dabrad26]

This is usually an issue with the setup. Not the library. In this case you do not have the fonts linked. Assuming you followed the instructions on the README and setup the font link (see 2 and 3 https://github.com/carbon-design-system/carbon-react-native?tab=readme-ov-file#getting-started). You should be able to restart and see them.

I have confirmed they do work as expected with latest following this and see them referenced in the projects. For example in Android and iOS you should see them in their folders.

Android for example: (android/link-assets-manifest.json)

    {
      "path": "node_modules/@carbon/react-native/src/assets/fonts/IBMPlexSans-Regular.ttf",
      "sha1": "b8a09e192ea398424f73d3df900447bc6cb5e23b"
    },...

iOS for example (iOS/PROJECT/info.plist):

<string>IBMPlexSans-Bold.ttf</string>

you should also see some in the xcodeproj file which will be linked on the build and FileReference section

		FE2DDAC42D294B23ADE43AEB /* IBMPlexSans-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "IBMPlexSans-Medium.ttf"; path = "../node_modules/@carbon/react-native/src/assets/fonts/IBMPlexSans-Medium.ttf"; sourceTree = "<group>"; };

[dabrad26]

The example app in this project should also have this setup. You can try with it if you still run into issues. But if you don't see the updates in the android/iOS folders it won't render them.