How to use your own fonts within Silverlight

goldu

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.. The built-in fonts by default within Silverlight
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 Ouput Directory” to “Copy if newer”.
fontfilepropertiesinvs

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:

fontviewerofmyriadproblack

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 anycase.


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 anycase, if you do elect to separate these into their own folder, as shown here..

fontsfolderinproject2

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

Advertisements

About James W Hurst

a professional software designer since the beginning days of the desktop cptr and uC-controlled avionics, I today am focusing on C# and F# for building desktop and online applications under WPF, and Silverlight/ASP.NET along with the requisite HTML/CSS/JavaScript/Ajax for web applications. My database expertise is focused on Microsoft SQL Server and db4o, and my main area of interest is Artificial Intelligence and vision.
This entry was posted in C#, CodeProject, Software Design, The .NET Framework and tagged , , , . Bookmark the permalink.

3 Responses to How to use your own fonts within Silverlight

  1. Alexwebmaster says:

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

  2. Custom Pixel Fonts for Silverlight and WPF at CodePlex.com

    http://pixelfonts.codeplex.com/

  3. Chris says:

    I know this is old, but just in-case you haven’t figured this out yet still,

    Add existing folder to Visual Studio:

    1) Open the solution / project folder in windows explorer — a quick method would be to right click either the desired project or sub-folder and use “Open in Windows Explorer”.

    2) Copy – Paste the whole folder with items that you want to include in your project to the project directory that is now open in windows explorer.

    3) Return to Visual Studio, In Solution Explorer, make sure you have selected on node above the location in which you had pasted your folder (‘IE: Select the .csproj if you pasted to project root’).

    4) Click the button on the command bar of Solution Explorer ‘Show All Files’.

    5) Right-Click the now shown folder that you wish to include and choose ‘Include in Project’.

    6) Turn off ‘Show All Files’ as it can get annoying ;P

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