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 7 best free fonts from 2013.

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.

adding-font-to-solution

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

Elegant-font-name

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.

custom-font-windows-phone

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

custom-font-windows-store-app

Download

Download Font from dafont.com | Find more free fonts

Download Sample App from GitHub

Kanishk Kunal

Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal

This Post Has 2 Comments

  1. Your style is unique in comparison to other folks I’ve read
    stuff from. Thanks for posting when you’ve got the opportunity, Guess I’ll just book mark this web site.

  2. I need to add the devlys010 font to the microsoft office app on my lumia 1520 wp ver.8.1 . I know i can create new files in hindi on my lumia but i am not able to view the files created on my pc having the devlys font.
    Any help would be hugely appreciated .

Leave a Reply

Close Menu