React-native-windows: Cannot get custom fonts to work in the app

[kcfgl]

This might be related to my other issue posted about certain Styles not having an effect. Using the UIExplorerApp example app again to keep things consistent. I've added attempted to the font - Open Sans Condensed Light (OpenSans-CondLight.ttf) to the project in a number of different places:

• windows/UIExplorerApp/Assets/ and then included it in the project in VS (build action: content, copy to output: do not copy)
• UIExplorer/fonts right alongside the js folder similar to the way I used an images folder in my app
• windows/UIExplorer/Assets/fonts

As for usage in the app, I modified the TextExample.windows.js file referencing the font in a bunch of ways. A few examples below.

<Text style={{fontFamily: 'Open Sans Condensed Light'}}>
          Open Sans Condensed Light
</Text>

<Text style={{fontFamily: '../../../Open-Sans-CondLight.ttf'}}>
          Open Sans Condensed Light
</Text>

<Text style={{fontFamily: 'Open-Sans-CondLight.ttf'}}>
          Open Sans Condensed Light
</Text>

<Text style={{fontFamily: 'Assets/OpenSans-CondLight.ttf'}}>
          Open Sans Condensed Light
</Text>

I must be missing another step in the setup to ensure the font is included in the project and available to the js. The /fonts folder was present when I initially ran react-native windows, in case that matters.

Using latest version of RN and windows plugin.

[kcfgl]

Per @rozele in the discord chat, custom fonts should work, but don't have great support. they should be similar to how image URIs resolve. So I'll try that. And if it works, will post the result here in case others run across similar question.

[rozele]

@kcfgl You'll also need to add a #Font Name, so something like:

style={{fontFamily: 'Assets/OpenSans-CondLight.ttf#Open Sans Condensed Light'}}

[kcfgl]

@rozele OK. I updated just my JS to:
style={{fontFamily: 'Assets/OpenSans-CondLight.ttf#Open Sans Condensed Light'}}

I do have that font in my Assets folder. So that path would be windows/project-name/Assets/OpenSans-CondLight.ttf

I went ahead and rebuilt as well. But sadly, this didn't work.

[rozele]

@kcfgl Did you set the behavior of the file in the Assets folder to "Copy If Newer"? I.e.,

[kcfgl]

@rozele Yeah I tried that. I also tried Copy always, just in case. Neither one pulled in the font. I'll try doing this inside the example app app, too. Maybe I'm missing a setting in my app.

[kcfgl]

@rozele I was not able to get it to work in the Movies app either. Dropped the font in Assets, set it to Copy if newer. But it did not have any effect.

[rozele]

@kcfgl I was just able to use a custom font pretty easily in the ReactWindows Playground project.
1) Copy font into Assets folder
2) Set Copy To Output Directory to "Copy if newer" (as above)
3) Set fontFamily style prop to Assets/font.ttf#Font Name.

Can you open up the .ttf file and ensure you have the correct name for the font after #?

[rozele]

I don't believe there are any custom settings in the Playground project to allow this. It could also be a problem with the font in general. You could try to create a blank UWP app in Visual Studio and create a simple XAML page with a custom font. I did the same to figure out how the feature works, here's my MainPage.xaml:

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Name="Foo"
                   FontFamily="Assets/coneria.ttf#Coneria Script Demo"
                   TextWrapping="Wrap">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus volutpat ligula nec euismod. Aliquam erat volutpat. 
            Vestibulum sagittis sollicitudin mi ut semper. Nunc tempus non nulla eget vulputate. Quisque pulvinar diam risus, semper
            blandit metus euismod quis. Cras eleifend ultricies mauris, sed rhoncus nisl malesuada a. Integer interdum dignissim
            suscipit. Integer a lorem at nibh placerat pellentesque. Aenean id lectus tristique, porttitor quam mattis, maximus dolor. 
            Nulla odio orci, tristique condimentum urna nec, ultricies vestibulum nibh. Nulla rutrum iaculis tellus at efficitur.
            Morbi neque dui, fermentum in dapibus vel, tempus ac ligula. Aliquam dignissim, leo at varius blandit, neque.
        </TextBlock>
    </Grid>
</Page>

[rozele]

obviously just replace the FontFamily there with your font family.

[kcfgl]

Thanks for the detail, @rozele! It could very well be the font. I'll try another one first. Then I'll try your other suggestions and see what happens. Thanks again.

[kcfgl]

It was the font. I used the same font you did and it worked both in my app and a fresh UWP app.

After closer inspection, Open Sans Cond Light is an OpenType font not a TrueType font. I imagine if I dig into the UWP details, TTF is support and OT is not.

Thanks for digging into this one, massively helpful. Looks like I'll be sticking with Segoe!

[gtRfnkN]

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 this thread:

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',
  }

[khanzzirfan]

@gtRfnkN thank you for the above details.
just wondering if the above code is something you loading the fonts at startup of the project? Or is it has to be used in every style property ?

An example implementation would be helpful.