How to Use Your Own Fonts Within Silverlight

Silverlight seems to provide for excellent control over the presentation of your online prose and typography, compared to HTML. The use of the built-in default fonts is quite straightforward. But I wanted to deploy some other typefaces within my online applications to really show off the professionalism and polish that is achievable with Silverlight, so I dug into the matter. Interestingly, of the first several articles, I found some to be incorrect. Or at least, they didn’t seem to work. Possibly due to version incompatibilities? By policy, in this article-posting, I assume you’re using Visual Studio 2008 SP1 and Silverlight 2, running on Windows Vista SP1. This article exists to show what I found to work.

(Thanks to silverlight.net, for their Silverlight Tip of the Day #46)

Out of the box, these fonts..
are available to you by default in Silverlight (shown here as actually rendered by Silverlight within a browser – as your users would see it).

You also have a choice of these East Asian fonts if they’re available on your local computer:

1. Batang
2. BatangChe
3. DFKai-SB
4. Dotum
5. DutumChe
6. FangSong
7. GulimChe
8. Gungsuh
9. GungsuhChe
10. KaiTi
11. Malgun Gothic
12. Meiryo
13. Microsoft JhengHei
14. Microsoft YaHei
15. MingLiU
16. MingLiu_HKSCS
17. MingLiu_HKSCS-ExtB
18. MingLiu-ExtB
19. MS Gothic
20. MS Mincho
21. MS PGothic
22. MS PMincho
23. MS UI Gothic
24. NSimSun
25. NSimSun-18030
26. PMingLiU
27. PMingLiu-ExtB
28. SimHei
29. SimSun
30. SimSun-18030
31. SimSun-ExtB

You specify a font for a given XAML element thus...

<Button />

To specify some other font that you may have, such as a custom-crafted or a purchased font..

1. In Visual Studio, within Solution Explorer, right-click on your Silverlight UserControl project folder and choose “Add -> New Item…”
2. Browse to where your font file is located, select it, and click the OK button. For example, here we’ll choose the Myriad Pro Black font from the Adobe Font Folio suite of fonts. The actual filename for this is MyriadPro-Black.otf, where the “otf” extension indicates that it is an OpenType Font. TrueType font files have the “ttf” extension.
3. Within Solution Explorer, select this font file. In the property grid, set the Build Action to “Resource” and the “Copy to Output Directory” to “Copy if newer”.

   

4. Now in your XAML, specify your font with this syntax: FontFamily=”<font filename>#<font friendly name>”. For example...

   <Button />

   To get the font friendly name, just double-click on the font-file within Solution Explorer to open the font viewer on it:

   

Visual Studio will now include your font files within the .XAP compressed deliverable file that gets downloaded when your webpage is displayed. You are thus free now to use any font you wish – provided you have the legal rights to distribute the font files from the type foundary who created them. You’re no longer confined to only the few built-in fonts that you were able to assume every browser to have. This solution seems a lot simpler than the previous distributable-font solutions promulgated by Microsoft and Mozilla, for which support seems to have fallen by the wayside in any case.

Using a Separate Folder for Your Fonts

If you’re going to include more than just one or two of your own fonts within your project, I’d suggest making a folder within your project to contain them. In this way, you avoid cluttering your project with files, none of which you’re going to be editing within Visual Studio. It’s a nit to me that I can’t add an existing folder to the project in Solution Explorer; you have to create it within Solution Explorer by right-clicking on the project, and selecting “Add -> New Folder”. Then add your files to it. Perhaps there is a way that I just don’t know of (please drop me a hint if you’re aware of one?!). In any case, if you do elect to separate these into their own folder, as shown here..

The caveat then is that you then need to modify the syntax you use in your XAML to include this folder-name, thus..

<Button />

Supported Types

Silverlight supports these types of font files: OTF (OpenType Font), TTF (TrueType), and ODTTF (an embedded font format used in Microsoft XPS and Office 2007). It doesn’t recognize other font types such as FON or TTC.

I hope you’ve found this helpful. Typography can be a rich landscape within which to express your artistic creativity, and the typographical power that Silverlight brings to the table is one reason to use it. This is a basic method albeit poorly documented; if you have additional information on this process, or spot any mistakes here – please drop me a note to let me know. Thank you.

Return to the Silverlight page