Using custom OTF fonts in Windows 8 XAML
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.
Problem
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:
|
1 |
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:
|
1 |
FontFamily="/Assets/Fonts/Basic-Regular.otf#Basic" |
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:
|
1 |
FontFamily="/Assets/Fonts/Basic-ExtraBold.otf#Basic ExtraBold" |
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!
Getting it to show in Blend
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.
8 Comments
Thank you so much! Saved me a lot of time!!
Hi, thanks for the article, but I still can’t get this to work. Any .ttf font I try works, but none of the .otf fonts will. I think I’ve tried all possible variations of #[font name] at least 4 times, but still nothing. Is there anything else that needs to be done for otf fonts to work?
Nope, I haven’t found that there is something more to be done to get it to work. But I have found that some OTF fonts do not seem to be generated correctly. I haven’t studied that in detail but it seem to be that blend are very sensitive to errors or mismatch metadata in the OTF file.
If you want we can take the discussion off-line and do some testing.
Thanks! I forgot to install the font in my system, a silly absent-mindedness always takes a lot time
I have tried this but cant get it to work for any .otf font that I need for the application. Also I’m having problems with some .ttf files. I added the file to my project and also I installed the font on my PC. They work fine on text editors(Word, WordPad) but they still dont display in my app.
Any sugestions?
Make sure you try it out in a very small sample app first to isolate all other issues. Doing that, whenever i didn’t get it to work it was one of two things:
- The path to the resource where the font file is placed (/Assets/Fonts/Basic-Regular.otf in this case) make sure it’s added correctly in the project
- but mostly it was the second part that caused problems. You have to experiment to get this right as I haven’t found a systematic solution to this.
We can take it via mail if you want to examine it a bit more.
Trackbacks for this post