This is the story of a stubborn font (.ttf) that refused to work in a Windows Phone 8 application…. It all starts with a simple Windows Phone 7 application where the font works fine. Let’s just recall on how you can include a custom font within your application:
Option 1 – Build action = Content
– Add the TTF file (in this case Colonna.TTF, which is the Colonna MT Regular font) to your project by right-clicking the project in solution explorer and select Add > Existing Item. Select the TTF file and click OK
– Select the TTF file you just added and make sure the Build Action is set to Content (you can optionally set the Copy to Output Directory if you want but this actually isn’t required as the file will be copied regardless if it’s set to Content for a Windows Phone project)
Next, we just need to add a bit of XAML to display the font within our application:
<TextBlock Text="Test Text with Custom Font"
FontFamily="Colonna.ttf#Colonna MT" />
It’s worth breaking the FontFamily attribute value into its parts. Before the # is the path to the TTF file. If you put the TTF file in a folder or in a different assembly you’ll need to adjust the path accordingly. After the # is the name of the font. This can be found by opening the TTF file from Windows Explorer using the default Windows Font Viewer:
Option 2 – Blend Embedded Font
An alternative is to get Blend to do the hard work for you. Switch to Blend (if you’re not already designing your application in Blend then you should be!) and select the TextBlock where you want to use the custom font. In the Properties window locate the Text property group (you can type “font” in the search box to reduce the list of properties). From the FontFamily dropdown, click on the Font Manager button:
Select the font that you want to embed in your application, in this case Bradley Hand ITC, and click OK
You will see that this font has been added to a Fonts folder in the Projects window:
Now from the FontFamily dropdown you can select the font and you’ll notice that it has an icon next to it indicating that the Font has been added to the project.
An alternative is to select the font and then check the “Embed” checkbox in the Text group:
What’s interesting is that the syntax for using this font in the application is slightly different
<TextBlock Text="Test Text with Embedded Custom Font"
FontFamily="/TestFont;component/Fonts/Fonts.zip#Bradley Hand ITC" />
By default Blend specifies the font family using an absolutely path. A relatively path will work just as well, for example:
<TextBlock Text="Test Text with Embedded Custom Font"
FontFamily="Fonts/Fonts.zip#Bradley Hand ITC" />
If you switch across to Visual Studio you’ll see that the TTF file has been included with a Build Action set to BlendEmbeddedFont.
Warning: it’s not enough to simply add a TTF file into your application and set the build action to BlendEmbeddedFont. In this scenario, where we embedded the font via Blend, some additional attributes were also set that you don’t see in the Properties window (these are not set when you simply change the Build Action to BlendEmbeddedFont and are required for the font to be correctly embedded).
<BlendEmbeddedFont Include="FontsBRADHITC.TTF">
<IsSystemFont>True</IsSystemFont>
<All>True</All>
<AutoFill>True</AutoFill>
<Uppercase>True</Uppercase>
<Lowercase>True</Lowercase>
<Numbers>True</Numbers>
<Punctuation>True</Punctuation>
</BlendEmbeddedFont>
Windows Phone 8 and the Stubborn Font
Both of the options presented in the previous section worked brilliant for my font in a Windows Phone 7 project. Unfortunately when I upgraded my application to Windows Phone 8 the font stopped rendering – the TextBlock elements would revert to using the default font.
Attempt 1: Adjusting legal rights for embedding
After talking with a few people about what the cause of the issue could be (ie not following options 1 or 2 above) it was suggested (thanks Vaughan from Bitrave) that it was font licensing issue. Apparently, which I didn’t realise there is a flag in the TTF file which indicates whether the font can be embedded or not. There are a couple of rudimentary tools out there that will allow you to tweak this (and yes, I have permissions from the font designer to do this!). The one I used was TTFEdit.
http://sourceforge.net/projects/ttfedit/
What astounded me was that this was a Java application…. which meant I needed to install the JRE… ummm, where do I get that again, oh, right, Java.com of course:
http://java.com/en/download/index.jsp
Do you think installing this is enough… no, because it doesn’t add itself to the path. I then had to add c:Program Files (x86)Javajre7bin to my path so it was accessible from my command prompt:
Ok, now we’re ready to run TTFEdit: Open a command prompt, navigate to the directory where you extracted TTFEdit (it comes as a zip file, so don’t forget to unblock it before extracting it), and execute “Run.cmd” – this will launch the UI:
– File > Open > Select your TTF file
– View > Show Advanced
– Select the OS/2 tab and look for the “Legal rights for embedding” field. Hover over the text box and you’ll see the tooltip that indicates possible values. You’ll notice that the Colonna MT has been set to 8 which means it can be embedded.
I’ve tried setting this attribute to all sorts of different values and it appears that Visual Studio, Blend and Windows Phone completely ignores them (ie with the Colonna font I couldn’t get it to not show the font). I’ve also tried adjusting my rogue font (default value was 0 which should afaik allow embedding anyhow) but couldn’t get it to render. Looks like this isn’t the answer!
Attempt 2: Issue with file format
Whilst it appears that Windows can open my rogue font and install it correctly, the font did originate from a Mac. A couple of the tools I tried for attempt 1 indicated that they could access or read one of the tables in the TTF file – this made me wonder whether there was something slightly screwy in the file which was causing Windows Phone not to handle the file correctly.
I found a GUI tool called BirdFont (http://birdfont.org/) which can be used to edit TTF files. Interestingly it’s also a Java application (I can’t recall the last time I used a Java application and now to have two in a day….).
I simply opened my TTF file, switched to the Menu tab, gave it a new name and clicked Export.
This generated a new TTF which worked perfectly in my Windows Phone 8 application. I’m yet to work out exactly what the differences are but if we open both fonts in TTFEdit the OS/2 table version is different (and if you recall from earlier the OS/2 table version of the Colonna font was 1). I’d be interested to know exactly what the limitations of TTF font support on Windows Phone is but at least I have a work around for when I do come across a font that doesn’t want to play ball.
For reference, here’s the link to what I could find on MSDN that talks about font support for Windows Phone ( http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202920(v=vs.105).aspx#BKMK_FontEncoding)