31 Days of Windows Phone | Day #24: Embedding Fonts

This post is Day #24 in a series called the 31 Days of Windows Phone.

Yesterday, I wrote about how you can add trial versions to your applications.  It’s an incredibly valuable feature that will ultimately help you sell more apps.  Today, we’re going to cover embedding fonts in our applications.

First, Be Smart

With all applications that are built for mobile devices, you have remember that data is not necessarily “free.”  Your user has a data plan that might only include 5GB of data transfer a month.  Secondly, there’s a limitation to how big an application can be and still be gotten over a data plan: 20MB.  If your application is larger than 20MB, your user will have to use Wi-Fi or sync with their computer.  Neither of those are optimal for selling tons of copies of your app.

Having said that, do not start filling your applications with every possible piece of data, fonts, images, videos, etc. that you “might” need.  Strip it down to its bare minimum, and if you can get that extra content over the air at a later time, think about doing it.

Embedding Fonts in Windows Phone 7

One of the most common questions I get asked about building WP7 apps is how to use a custom font that is not already included. Here’s a list of what IS included by default (Segoe WP) is what is used if you don’t specify a FontFamily:

 

To add another font to your application, it’s pretty simple, but not terribly obvious.  The first thing you need to do is find a font you want to use.  I recommend DaFont.com or 1001FreeFonts.com, but there are plenty of places that offer free, re-distributable fonts.

That’s an important key word, however.  REDISTRIBUTABLE.  Please make sure that you are only including fonts that are allowed to be redistributed.  In some cases, you might need to pay for these rights.  Make sure you’re covering yourself before you just start adding fonts to your application.

</soapbox>

OK, so now that we HAVE a font we can package up and distribute, here’s how we get it embedded in our application.  The first step is to add it to our project.  I generally like to create a “fonts” folder that I keep my fonts in, but it’s not required.  Here’s a screenshot of my Solution Explorer.

 

The catchy part to using this file appropriately is the Build Action we assign to this file. If you’re not familiar with Build Actions, click on your font in Solution Explorer, and look at the Properties pane.

 

There are two values we need to change manually, or we’ll never see any success with our font.  The first is the Build Action.  You want to change that to be “Content.”  The second is Copy To Output Directory.  That needs to be “Copy if newer.”  Now my properties look like this:

 

Now, to actually USE the font, right?  There’s some simple XAML syntax to make this happen on the FontFamily property.  Here’s what it looks like:

<TextBlock Text="12:02 AM" FontFamily="fonts/DigitalDream.ttf#Digital Dream" FontSize="60"/>

As you can see, I need to specify the font file itself, and following a pound sign/hash mark (#), the actual name of the font.  In my example, they’re the same.  If you want to be sure you’re right, open the font file on your computer, and you should see a window that looks like this:

The actual font name is listed right at the top.  You’ll know when you get the syntax right, because the font will immediately change on your design surface in Visual Studio 2010.

Download the Code

If you’d like to see a working example of embedded fonts, download this solution and open it up for yourself.  It’s amazingly simple, but also a great way to give your application a distinct look.