Getting custom fonts to work in a Windows Store app

How to get 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

So that works. When I test the app on my development machine it also works because the font is now installed. But when I deploy to my tablet, I see the default Segoe font:

bad

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 April 04, 2013. Questions regarding this artice? You can send them to the address below.
By using this site, you acknowledge that you have read and understand our Cookie and Privacy Policy.