Click here to Skip to main content
15,301,414 members
Articles / Programming Languages / C#
Posted 30 Sep 2008


16 bookmarked

Using Custom Fonts in Silverlight

Rate me:
Please Sign up or sign in to vote.
3.35/5 (7 votes)
30 Sep 2008CPOL3 min read
Describes the usage custom font in Silverlight


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


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.

Step 3:

After the above step, the Page.xaml and page.xaml.cs files will be created and that’s where we will be writing code. Step 4:

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:


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.


Version 1.0


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
efficient and affordable code...

Comments and Discussions

GeneralCustom Pixel Fonts in Selverlight and WPF Pin
NavinBiz27-Aug-10 0:15
MemberNavinBiz27-Aug-10 0:15 
GeneralMy vote of 1 Pin
VickyC#7-Nov-09 21:38
MemberVickyC#7-Nov-09 21:38 
GeneralDoesn't work Pin
DZaK8312-Oct-08 7:13
MemberDZaK8312-Oct-08 7:13 
GeneralImportant! Licensing.. Pin
rob_houweling7-Oct-08 1:24
Memberrob_houweling7-Oct-08 1:24 
Generalthanks Pin
Ahmed Galal6-Oct-08 17:48
MemberAhmed Galal6-Oct-08 17:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.