Using Custom Fonts in Silverlight

• Download Tutorial4 - 2.27 MB

Introduction

The objective of the article is to create a silverlight page, which will demonstrate use of customized fonts in text.

Background

Default Silverlight font set only support below font families

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Lucida Grande
• Lucida Sans Unicode
• Times New Roman
• Trebuchet MS
• Verdana

Lucida Grande and Lucida Sans Unicode in turn are aliases for the same font and are specified as a pair for compatibility reasons.

Silverlight do have rich support for embedding and using the custom font. Any custom font may be used and shipped along with the deployed .xap file. This will provide for greater usability and consistency.

Using the code

Step 1:

Open Visual studio 2008 IDE and select new Silverlight project. Choose the name of the project.

Step 2:

Select the “Add a new web to the solution for hosting the control option from the list, which appears just after creating a Silverlight project. This option will create an entire website to host and test the Silverlight application.

Replace the <Grid x:Name="LayoutRoot" Background=”white”></Grid> with the code given below.

<Canvas x:Name="LayoutRoot" Background=”white”> </Canvas>

represents the container of the controls we will be using.

Step 5:

In the Solution Explorer window, select Projectname and right-click to open the popup menu and Select Add>Existing Items to open the Add Existing Item dialog box and select any open font (.ttf) file.

Step 6:

Select the font file from the VS2008 solution explorer,
In the Properties window, select Build Action option and set its value to Content. This converts the .ttf file into a Content that can be used by the project. Now, please to build the project.

Switch back to the Solution Explorer window and select projectname from solution explorer. Right-click to access the popup menu and select the Build option. After the build is complete, you are ready to use your custom font.

Step 7:

To add code to use your project, select the XAML code view and use the following format to specify your font:

FontFamily=“<deployment_file_name#font_name>”

Where FontFamliy is a class that is used to specify the names of the fonts font_file_name is the filename of your font that has a .ttf extension # symbol is used to separate the file name and font name font_name is the name of your font.

In our example, the syntax will look like:

FontFamily="SilverlightApplication2.xap#Freestyle Script"          

Where the font name is “Freestyle Script”. The pound/hash symbol is used to separate the two names.

To add two customized fonts to the project. The code will be like this:

<TextBlock Canvas.Top="80" Canvas.Left="10" FontSize="24" 
           FontFamily="SilverlightApplication2.xap#Freestyle Script" 
           Foreground="Purple" Text="Free style Custom Font." />
<TextBlock Canvas.Top="80" Canvas.Left="10" FontSize="24" 
           FontFamily="SilverlightApplication2.xap#Freestyle Script" Foreground="Purple"
           Text="Free style Custom Font." />
<TextBlock Canvas.Top="120" Canvas.Left="10" FontSize="24" 
           FontFamily="SilverlightApplication2.xap#JOKERMAN" Foreground="Purple"
           Text="Free style Custom Font." /> 

Points of Interest

Silverlight goes an extra mile to ensure that the look and feel for all the browser remains the same and provide the user with a true RIA experience. Using custom fonts in silverlight and redistributing it by packaging it in .xap file makes the programmer job really easy.

You must have Silverlight installed on the browser if you wish to execute the code provided along with. If Silverlight is not installed then you will be redirected to a site where you may choose to download it.

History

Version 1.0