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

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.