Many times when I am creating a Silverlight application, I’m not happy using the default 10 fonts that are part of Silverlight. I’ve got hundreds of other fonts on my machine that make more sense, but then I need that font on every user’s machine that visits my site. Thankfully, Silverlight makes that easy for me.
1) Add a TextBlock to your XAML.
<TextBlock Width="100" Height="100" Text="Jeff Blankenburg"></TextBlock>
2) Add your font to the project.
In Expression Blend and in Visual Studio, this is pretty easy. Right click on your Silverlight project, and choose “Add Existing Item…” From there navigate to your Fonts folder (or where ever you’re keeping fonts these days), which in Windows Vista is found at c:windowsfonts. Choose the TrueType font you wish to use (that’s any font file with a .TTF extension), and add it to your project.
3) Understand what we’re actually doing.
In Visual Studio, click on your new font file in your project. In the properties window, one of the items in the list is “Build Action.” Make sure that this is set to “Resource.” It should be set to that by default, but confirming it never hurts. What we’re doing is telling the application that this is a resource that we will need access to when the application runs. Since Silverlight applications run on the client machine, it will be packed inside your .XAP file for the trip across the Internet.
4) Apply your font to your textblock.
You may have noticed, if you were working ahead, that applying a font to your textblock is simple. In Studio, you can just type in the property FontFamily for the TextBlock, and specify the font you want to use. However, the preview window will only respond for the 10 fonts that are native to Silverlight. These are: Arial, Comic Sans, Courier New, Georgia, Lucida Sans Unicode, Portable User Interface, Times New Roman, Trebuchet MS, Verdana, and Webdings.
<TextBlock Width="100" Height="100" Text="Jeff Blankenburg" FontFamily="Times New Roman"></TextBlock>
In Expression Blend, you get a nice dropdown to choose your fonts from. They even have a nice icon system to show you which fonts are actually available. The default fonts have an A with the Silverlight logo next to them, and the new font we have added has an application icon with an A over it. Fonts without an icon need to be included (using this process) before they can be used. You CAN use them, but that font will not be shown on any machine that does not have that font installed.
Here’s the tricky part of using a foreign font. We don’t just get to reference the name of this font. There’s a unique syntax for making sure we get this correct. A font actually has two names: the name of the .ttf file, and the actual name of the font. We will need to know both of these. In my example, I am using the font “Calibri.” So in order to use that font, I need my FontFamily property to look like the following line:
<TextBlock Width="100" Height="100" Text="Jeff Blankenburg" FontFamily="calibri.ttf#Calibri"></TextBlock>
What I have done is tell Silverlight that I want my font to come from the file named calibri.ttf, and I want the font from that file named Calibri.
That’s all it takes! You should now be able to see that font rendered in the Visual Studio preview pane, as well as Expression Blend and our running application. Just remember that we need to package these external fonts into our application, and then we have to use this alternate syntax to point directly to the font.
I hope this helps you get past the hurdle of using the same 10 fonts over and over and over. Please let me know how this helps you!
JEFF BLANKENBURG 
Leave a Reply