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
<span style="color: blue">&lt;</span><span style="color: #a31515">Application.Resources</span><span style="color: blue">&gt; &lt;</span><span style="color: #a31515">FontFamily </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">=&quot;BuxtonSketchFont&quot;&gt;</span><span style="color: #a31515">.\Fonts\BuxtonSketch.ttf#Buxton Sketch</span><span style="color: blue">&lt;/</span><span style="color: #a31515">FontFamily</span><span style="color: blue">&gt; &lt;/</span><span style="color: #a31515">Application.Resources</span><span style="color: blue">&gt; </span>

1 2 3 4

<span style="color: blue">&lt;</span><span style="color: #a31515">Application.Resources</span><span style="color: blue">&gt;     &lt;</span><span style="color: #a31515">FontFamily </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Key</span><span style="color: blue">=&quot;BuxtonSketchFont&quot;&gt;</span><span style="color: #a31515">.\Fonts\BuxtonSketch.ttf#Buxton Sketch</span><span style="color: blue">&lt;/</span><span style="color: #a31515">FontFamily</span><span style="color: blue">&gt; &lt;/</span><span style="color: #a31515">Application.Resources</span><span style="color: blue">&gt; </span>

13. Click on the Page Title TextBlock
14. Open the advance options in the FontFamily combo box
15. In the popup menu select Local Resource –> BuxtonSketchFont

    

16. You will notice the ComboBox highlight to green to signify it’s using a resource
17. 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!