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 or1001FreeFonts.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.
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.