Monday, August 15, 2016

Another reason your custom font may not display in a Windows app

Here's something that took me hours to uncover. I document it here to hopefully save someone else some time in the future.

Using custom fonts in apps is great. It can add some visual interest, draw attention to some specific text, serve as a way of handling multiple images or icons, and it can enable the consistent representation of brand identity.

There are a few gotchas for getting the font to display correctly in a Windows app, such as having the wrong build action, or trying to use a file which does not support embedding and these are quite well documented in various blog posts around the web.
After much head scratching, I finally found the cause of another reason a font may not display properly.

Here's the issue summed up in one image.

Here's what's going on.
When a custom FontFamily is specified it is done in two parts. The first is the name of the file and the second is the name of the font family. It should be quite simple and if you add the font to your project you can use Visual Studio (or Blend) to select the font from the dropdown list and it will set this for you.

Here's the gotcha.
On Windows, there is a way to specify multiple font families in a single file and a way to specify which is preferred. It seems the VS/Blend font selector does not handle preferred families correctly. Specifically, it appears to use the family name regardless of whether a preferred family is defined. I was using (as in the screenshot above) a corporate font that contained a single family but had a different value specified for the preferred family name. For the font to be correctly displayed it's necessary to use the preferred family value but this is not what was set by the tool. It's simple enough to change this in the XAML if you know what's up.

Identifying this was a challenge.
I normally use TTFEdit to explore the internals of font files but this doesn't have the clearest of interfaces. While investigating I discovered dp4 Font Viewer and this did help make it easier to see some of the less obvious properties of the file.

There's probably a little more subtlety to the actual issue and I'm not interested enough to read the TTF spec to see the full extent of what could be going on but hopefully, this is enough to help you if your font is not being used and you can't see why not.