UWP IoT how to add custom font

user_1470327 0
Viewed 2250

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

enter image description here

The do appear in my designer views

enter image description here

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

enter image description here

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

enter image description here

uwp fonts c#
4 Answers

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.

enter image description here

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

enter image description here

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

user_14703270

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:

enter image description here

user_71993290

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.

user_145242900

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>
user_51639670
Related