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.
- Get the True Type Font (TTF) you want on your Windows Mobile device
- Copy the TTF File to the Windows directory
- 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
- Within the Solution Explorer right click on your project
- Click Add –> New Folder
- Name the folder to Fonts
- Add your custom font here. (For the purpose of this blog post I will be using the BuxtonSketch.ttf)
- Right click on the font and click on Properties and change the Build Action to Content
- 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.
- Within Visual Studio, open MainPage.xaml and view the page in XAML mode
- Find the ContentGrid within the XAML
- Add a Textblock to the ContentGrid
- Set the Size property to 48
- Set the Text property to Sample Text Font. Your XAML should look something like this
<Grid x:Name="ContentGrid" Grid.Row="1">
TextBlock FontSize="48" HorizontalAlignment="Left" Margin="36,225,0,0"<
Name="textBlock1"
Text="Sample Text Font" VerticalAlignment="Top" /></Grid> - Now we need to set the font. Add the FontFamily attribute to your Textblock
- 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
<Grid x:Name="ContentGrid" Grid.Row="1">
TextBlock FontFamily=".\Fonts\BuxtonSketch.ttf#Buxton Sketch"<
FontSize="48" HorizontalAlignment="Left" Margin="36,225,0,0" Name="textBlock1"
Text="Sample Text Font" VerticalAlignment="Top" /></Grid> - 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.