Custom Fonts In Windows 10 UWP App

In Windows 10, the default FontFamily is ‘Segoe UI’ which is called ‘Global User Interface’. You can use Blend or Visual Studio to select another Font Family. But if your user doesn’t have this font installed on their device you will get the default font. For that we have to add the font to the application.

Let’s see the steps:

Create new Windows 10 uwp app then download your custom font and add to the project. Here I add the font in my project “Assets” folder like the following screen. For this demo I will use free font download.



Finally set the font propertiesif required Build Action to Content and copy to output directory to copy never.

To view the custom font in your control set the font properties of your control like the following code. Here I am going to use textblock to show custom fonts:

<TextBlock Text="Suresh C# Corner MVP"TextAlignment="Center"VerticalAlignment="Center"FontFamily="Assets/Swiftel.ttf#Swiftel Base DEMO"></TextBlock>

You can set the font family proprieties in code behind also like the following code.

textBlock.FontFamily = newFontFamily("/ Assets / Swiftel.ttf#Swiftel Base DEMO");

Sometimes you will face issues while displaying custom font in design view works normally,  but in emulator the default font is displayed for that so follow the solutions below:

By setting FontFamily Resource

Using Blend you can convert the FontFamily by clicking on the white square next to the dropdown.

Open the xaml file using expression blend. Then selected the TextBlock, and use the FontManager in the Font properties to select and embed the font.

Use .TTF Fonts

I notified that windows mobile doesn’t support .OTF fonts try to use .TTF fonts.

Now run the app and see the output looks like the following screen.



I hope this helps you.

For more information on Windows 10 UWP, refer to my e-book:

 

• Windows 10 UWP E-book