X

How to use custom fonts in Windows Phone and Windows Store apps

Using a custom font in Windows Phone and Windows Store apps is quite simple. Following steps will work with both type of apps. For this demo we will use the font Elegant Ink from Monika’s post where she handpicked best free fonts for apps and games.

Add font to solution

Add the font (TTF) to your solution and mark it as “Content” in Build Action under Properties.

Set “Copy if newer” in Copy to Output Directory option.

Usually I add custom fonts under Assets/Fonts folder.

Get font name

You would need to know the font name apart from the font file name in order to use it. You can open the TTF file on your desktop to get its name as shown below. In this case, our font name is Elegant Ink

Use in XAML

To use a custom font in XAML You just need to set the FontFamily property to the font file path followed by a hash (#) and the font name (that we retrieved in earlier step) like shown below.

<TextBlock Text="{Binding}" FontFamily="/Assets/Fonts/elegant_ink.ttf#Elegant Ink"/>

Use at runtime

To use a custom font at runtime in C#, set the FontFamily property to a FontFamily instance created using the font file path followed by a hash (#) and the font name like below.

textBlock.FontFamily = new FontFamily("/Assets/Fonts/elegant_ink.ttf#Elegant Ink");

Sample App

You can see from the screenshot comparison below, how using the custom font Elegant Ink changed the look of a sample todo app on Windows Phone.  Towards the left is the sample app with the default Windows Phone font and on the right is with the custom font applied.

Screenshot for the same app on Windows Store with custom font is shown below.

Download

Download Font from dafont.com | Find more font articles

Download Sample App from GitHub

Categories: Development
Related Post