Derek Lakin

Using Custom Fonts in XAML Apps

The first Metro application that I started to build for Windows 8 was a simple digital clock; partly because I thought this was a good simple application to get started with, partly because it would be handy combined with the docking station, and partly because I’d already written one for Windows Phone. However, the first issue that I noticed was that the embedded font I used originally no longer worked and without any XAML support in Blend it was difficult to see how this would work.

Twitter.FontEmbeddingHaving managed to convince Joanna Mason (the Lead Program Manager for Expression Studio) to start tweeting at BUILD, I asked her if font embedding was supported only to find that it’s not. Fortunately, the equally awesome Tim Heuer joined the conversation and confirmed that although there’s no support in the Visual Studio designer for embedded fonts, it can in fact be done, and here’s how.

Get to the Code!

Font file propertiesThere are just three simple steps to get custom fonts working in your XAML application:

  1. Add the font file to your project.
  2. Change the Build Action for the font to Content.
  3. Reference the font file and font name in your XAML using the format:
    /<path to font file>/<font file>#<font name>

As you’d expect from XAML, you can set this either directly on an element by using the FontFamily property, or you can set it in a suitable style. The inline approach looks like this:

As mentioned above, there’s no support in the designer for custom fonts, so you won’t see anything different in Visual Studio, but when you run it the end result looks like this:

CustomFonts.Screenshot

Aside

Digital Clock, my first Metro application, will feature a lot on this blog while I get to grips on various new parts of the Windows Runtime. For example, you can expect a post in the near future on the new Settings contract.

code fonts winrt xaml