Custom Fonts In Windows Phone 7 With Expression Blend

In my previous post I went through how to use custom fonts in a Windows Phone 7 application using Visual Studio.  In this part I’ll go through how to use Expression Blend for Windows Phone to leverage custom fonts.

Expression Blend is primarily used for designing your applications and offers a more intuitive interface to help design your Windows Phone 7 applications.  I don’t use it to code and fall back to Visual Studio when code needs to be written. Unlike Visual Studio, it also renders any custom fonts you are using in the visual designer so you get a better representation of what your application will look like.

In Expression Blend, you can change the FontFamily property using the properties tab as follows


Here I changed ‘page name’ TextBlock and you will notice it will render in the visual designer nicely


But when deployed to the emulator the font will fallback to the Segoe WP default font


As you can see, the TextBlock that we added in the previous post is using the custom font but the ‘page name’ falls back to the regular font.

In the following steps, I’ll outline how to fix this building off the project from the previous post but instead we’ll use Expression Blend.

Using Expression Blend & Custom Fonts

IN the following steps, I’ll go through making the custom font a resource so it can be leveraged in other controls within the Windows Phone 7 application.  Making the font as a resource allows you to easily reference the font on other controls.  So instead of copying FontFamily=".\Fonts\BuxtonSketch.ttf#Buxton Sketch" everywhere, you simply point it to your static resource. 

  1. First thing we want to do is open up your project using Expression Blend for Windows Phone
  2. Open MainPage.xaml in design view
  3. Within Expression Blend (two ways)
    1. in the menu click on View –> Active Document View –> Design
    2. Click on the view icon in the designer
  4. Click on the TextBlock that was added in the previous tutorial (Text property should be “Sample Text Font”)
  5. In the Properties Tab expand up the Text section to see the selected font
  6. Beside the FontFamily combo box you will notice a ‘white box’, click on this to view the Advanced Options
  7. Click on Convert to New Resource
  8. This will bring up a dialog called Create FontFamily Resource as follows
    Here you have the option of
    1. Creating a local Resource (only useable by MainPage.xaml)
    2. Creating an application resource in app.xaml (useable throughout your entire application)
    3. Creating a Resource Dictionary (creates a separate resource file)
  9. Change the name to BuxtonSketchFont
  10. Select the Application radio button.  Your dialog should look like this
  11. Click OK
  12. You will notice the FontFamily combo box is now highlighted green which means the property is using a resource.  If you open up App.xaml in XAML view, you will also notice the following added
  13. <Application.Resources>
        <FontFamily x:Key="BuxtonSketchFont">.\Fonts\BuxtonSketch.ttf#Buxton Sketch</FontFamily>
  14. Click on the Page Title TextBlock
  15. Open the advance options in the FontFamily combo box
  16. In the popup menu select Local Resource –> BuxtonSketchFont


  17. You will notice the ComboBox highlight to green to signify it’s using a resource
  18. Run the application in the emulator (you can do this from Expression Blend by pressing F5).  If done correctly, your emulator should now render the following (Notice Page Name now uses the BuxtonSketch font) 

There you have it, using custom fonts in Windows Phone 7 applications.  Of course you don’t have to use custom fonts and can just use the default Segoe WP font.  But you never know when a customer might say ‘hmmm…don’t like that font, what else you got?”

Questions, ping me via this blog or via twitter @MarkArteaga or just add a comment!

Warning: count(): Parameter must be an array or an object that implements Countable in /nfs/c07/h02/mnt/110221/domains/ on line 405

Leave a Reply