Custom Fonts in Windows Phone 7 Application

While working on a Windows Phone 7 project, I got a customer request to use a custom font instead of just the Segoe WP font that is included with Windows Phone 7.

I have done this before on Windows Mobile so I’ll re-cap how to do it pre Windows Phone 7.

1. Get the True Type Font (TTF) you want on your Windows Mobile device
2. Copy the TTF File to the Windows directory
3. Reset the device

We have automated this process through a custom a setup DLL (which is native code) with an installer and alleviates the pain for the customer to do this manual process.  But still somewhat of a pain to automate this process.

Using Silverlight for Windows Phone 7, this process is simplified and considering as a third party developer you don’t have access to the file system or the ability to write native code this is a good thing.

Here is a quick tutorial on getting this working with Visual Studio Express for Windows Phone 7.  In this tutorial I’ll be using the standard Windows Phone 7 project that comes with Visual Studio.

Adding Custom Font With Visual Studio

The first thing you need to do is create a Fonts folder in your project as follows

1. Within the Solution Explorer right click on your project
2. Click Add –> New Folder

   

3. Name the folder to Fonts
4. Add your custom font here.  (For the purpose of this blog post I will be using the BuxtonSketch.ttf)
5. Right click on the font and click on Properties and change the Build Action to Content
6. Your Solution Explorer should look something like the following
   

Now that we have the font in our project we need to use the font with the application.

1. Within Visual Studio, open MainPage.xaml and view the page in XAML mode
2. Find the ContentGrid within the XAML
3. Add a Textblock to the ContentGrid
4. Set the Size property to 48
5. Set the Text property to Sample Text Font.  Your XAML should look something like this
   
   <span style="color: blue">&lt;</span><span style="color: #a31515">Grid </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">=&quot;ContentGrid&quot; </span><span style="color: red">Grid.Row</span><span style="color: blue">=&quot;1&quot;&gt; <blockquote><p>&lt;</span><span style="color: #a31515">TextBlock </span><span style="color: red">FontSize</span><span style="color: blue">=&quot;48&quot; </span><span style="color: red">HorizontalAlignment</span><span style="color: blue">=&quot;Left&quot; </span><span style="color: red">Margin</span><span style="color: blue">=&quot;36,225,0,0&quot; <br /></span><span style="color: red">Name</span><span style="color: blue">=&quot;textBlock1&quot; <br /></span><span style="color: red">Text</span><span style="color: blue">=&quot;Sample Text Font&quot; </span><span style="color: red">VerticalAlignment</span><span style="color: blue">=&quot;Top&quot; /&gt;</p></blockquote>&lt;/</span><span style="color: #a31515">Grid</span><span style="color: blue">&gt; </span>

   1 2 3

   <span style="color: blue">&lt;</span><span style="color: #a31515">Grid </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">=&quot;ContentGrid&quot; </span><span style="color: red">Grid.Row</span><span style="color: blue">=&quot;1&quot;&gt; <blockquote><p>&lt;</span><span style="color: #a31515">TextBlock </span><span style="color: red">FontSize</span><span style="color: blue">=&quot;48&quot; </span><span style="color: red">HorizontalAlignment</span><span style="color: blue">=&quot;Left&quot; </span><span style="color: red">Margin</span><span style="color: blue">=&quot;36,225,0,0&quot; <br /></span><span style="color: red">Name</span><span style="color: blue">=&quot;textBlock1&quot; <br /></span><span style="color: red">Text</span><span style="color: blue">=&quot;Sample Text Font&quot; </span><span style="color: red">VerticalAlignment</span><span style="color: blue">=&quot;Top&quot;  /&gt;</p></blockquote>&lt;/</span><span style="color: #a31515">Grid</span><span style="color: blue">&gt; </span>

6. Now we need to set the font.  Add the FontFamily attribute to your Textblock
7. Set the value to .\Fonts\[YOUR_TTF_FILE].ttf#[FONT_NAME] .  If BuxtonSketch.ttf is being used then it should be as follows .\Fonts\BuxtonSketch.ttf#Buxton Sketch.  Your XAML should now look similar to the following
   <span style="color: blue">&lt;</span><span style="color: #a31515">Grid </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">=&quot;ContentGrid&quot; </span><span style="color: red">Grid.Row</span><span style="color: blue">=&quot;1&quot;&gt; <blockquote><p>&lt;</span><span style="color: #a31515">TextBlock </span><span style="color: red">FontFamily</span><span style="color: blue">=&quot;.\Fonts\BuxtonSketch.ttf#Buxton Sketch&quot;<br /></span><span style="color: red">FontSize</span><span style="color: blue">=&quot;48&quot; </span><span style="color: red">HorizontalAlignment</span><span style="color: blue">=&quot;Left&quot; </span><span style="color: red">Margin</span><span style="color: blue">=&quot;36,225,0,0&quot; </span><span style="color: red">Name</span><span style="color: blue">=&quot;textBlock1&quot; <br /></span><span style="color: red">Text</span><span style="color: blue">=&quot;Sample Text Font&quot; </span><span style="color: red">VerticalAlignment</span><span style="color: blue">=&quot;Top&quot; /&gt;</p></blockquote>&lt;/</span><span style="color: #a31515">Grid</span><span style="color: blue">&gt; </span>

   1 2 3

   <span style="color: blue">&lt;</span><span style="color: #a31515">Grid </span><span style="color: red">x</span><span style="color: blue">:</span><span style="color: red">Name</span><span style="color: blue">=&quot;ContentGrid&quot; </span><span style="color: red">Grid.Row</span><span style="color: blue">=&quot;1&quot;&gt; <blockquote><p>&lt;</span><span style="color: #a31515">TextBlock </span><span style="color: red">FontFamily</span><span style="color: blue">=&quot;.\Fonts\BuxtonSketch.ttf#Buxton Sketch&quot;<br /></span><span style="color: red">FontSize</span><span style="color: blue">=&quot;48&quot; </span><span style="color: red">HorizontalAlignment</span><span style="color: blue">=&quot;Left&quot; </span><span style="color: red">Margin</span><span style="color: blue">=&quot;36,225,0,0&quot; </span><span style="color: red">Name</span><span style="color: blue">=&quot;textBlock1&quot; <br /></span><span style="color: red">Text</span><span style="color: blue">=&quot;Sample Text Font&quot; </span><span style="color: red">VerticalAlignment</span><span style="color: blue">=&quot;Top&quot;  /&gt;</p></blockquote>&lt;/</span><span style="color: #a31515">Grid</span><span style="color: blue">&gt; </span>

8. Run the application in the emulator and you should get something as follows.

You should be able to embed any True Type Font within your Windows Phone 7 application.  In the next post I’ll follow up on how to use custom fonts with Expression Blend.