Reader Level:
ARTICLE

Using Embedded Fonts in Silverlight 2

Posted by Deepak Pathak Articles | Silverlight with C# June 15, 2009
This articles guides you on how to use other fonts in your application other than the ones provided by default in Silverlight 2.
  • 0
  • 0
  • 10097

 
Today, I am going to show you guys, "How to you Embedded Fonts" in your Silverlight2 applications.

Silverlight2 has a very rich library for creating RIA (Rich Internet Applications) but has less features and functionalities compared to its father WPF(Windows Presentation Foundation). This is so because, Silverlight is a browser plugin which gets downloaded to the client machine, the first time a user access any web page having Silverlight content. So for making the download experience smooth, the Silverlight plugin/player has been packed with the minimum and most required features and functionalities, so that its size is less, and it can be downloaded to the client computer ASAP. Once, the plugin has been installed, the user can access the Silverlight pages without any interruption. Currently the Silverlight2 plugin has a download size of 4.6MB.

This is the reason why, Silverlight2 is not provided with a wide variety of Fonts. By Default, a Silverlight2 application supports and provides 9 fonts, mentioned below:


fontNames.bmp


So for using Fonts other than than the ones specified above, we would need to embed it into our application assembly as a "Resource".

We can use the embedded font either using "Code" or "Markup".

For either of the way, first we need to add the desired font into our Silverlight2 application project. I am using a freely available font named "A Cut Above the Rest". You can easily find it and several other free fonts on the following website -
http://www.urbanfonts.com/free-fonts.htm
 

To add the font file to your project, perform the below steps:

  1. Right Click your Silverlight application project, and choose "Add", then "Add Existing Item" menu Item. Then select the font file(with .TTF extension) to be used.


    AddFont.bmp

  2. After the font file gets added to your project, Right-click on the file and click Properties. On the properties window, set the "Build Action" property to "Resource". Setting this property will embed your newly added font file to your application assembly as a binary resource, which can later be used for the usage.

    BuildAction.bmp
So, now we are done and ready to use our newly added font "A Cut Above the Rest". Below example uses XAML Markup to set the new font "A Cut above the Rest" to a TextBlock element.

<TextBlock x:Name="MyLabel" Foreground="Blue" FontFamily="ACUTATR_.TTF#A Cut Above the Rest" FontSize="25">

The above example has a XAML Markup having the following syntax in the "FontFamily" property:  "FontFileName#FontName". For our font, the file name is "ACUTATR_.TTF" and the font name is - "A Cut Above the Rest".

Now, the second way to use embedded font in Silverlight2 application is to use Code. As I work in C#, so I am providing a C# example:
 
 using System.Windows.Resources; /*Use Embedded Font - A Cut Above the Rest*/ StreamResourceInfo sri = Application.GetResourceStream(new Uri("PracticeEmbeddedFonts;component/ACUTATR_.TTF", UriKind.Relative));
MyLabel.FontSource = new FontSource(sri.Stream);
MyLabel.FontFamily = new FontFamily("A Cut Above the Rest");
 

Here, 3 classes are used to retrieve the font from the Font file.
  1. StreamResourceInfo
  2. Application
  3. FontSource

In the above code, the font is retrieved from the assembly as a Resource by using the "Application.GetResourceStream()" method. It accepts 2 arguments. The first argument here follow the following format :- "AssemblyName:component/FontFileName.TTF"

After retrieving the font from the assembly, we can assign it to the control we want to, by first assigning the "FontSource" property with our Font Resource stream object's Stream property. Then we assign the name of the font from that font file i.e., "A Cut Above the Rest".

For the above code to work, an important assembly namespace reference will need to be made i.e., - "using System.Windows.Resources;

After successfully coding the application, our TextBlock will have a font like shown in the below picture:


SampleText.bmp

NOTE :- Not all the fonts that are on the Internet are available for free distribution. For many of them you will need to purchase a license from the owner. So please take this note in mind, while using any font.

Article Extensions
Contents added by Deepak Pathak on Jun 15, 2009
Download File: UseEmbeddedFonts.zip
COMMENT USING

Trending up