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:

• properly show in Expression Blend
• properly show on my development machine
• properly show on my target device (my surface tablet)

Step 1: Drag font to solution.

• Activate Visual Studio and create a folder to host your custom fonts.
• Drag the font to the font folder
• Build the project
• Activate Expression Blend and find the UI Element to put the font on
• Choose the font you want:

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

Step 2: Install font.

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

• Double click the font and click install
• Close and re-open Expression Blend

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:

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

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