Custom fonts in react-native-windows

[victorileaf]

Hi,
Im developing an app that supports ios,android and windows as well. I was able to add custom fonts to the react native app by adding fonts to a folder and then adding assets inside package.json. Then running react-native link , i was able to use the custom fonts using fontFamily.

How can i do this react-native-windows? Can someone help me?

[rozele]

Can you paste an example of what the package.json looks like with the font reference? It should be possible to use custom fonts in react-native-windows - #652. I wasn't aware there was a feature in react-native link to move fonts.

[victorileaf]

I followed this tutorial
Adding / Linking fonts for IOS and Android at once

Added the following snippet and executed the command react-native link which worked on android and ios

  "rnpm": {
    "assets": [
      "./app/assets/fonts"
    ]
  },

Is this possible in Windows as well?
if not , can u guide me how to add custom fonts using vs2015?
I'm beginner in visual studio.

[rozele]

Can you review the issue #652 there is some detail in there about how someone got custom fonts working in another app.

[rozele]

We'll need to add support for linking assets for react-native-windows to the react-native link command

[victorileaf]

@rozele I am not sure .. but i think linking works for react-native-windows too. I just asked that question to make sure it works .. or else a better way to make custom fonts works.

PS: I havent had a chance , But will try this in Visual studio and get back!

[TomVanBoghout]

Hi,
I have been trying to get a custom font working but have failed so far.
I've tried the resolution of #652 but with no success. However when I created a blank UWP project as described then it worked.

My steps:

1. Downloaded Montserrat-Regular.ttf from google web fonts.
2. Added the font in the Assets folder of my project.
3. I've put the 'copy to output directory' to 'Copy always'
4. I used it in the code:

montserrat: {
    fontFamily: 'Assets/Montserrat-Regular.ttf#Montserrat',
  },
...
<Text style={styles.cochin} >Blaaah</Text>

Any idea what I might have forgotten?
Besides that, anyone has an idea which fonts are supported? I've tried some of these https://docs.microsoft.com/en-us/windows/uwp/style/fonts but that doesn't really seem to work.

[TomVanBoghout]

I have found the cause of the issue, it seems the solution needs to be recompiled. Afterwards the fonts are displayed correctly.

[kamil7x]

Guys, sorry for digging, but what is status of this?
I would like to use https://github.com/oblador/react-native-vector-icons in my project, and to do it I need to link it :/

[gtRfnkN]

I just commented this in #652, but I think it also fits into this thread since it's newer:

To give an update since I was stuck here as well: it seems that OpenType fonts are (now) supported. I used Source Sans Pro and it worked fine with a few twists. I followed the instructions from #652:

1. put the font files into the windows/%yourprojectname%/Assets folder
2. in the Solutions Explorer go to your project, then Assets and make sure the files are there (drag & drop if they are not)
3. select all files, right click and click Properties. For Copy to Output Directory select copy if newer
4. now you can use them in JS by adding fontFamily: 'Assets/FontFamily-Type.ttf#FontFamily'

Make sure the file name and the font names are correct. For me, the problem was that even though the bold version was called Source Sans Pro Bold, I had to use Source Sans Pro (without Bold) after the #. So the resulting font declaration in JS looks like this:

const sourceSansPro = {
    light: 'Assets/SourceSansPro-Light.ttf#Source Sans Pro',
    regular: 'Assets/SourceSansPro-Regular.ttf#Source Sans Pro',
    semibold: 'Assets/SourceSansPro-SemiBold.ttf#Source Sans Pro',
    bold: 'Assets/SourceSansPro-Bold.ttf#Source Sans Pro',
  }

We are not investing in new features or lower priority bug fixes on vCurrent. The bulk of investment is now in vNext as we prepare to make that the default choice. If this issue is still relevant on the vNext implementation please open a vNext issue. If this issue is of significant severity for a vCurrent app and vNext is not an option, re-open with justification.