Day #8: Custom Fonts in Silverlight

This is article #8 in my series 31 Days of Silverlight. In this post, we are going to talk about using fonts that are not part of the default fonts in Silverlight. This is important, because there’s only 9 fonts that are included, and most of those are pretty standard and “unexciting.”

Also, a bit of housekeeping. Several of you have brought it to my attention that you are having problems seeing my Silverlight applications. You say that you are getting an error that you don’t have the most up-to-date version of the plugin (even though you do.) I’m slowly learning that not everyone is running Beta “everything,” and as such, my stuff isn’t working everywhere. While I take some time to rework my demos to be more compatible, you can also download the Silverlight 3 Beta plugin, which will solve the problem as well. Click here to get the Silverlight 3 Beta plugin for your browser. OK. On to fonts.

Finding your font file.

First, we need to find the font file that we want to use. (This is your legal reminder that you need to make sure that you have permission to distribute the font you are choosing. Fonts have licensing rights, just like MP3s and videos.) I am using Windows 7 Release Candidate, but most versions of Windows store them in the same place.

C:WindowsFonts

There’s an important thing to remember about this location, however, and that is that while it looks like a folder, the Fonts directory on your computer is actually a complex file. Take the font you want to use from this folder (unless you already had it someplace else), and make a copy of the .TTF file somewhere else on your computer. The reason we do this is because if you open Visual Studio, and choose “Add Existing Item…” and try to open the Fonts folder, it will start adding every single font you have to your project. There’s not a way to choose individual fonts from that folder.

Add your font to your project

Right-click on your Silverlight project, and choose “Add Existing Item…” Find your font file on your machine, and select it. If you look at the properties of this file in Visual Studio, make sure that the Build Action on the file is set to “Resource.” This will include it in the build of the .xap file, which is necessary to distribute the font to your users’ computers.

Apply the font to a TextBlock element.

On our Silverlight page, we need to add an element that can take a FontFamily property. In this example, we’re going to use a TextBlock, but TextBoxes, Buttons, and several other XAML elements will take a FontFamily. To add the font, it’s not just as simple as adding the font name to the FontFamily tag. We need to first reference the .ttf file, and then the name of the font. Here’s what our XAML looks like:

<UserControl x:Class="SilverlightCustomFonts.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<
Canvas x:Name="LayoutRoot" Background="White">
<
TextBlock x:Name="OurText" FontFamily="FEDCLASS.TTF#FederationClassic" FontSize="48" Foreground="#333333" Text="Blankenburg" Width="400" Canvas.Top="125" TextAlignment="Center" />
</
Canvas>
</
UserControl>

You can change this in code, too

It’s all well and good to mark up some XAML, but what if we wanted to change the FontFamily from code? It’s just as easy. I’ve created a little app that has four Buttons and a TextBlock. Clicking each of the buttons updates the TextBlock to a new FontFamily. Here’s the XAML:

<UserControl x:Class="SilverlightCustomFonts.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<
Canvas x:Name="LayoutRoot" Background="White">
<
TextBlock x:Name="OurText" FontFamily="FEDCLASS.TTF#FederationClassic" FontSize="48" Foreground="#333333" Text="Blankenburg" Width="400" Canvas.Top="125" TextAlignment="Center" />
<
StackPanel Canvas.Top="20" Orientation="Horizontal">
<
Button Content="Calibri" FontFamily="calibri.ttf#Calibri" FontSize="24" Width="80" Margin="10" Click="ChangeFont"/>
<
Button Content="STAR TREK" FontFamily="FEDCLASS.TTF#FederationClassic" FontSize="18" Width="80" Margin="10" Click="ChangeFont"/>
<
Button Content="Hard Rock" FontFamily="AARDC___.TTF#Aardvark Cafe" FontSize="18" Width="80" Margin="10" Click="ChangeFont"/>
<
Button Content="Rough" FontFamily="ROUGD__.TTF#Rough Draft" FontSize="18" Width="80" Margin="10" Click="ChangeToRoughDraft"/>
</
StackPanel>
</
Canvas>
</
UserControl>

In the code, we’ve got two different event methods, because I wanted to show two different ways to handle this modification. The first method, ChangeFont, just takes our sending button, and uses the button’s font as the new font for the TextBlock. In the second method, ChangeToRoughDraft, we explicitly define a new FontFamily for the TextBlock. Either way works fine, but you can see how we might contstruct a font selector drop down list in our application this way. Here’s the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightCustomFonts
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}

private void ChangeFont(object sender, RoutedEventArgs e)
{
Button x = sender as Button;
OurText.FontFamily = x.FontFamily;
}

private void ChangeToRoughDraft(object sender, RoutedEventArgs e)
{
OurText.FontFamily = new FontFamily("ROUGD__.TTF#Rough Draft");
}
}
}

Summary

This article showed you how to modify your Silverlight application to use fonts other than the standard 9 that come packaged with Silverlight. We also demonstrated how to modify these FontFamilies from code dynamically, as well as in the marked up XAML. Our example application is running below this paragraph. You can also see our Silverlight Custom Font application by clicking here. If you’d like to download the code for this Silverlight Custom Font application, you can get that here as well.

3 thoughts on “Day #8: Custom Fonts in Silverlight

  1. Nice Post Thanks To share with us

  2. Say what you will about the Ten Commandments, you must always come back to the pleasant fact that there are only ten of them.

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