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.
Written by Loek van den Ouweland on April 04, 2013. Questions regarding this artice? You can send them to the address below.