Custom Fonts do not load like on other platforms

[Tatious]

Environment

react-native-cli: 2.0.1 react-native: 0.60.6 -- (empty) -- react-native-windows@0.60.0-vnext.32 node: v10.16.3 npm: 6.9.0 yarn: 1.17.3

• SDK Version(s): 10.0.18362.0

• Target Device(s): Desktop

• Visual Studio Version: Visual Studio 2017

• Build Configuration: Debug

Steps to Reproduce

This is the expected way to import a font for use:

export const MY_FONT= 'MyFont-Semilight';

However, that does not work, but as discovered in past github issue threads for RNW, this solution does work:

export const MY_FONT=  'Assets/Fonts/MyFont-Semilight.tff#FontFamilyName';

This leads the multi-platform solution to be as follows, which is less than ideal given the desire for as few platform checks as possible.

export const MY_FONT= Platform.OS === 'windows' ? 'Assets/Fonts/MyFont-Semilight.tff#FontFamilyName' : 'MyFont-Semilight';

I might have missed something, but I have yet to find some way to load fonts like for other platforms. Any help in making this possible is greatly appreciated.

Expected Behavior

The font does load.

Actual Behavior

The font doesn't load. Workaround shown above.

Additional context

https://github.com/microsoft/react-native-windows/issues/652 https://github.com/microsoft/react-native-windows/issues/1254

Adam Gorman(adamgor) Austin Beaulieu(aubeauli)

[namrog84]

Add Partner(Xbox).

Additional context:

First part, is linking for assets doesn't work in RNW e.g. package.json has

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

That should be able to fix up some of the issue.

The second issue is how we have to define fonts MyFont-Semilight.tff#FontFamilyName vs MyFont-Semilight

We should be able to specific fonts the same way on all platforms.
Or at least it should default to something appropriate if none is specified for override.

[chrisglein]

Rnpm is deprecated, can you try bringing in the assets with a require?

[acoates-ms]

https://github.com/react-native-community/cli/pull/790 - This is the removal of rnpm as a way to do assets.

I'm not 100% sure what the current way to do custom fonts is supposed to be. I think the correct answer should be the same as images which would be something like: let font = require('./font/myfont.ttf');

But that would only work if there was a one to one mapping of font file to family, which isn't the case. -- which is why I think this is currently somewhat manual even on the other platforms.

[acoates-ms]

Ok, looks like the new way is through react-native-config.js. Its likely that that doesn't work a we haven't dont any of the autolinking work.

I think auto linking should probably see font files in the assets folder, and automatically register them as custom fonts. -- which is also an API we haven't written yet.

Article on the current story for iOS/Android: https://medium.com/ronald-james-group/how-to-use-custom-fonts-in-react-native-1dc8c4993ad9

[chrisglein]

@acoates-ms So is this something we expect to be fixed with autolinking? (tracked by #2853)

[acoates-ms]

Yes - it looks like there a bunch of different kinds of things which can get auto linked -- including fonts.

[ghost]

Hi @chrisglein this is Hamid from Mashreq, we are currently on rnw v0.62, but we are still facing the issue. Any update on it?

[chrisglein]

Hi @chrisglein this is Hamid from Mashreq, we are currently on rnw v0.62, but we are still facing the issue. Any update on it?

There was some idea that this would be part of our move to implement autolinking, which we did in RNW 0.63. I don't believe any explicit validation of that was done, so this issue currently sits on our backlog. And if this is affected by the new project infrastructure 0.63, it likely would require taking the 0.63 app template, not just bumping the package version and keeping an app template from a previous version.

Can you provide more detail about how you're trying to include fonts today?

[k00p]

Hello as well @chrisglein - I am still trying to figure out if it's my approach, but following the instructions for including react-native-vector-icons for react-native-windows in their README is not working in RNW 0.63. Any assistance here - like linking docs, issues, or code - would be great, understood if that's not going to happen as react-native-vector-icons isn't in the community support list.

Could be a documentation issue on their behalf, but I've tried accessing included images and HTML files in the project solution assets and not been able to bring them up in the app either.

Edit: Went through the linking steps as inferred from the Medium article to no avail:

• npx react-native autolink-windows - did not work
• npx react-native link - did not work
• npx react-native run-windows - did not work

This is after adding the TTF font to 'Assets' from the react-native-vector-icons folder as mentioned in the document.

It seems like I am missing something obvious.

[k00p]

Oh my. It was super easy once I found it. Here's how I got it to work: Starting with a project that was generated exactly according to the RNW documentation for version 0.63, including using the react-native template, and the options for WinUI/cpp UWP...

1. From the node_modules\react-native-vector-icons\Fonts folder, copy the font .ttf file that you need to the windows\<project name>\Assets\ directory.
2. In the Visual Studio (Version 16.8.3) project in the windows\ directory, right click, the 'Assets' folder and choose Add -> Existing Item.
3. Pick the font file that you added to the Assets directory.
4. Rebuild your project - I did this via VS

And with that, it worked. I imagine that there could be a piece somewhere to make it work another way. I'm not sure why this works and another way didn't. Hopefully this helps someone.

[ghost]

Hi @chrisglein this is Hamid from Mashreq, we are currently on rnw v0.62, but we are still facing the issue. Any update on it?

There was some idea that this would be part of our move to implement autolinking, which we did in RNW 0.63. I don't believe any explicit validation of that was done, so this issue currently sits on our backlog. And if this is affected by the new project infrastructure 0.63, it likely would require taking the 0.63 app template, not just bumping the package version and keeping an app template from a previous version.

Can you provide more detail about how you're trying to include fonts today?

We are implementing custom fonts the same way its mentioned in this issue. Manually adding the custom Font

[crstnmac]

Oh my. It was super easy once I found it. Here's how I got it to work: Starting with a project that was generated exactly according to the RNW documentation for version 0.63, including using the react-native template, and the options for WinUI/cpp UWP...

1. From the node_modules\react-native-vector-icons\Fonts folder, copy the font .ttf file that you need to the windows\<project name>\Assets\ directory.
2. In the Visual Studio (Version 16.8.3) project in the windows\ directory, right click, the 'Assets' folder and choose Add -> Existing Item.
3. Pick the font file that you added to the Assets directory.
4. Rebuild your project - I did this via VS

And with that, it worked. I imagine that there could be a piece somewhere to make it work another way. I'm not sure why this works and another way didn't. Hopefully this helps someone.

 "react": "17.0.1",
 "react-native": "0.64.0",
 "react-native-tailwindcss": "^1.1.11",
 "react-native-windows": "^0.64.0-0"

Visual Studio version: 16.11.0 Downloaded fonts from Manrope I followed the above. I was using tailwindcss inside react-native-windows using react-native-tailwindcss npm package Did lot of tinkering and then, I added the code below to my tailwind.config.js file and fonts worked 😍😍

fontFamily: {
      manropeBold: ['Manrope-Bold.ttf#Manrope'],
      manropeExtraBold: ['Manrope-ExtraBold.ttf#Manrope'],
      manropeExtraLight: ['Manrope-ExtraLight.ttf#Manrope'],
      manropeLight: ['Manrope-Light.ttf#Manrope'],
      manropeMedium: ['Manrope-Medium.ttf#Manrope'],
      manropeRegular: ['Manrope-Regular.ttf#Manrope'],
      manropeSemiBold: ['Manrope-SemiBold.ttf#Manrope']
}

🚀🚀🚀🚀

[IsuruLakshan97]

how to add fontawesome 5 icons to react native windows?? there is no ttf file for fontawesome 5 right?? so how can i add icons from fontawesome 5?? can anybody help?