Embedding a Font at runtime in Silverlight

Most of us wants our RI Application to be flexible as much as possible, and at the same time compatible and is uniform to the resources that we are using. A common example for this scenario is when using a font family that is not commonly installed in the client’s computer. Now you can picture the problem. Lets say, i have a rounded font, which is widely used in all of my xaml pages and it is not pressent in the users machine. Solution? Embed the font to our application. In this article I’ll show you how to achieve that with these few lines of code.

Add your font file as embedded resource to your Siverlight Project.

1. Add font to project.

2. Set Build Action of your font file as Embedded Resource

After adding the font as embedded resource, we can now call the font in a form of a Stream. But before that, lets see the content of our xaml page.

<UserControl x:Class="EmbedFont.MainPage"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <TextBlock x:Name="txtRoundedFont" FontSize="30" Text="Dont stop learning."/>

On our Xaml page we have a TextBlock named txtRoundedFont and by running the application the result will be something like this silverlight page with its default font family

Finally, in order for this to work, we need to add a loaded event on our xaml pages’ constructor.

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

And inside our loaded event will be this three lines of code.

void MainPage_Loaded(object sender, RoutedEventArgs e) {
	System.IO.Stream streamedFont = this.GetType().Assembly.GetManifestResourceStream("EmbedFont.Fonts.VAGRounded-Black_0.otf");
	txtRoundedFont.FontSource = new FontSource(streamedFont);
	txtRoundedFont.FontFamily = new FontFamily("VAGRounded");

And here is our new TextBlock with an embedded font.

Now how did we achieve that?
First we have the below statement which loads our embedded font resource and assign that to our streamedFont identifier which is of type System.IO.Stream. Now inside our GetManifestResourceStream function is a string parameter which represents our project name “Embed.” then the folder inside our project “Embed.Fonts.” then the file name “Embed.Fonts.VAGRounded-Black.otf”.

System.IO.Stream streamedFont = this.GetType().Assembly.GetManifestResourceStream("EmbedFont.Fonts.VAGRounded-Black_0.otf");

The second line simply assigns our streamedFont bufferred data to the FontSource property of txtRoundedFont textblock.

 txtRoundedFont.FontSource = new FontSource(streamedFont);

Finally, we have to insert our final statment which sets the font family of our textblock.

txtRoundedFont.FontFamily = new FontFamily("VAGRounded");

NOTE: To know the exact name of a font. Double-click the file and check the font name.


Author: francorobles

A soon to be jedi in the art of software development...

One thought on “Embedding a Font at runtime in Silverlight”

  1. Hi, Thanks for such nice and fully illustrative post for fonts in silverlight. Could you please let me know, how can i usestreamedFont with hyperlinkbutton and Button. Thanks in advance.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s