Maybe it should be part of my Styling Windows 8 series, but this was a problem that has haunted me for a couple of days. Now, that I finally solved it I might as well share it to get it out of my system.
We are building a prototype for one of our clients and they are using a custom set of fonts. The fonts comes as separate files for each variant; medium, light, regular, extra bold, italic, etc. The font is an Open Type Font (OTF) and it’s supported by Windows store apps. I started out as usual, adding the fonts to my assets. Then I tried to set it on the text style templates that I used. But no matter what I did, I was unable to get it to work. Not in design time, not in runtime. I was about to give up but I thought I should have one last go. So I open up a blank solution, added a text for each of the variants and started a strict systematic run. I tried lot’s of setups, added the fonts to the root and in subfolders, etc.
What I did
For each variant I also added a second control text with normal Segoe UI, just to make sure I got the right font, (the font was not that far off from Segoe, so I started to go font blind). When all variants were in place I ran the app. Wow, there in the middle, I had one text that actually did work at runtime. That was the first sign that I was doing something right. So I started to make sure all other texts used the exact same format. The format for defining custom fonts are:
FontFamily="/[path to font file]/[font file]#[font name]"
The clue was in the #[font name] part, the definition that did work had the root name of the font here. As an example say the font is named Basic, so the definition lookes like this:
If I just double click on the font file it will open up with the built in viewer. If you look at the top you will see Font name: [font name]. Again, with the example Basic font and the ExtraBold variant, this name now read Name: Basic ExtraBold. That sure seems correct and this is what Blend uses to automatically name the FontFamily, like this:
However, it in this case the font name should still be the root name: Basic, going over and renaming all the #[font name] of the variants resetting it to #Basic, it started to work as expected, at least in runtime. Sweet success!
After the first solution was in place I was almost satisfied, I could live with just runtime and not design time. But on the way home it hit me, it was such an obvious solution that people on the bus looked as I banged my hand to the forehead. If you haven’t figured it out yet, the solution was simply to install the font to my system…duh! Just make sure you have the font’s as assets as well or you can end up with a solution that just work on your computer.
So in summary, make sure the #[font name] is correct and install the font so it’s visible at design time in Blend…much better now.