Silverlight gives the developer the possibility of completely customizing the developed application in all aspects. Defining fonts used for displaying text is no exception. However there are multiple ways on how to go ahead with specifying fonts to use, this article attempts to summarize the options.
Using built-in fonts
Silverlight comes with some fonts that can be used by default, often referred to as built-in fonts. This naming is not entirely correct as the Silverlight runtime does not contain any fonts. However if the specified font is present on the machine, it can be used by Silverlight. The list of these fonts can be found here.
Even though the list contains about 40 fonts, the selection is different on clients running Windows and those running OS X. The “web safe” list – the fonts that are generally installed on both Windows and OS X – are the following subset: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Lucia Grande, Lucia Sans Unicode, Times New Roman, Trebuchet and MS Verdana.
To specify a font of the default font types, simply specify the FontFamily property of the visual element:
<TextBlock FontFamily="Arial Black">Hello, World!</TextBlock>
(Note that if the specified font can not be found on the client, Silverlight will fall back to the basic font type.)
Application displaying all of the built-in fonts available in Silverlight
To visualize the fonts available in Silverlight I’ve created a small application that lets one play around with the default fonts:
You can download the source of the example here.
Using embedded fonts
The problem with the default fonts is that the ones to choose from is quite limited and not all of them are available on client machines. To overcome this problem, Silverlight allows specifying custom fonts.
To use an embedded custom font, simply add the font file to the Silverlight solution as a resource. This font file then has to be referenced in the FontFamily property of the visual item, adding the exact name of the font family after a hash mark:
<!-- In this example AAJAX.TTF is the font file and the name of the font is AajaxSurrealFreak --> <TextBlock x:Name="MainText" FontFamily="Fonts/AAJAX.TTF#AajaxSurrealFreak" FontSize="16">Hello World!</TextBlock>
(Note that the name of the font family can be seen when opening the font file.)
Using streamed fonts
Embedded fonts are a powerful and simple way of using custom fonts. However the drawback of them is that the fonts are included in the xap file increasing its size and the download time of the application. In certain scenarios it would be more advantageous to have the fonts loaded on demand. Silverlight makes this possible as well by providing the FontSource property:
private void ChangeFontButton_Click(object sender, RoutedEventArgs e) { // Start downloading the font WebClient wc = new WebClient(); wc.OpenReadAsync(new Uri("/ClientBin/BaroqueAntiqueScript.ttf",UriKind.Relative)); wc.OpenReadCompleted +=new OpenReadCompletedEventHandler(wc_OpenReadCompleted); } void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e) { // Once the font stream is read, set the FontSource to this MainText.FontSource = new FontSource(e.Result); MainText.FontFamily = new FontFamily("Baroque Antique Script"); }
Embedded and streamed fonts in action
I’ve put together a simple project demonstrating the usage of an embedded font and dynamically loading another font via streaming. Click on the button to in the example to change the font on the fly by loading the font file from the server:
You can download the source of the example here.
Summary
Silverlight offers a plenty of options when it comes to working with fonts. Using default fonts is the simplest way to go, however one must be aware that Silverlight only uses fonts that are available on the client machine therefore only widespread fonts should be defined this way. If the font used is not always (or no even commonly) available on client machines, the fonts should either be shipped within the xap file or dynamically downloaded when needed. This tutorial has shown examples on how to implement the above mentioned three use cases.
(Note that the above example uses the freely available fonts Ajax Surreal Freak and Baroque Antique Script.)
Related post: Silverlight v3 ClearType Font Rendering – A comparison