TUTORIAL #9: Embedding Fonts In Silverlight 2

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!

kick it on DotNetKicks.com

8 thoughts on “TUTORIAL #9: Embedding Fonts In Silverlight 2

  1. I did a lot of research trying to figure out how to legally obfuscate and include fonts in a Silverlight project. Because I was unable to find a step by step guide in one place I am posting it here.1. Create Microsoft Word Document2. Change the font to the desired font type3. Print to XPS file4. Change the XPS file extension to .zip5. Open zip file and navigate to Fonts directory (eg: somezipfile.zipDocuments1ResourcesFonts)6. Copy the ODTTF file (***DO NOT CHANGE THE NAME OF THE ODTTF FILE***)7. If more than one font is required you can add several to a zip file8. In the Silverlight project (not the associated web project) include the ODTTF, or zip file using "Add" -> "Existing Item"9. Click on the newly added file and go to Properties10. Change the "Build Action" to Resource11. In the Xaml file you can now add controls with the FontFamily set, see the two examples below12. **Compile**13. You may need to launch the site in the debugger to see the fonts for the first time, but after that they should show up in the designer.Code examples:FontFamily="DA09FD01-347E-4FF6-9877-23AED4599FCE.odttf#Segoe UI"FontFamily="fonts.zip#Segoe UI"

  2. Thank you for your hard work posting these silverlight tutorials/tips.

  3. Probable impossibilities are to be preferred to improbable possibilities.

  4. Every man has a right to a Saturday night bath.

  5. First love is only a little foolishness and a lot of curiosity.

  6. Wit makes its own welcome, and levels all distinctions. No dignity, no learning, no force of character, can make any stand against good wit.

  7. Thanks, really helpfull 🙂

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