UWP IoT how to add custom font

Question

I am failing to add a custom font. I followed the steps here which refer to this page but the font is not used.

I've added the fonts to my project

The do appear in my designer views

The font opened in Windows (to verify the name of the font):

But when I refer to them, they are still not used in my app. I've tried the following syntaxes

<TextBlock 
    Grid.Column="1" 
    Text="{x:Bind Text}"
    FontFamily="ms-appx:///Assets/Delphi-Soleto_Lt.ttf#Delphi-Soleto Light"/>

Or as the designer fills it in when I choose the font in designer

<TextBlock 
    Grid.Column="1" 
    Text="{x:Bind Text}"
    FontFamily="Delphi-Soleto Light"/>

Or as this site proposes

<TextBlock 
    Grid.Column="1" 
    Text="{x:Bind Text}"
    FontFamily="/Assets/Delphi-Soleto_Lt.ttf#Delphi-Soleto Light"/>

Help is much appreciated...!

Uploaded GIT repo to:

https://github.com/basprins/CustomFontWinIot

I am trying to use Delphi font in BulletText.xaml :

    <TextBlock 
        Grid.Column="1" 
        Margin="0, 13, 0, 0"
        Style="{StaticResource Normal}" 
        Text="{x:Bind Text}"
        FontFamily="{StaticResource DefaultFont}"/>

I added the BulletText control to the mainpage, which will be visible immediately when the app starts.

Update git repo with blank app that refers to fonts which won't show

On my PC I did not install the fonts into windows. I just added them to the project. Code see github page. Screenshot of designer view

Unconcerned

go to properties of all font files and make sure they are marked as type "Content" and "Do Not Copy" as build action – Mandrel

@touseefbsb Nope same results. It stlll defaults back to Segoe UI – Unconcerned

please upload it to a public github repo and share with us, I would try to have a look at it :) – Mandrel

also try "ms-appx:/Assets...." ( which means instead of 3 /// just use 1 here and see if that helps – Mandrel

I followed this link ( ian.bebbs.co.uk/posts/UsingSVGInUWP ) to add svg icons to my apps and it works for me. I wonder how you created those font files? – Mandrel

Can you upload the font somewhere? Most likely your issue is with the part after the # - the name of font. Try some variations of "Delphi-Soleto Light", like "Delphi Soleto Light" or "Delphi-Soleto" or "Delphi Soleto" - can't say for certain without the font. – Heymann

@JohnnyWestlake I updated my question with a screenshot of the font name (opened in windows). I'm positive I made no typos there – Unconcerned

Updated question; uwp uploaded to github.com/basprins/CustomFontWinIot – Unconcerned

Answer 1

My biggest struggle in winiot/UWP so far... but here goes...

A few considerations for somebody else who's pulling his/her hair out.

First of all, it is possible. But many websites tell you a different story which overcomplicate an already overcomplicated feature imho.

The steps that you need to fulfil to visualize your font on your iot device:

Add the fonts to your project

The obvious first step that most websites will tell you. A few remarks though.

• It does NOT matter WHERE you store the fonts. They can reside in /Assets, /Fonts, /Assets/Fonts, /Resources or whatever you prefer.
• You do NOT have to bother with copy to output. It doesn't matter how you define it.
• You do need to leave the build action to Content. Which is the default, so you don't have to bother with that either.

Refer the font family name

It can be horrible to figure out the correct font name. The convention is as follows [fontfamily file path]#[font family name].

An example would be:

Assets/Delphi-Soleto_Lt.ttf#Delphi-Soleto

Or in complete xaml:

<TextBlock FontFamily="Fonts/Delphi-Soleto_Lt.ttf#Delphi-Soleto" Text="This is Delphi Soleto Light" />

It does NOT matter whether you refer the path with the msappx syntax, all following definitions will work :

<TextBlock FontFamily="Fonts/Delphi-Soleto_Lt.ttf#Delphi-Soleto" Text="This is Delphi Soleto Light" />

<TextBlock FontFamily="/Fonts/Delphi-Soleto_Lt.ttf#Delphi-Soleto" Text="This is Delphi Soleto Light" />

<TextBlock FontFamily="ms-appx:///Fonts/Delphi-Soleto_Lt.ttf#Delphi-Soleto" Text="This is Delphi Soleto Light" />

The font name

Then the big one, the font name. Important to know, is that the font style should be REMOVED from the font name. Thus for example

• File 'Delphi-Soleto_Blk.ttf' with font name Delphi-Soleto Light becomes Delphi-Soleto
• File 'Delphi-Soleto_Blk.ttf' with font name Delphi-Soleto Black becomes Delphi-Soleto
• File 'Delphi-Soleto_A_Blk.ttf' with font name Delphi-Soleto App Black becomes Delphi-Soleto App

In order to save you hours from guessing as I started out with, there is a tool that can help you out big time here. Be careful with the windows font viewer, as it might not show you what you need to see. Download the free dp4 font viewer instead.

If you open dp4 font viewer and locate the folder that holds your fonts you will see the correct font name. Note the font family name in the screenshot below.

Verify text in desired font

Then last but not least, some websites claim that xaml designer will instantly show the text in the font, which would be easy for testing. It does NOT do that on my side. What did help me in the end, is deploy my app on my target (in my case a RPI) and change the XAML while the app is running in the debugger. These changes do reflect instantly in your running app.

Finally, I could look at my screen and see my fonts visualized

I hope this will somebody out there! Special thanks to Breeze Liu who took the time to help me out!

Unconcerned

More recently, there is a Preferred Family property that, at least in my case, was the value I had to use for my font to show up. – Floria

Answer 2

You should not use the font weight index in the FontFamily property to reference the font file. If you need to set the font weight, you can set the FontWeight property of the TextBlock. Try this:

<StackPanel>
    <!--Don't add "Light" in the FontFamily-->
    <TextBlock FontFamily="ms-appx:///Assets/Delphi-Soleto_Lt.ttf#Delphi-Soleto"
               Text="Hello world, this is my test"/>
    <!--Don't add "Thin" in the FontFamily-->
    <TextBlock FontFamily="ms-appx:///Assets/Delphi-Soleto_Th.ttf#Delphi-Soleto"
               Text="Hello world, this is my test"/>
    <!--This is the default font family, set the FontWeight property-->
    <TextBlock Text="Hello world, this is my test" FontWeight="Normal"/>
</StackPanel>

Here is the effect:

Hardfavored

I made a new project, added the fonts in /Assets. Set copy to output = always. Copy/pasted your examples. Ran the project, all texts appear without the desired font. The text just appears in default font. Did you download the fonts and have a working version? Have you actually proof that it can work? Because I am loosing faith in this alltogether.... My deadline is in 4 days, and I'm afraid I will not be able to display the app in the customers font... Help is much appreciated ! – Unconcerned

Yes, I just use the sample you provide above github.com/basprins/CustomFontWinIot, then I create a new Blank page to add these TextBlocks and use your font in the project, they can be used. You can have a try. – Hardfavored

Notice that your font (Delphi-Soleto_Th.ttf) is very similar to the default font. I add the Image in my answer. – Hardfavored

And did you also install the font in windows? Or just added them to your project? – Unconcerned

Just in the project. You can upload a new uwp simple sample that can not work on your side, then I will try to test it on my side. – Hardfavored

I uploaded a blank app (app2) with only the fonts added to it. I use the soleto fonts, none of the textblocks appear in the desired font. Endless thanks for your efforts so far..! ps: App2 is stored in /basprins/CustomFontWinIot/App2 – Unconcerned

PPS: I also used the ms-appx:/// syntax, that doesn't work either, but I ended up checking into github without that syntax. – Unconcerned

Last but most likely not last...: I also played around with copy to output as there are contradicting posts online. Neither settings does the trick... – Unconcerned

@Unconcerned I should point out that in your IOT device, if the font is not installed, your app can not use the font. My device OS maybe have installed the font initially. Moreover, the custom font maybe can not install into your IOT device. – Hardfavored

Can you confirm that all the fonts are showing up on your end? Because I can't even visualize them on my dev PC. – Unconcerned

@Unconcerned Yes, in my PC, I can use the fonts you provide in your App2. – Hardfavored

OMFG... It works.... I'll post a separate answer with all my findings. I'll accept yours because you are are true warrior. Thanks so much for all your efforts and time – Unconcerned

Answer 3

Just adding that of late 2020, in an UWP project targeted for Windows 10, version 1809 (Build 17763) I could get the custom fonts to show up only by referencing it with a leading slash like

FontFamily="/Assets/Fonts/PT_Sans/PTSans-Regular.ttf#PT Sans"

Without the leading slash or with the uri starting with ms-appx:/// it would default to the standard font. Pulled several hairs over this.

Build Action: Content

Copy to Output Directory: Do Not Copy

Font used was the PTSans-Regular.ttf, downloaded from google.

Spic

Answer 4

The one way of using custom font in your UWP application is define in App.xaml :

1 - Create a folder in root of your project and name it "Fonts"

2 - Select custom fonts then press F4 and set Copy to Output Directory to Copy Always

3 - In App.xaml file > Application.Resources tag > ResourceDictionary tag, add following code:

<FontFamily x:Key="DefaultFont">/Fonts/(Your FontName).ttf#(Font Title)</FontFamily>

After do that, any time and any where you want to use font in your element, you can use it as following:

<TextBlock Text="Your Sample Text" FontFamily="{StaticResource DefaultFont}"></TextBlock>

Florentinaflorentine

Can you try this <FontFamily x:Key="DefaultFont">/Fonts/(Your FontName).ttf</FontFamily> ? – Florentinaflorentine