How to get custom fonts to work in a Windows Store app.

Getting custom fonts to work in a Windows Store app.

Windows Store Apps allow you to use custom fonts. To properly design and test I need the font to:

Step 1: Drag font to solution.

fonts in blend

I chose a font for my buttons but it didn’t show up in the designer:

bad font

Step 2: Install font.

To show the font on the Expression Blend Artboard, install the font in Windows 8.

good font

When I inspect the XAML that Blend created, i see this:

<TextBlock Text="{TemplateBinding Content}" FontFamily="../Assets/Fonts/go3v2.ttf#Gang of Three"/>

Step 3: Add a leading slash

Add a leading slash to the FontFamily property value like this:

<TextBlock Text="{TemplateBinding Content}" FontFamily="../assets/Fonts/go3v2.ttf#Gang of Three"/>

And now the proper font displays on my tablet

good font

I am not sure why we need the leading slash but this worked on my machine. I hope it helps you too.

Written by Loek van den Ouweland on 2013-04-04.
Questions regarding this artice? You can send them to the address below.