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:

 fontlist

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.

 solutionexplorer

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.

 propertiespane

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:

 propertiespanefinal

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:

font

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.

download

14 thoughts on “31 Days of Windows Phone | Day #24: Embedding Fonts

  1. Great post, it was a huge help for someone coming from the Flash world and learning WP7/C#.

  2. Excellent post, very clear and informative. Thanks!

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

  4. When a stupid man is doing something he is ashamed of, he always declares that it is his duty.

  5. Communism, like any other revealed religion, is largely made up of prophecies.

  6. I wanted to thank you for this excellent read!! I definitely loved every little bit of it.Cheers for the info!!!! & This is the perfect blog for anyone who wants to know about this topic. You know so much its almost hard to argue with you ………
    thanks

  7. I still get success when Build Action set to “Resource”,why?

  8. I bought your app for my phone, its awesome!!! Got a question though .. I am embedding fonts in my app like you are above, that’s all well and good, but how to I add the new custom font through the code behind? Progmatically?
    Thanks!
    Bobby

  9. Hi, please can you help with this?
    When control TextBox is placed inside of StackPanel > ScrollViewer if I add custom font to it, TextBox would not be rendered in Stack panel but at the very top of the screen. If I put multiple text box into StackPanel it seams that they retaining space but still render position of them all will be at the top.

    Any thoughts ?

    ScrollViewer x:Name=”scRlBox” Background=”blue”
    StackPanel x:Name=”ContentPanel” Orientation=”Vertical”
    TextBox Text=”Quick brown fox jumps ” FontFamily=”Font/ANDYB.TTF#Andy”
    ….

    I can upload source code it it needed.

  10. How can we change default font of web browser control in WP7? This embedded font may not work with web browser control.

  11. Hi.. its so great what you are doing through your website.

    just a question,
    can I use this solution to add a “Unicode font” in to wp7 fonts folder ?

    my requirement is only to read websites on my own native language.
    I root .ttf to Nokia N9, and it worked fine. and I am pretty sure, windows Phone 7 system also will render the font well.

    just want simply to add the font file in to the folder of my new Lumia 900. but looks like lot of security restrictions there.. :(

  12. what about using custom embedded fonts inside WebBrowser control? I am having some problems with custom fonts and WebBrowser control.

  13. Hi,thanks so much for your illustration. I have downloaded your demo app and opened it with Blend for Visual Studio 2012. I have found that in the font property,there is only one font available to choose,which is your demo font. How did you achieve that? If I just created a folder and added a font in it ,changed the property it still has lots of font items to choose. Do I have to choose the Embed option? And how can I change the font of the Panaroma title?

  14. Pingback: Custom Font benutzen? - Windows Phone 8 Entwicklung - Windows Phone 8 Forum

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s