Click here to Skip to main content
Click here to Skip to main content
Go to top

Using Custom Fonts in Silverlight

, 30 Sep 2008
Rate this:
Please Sign up or sign in to vote.
Describes the usage custom font in Silverlight

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.

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:

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

License

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

Share

About the Author

priti_sisodia
Software Developer
Unknown
efficient and affordable code...

Comments and Discussions

 
GeneralCustom Pixel Fonts in Selverlight and WPF PinmemberNavinBiz27-Aug-10 0:15 
GeneralMy vote of 1 PinmemberVickyC#7-Nov-09 21:38 
GeneralDoesn't work PinmemberDZaK8312-Oct-08 7:13 
Hey, it doesn't work in new Silverlight 2.0 RC0 version.... :/
 
I hope it will work in offical RTW version Smile | :)
 
Best Regards
JAcek Ciereszko
http://geekswithblogs.net/SilverBlog/
 
Work smart not hard

GeneralImportant! Licensing.. Pinmemberrob_houweling7-Oct-08 1:24 
Generalthanks PinmemberAhmed Galal6-Oct-08 17:48 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 30 Sep 2008
Article Copyright 2008 by priti_sisodia
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid