Embedding fonts in Silverlight 2
| Comments- | Posted in
- silverlight
- wpf
- xaml
- silverlight 2
- embed fonts
- fontfamily
- setfontsource
UPDATE: The supported method for Silverlight 2 release is shown here: http://silverlight.net/learn/learnvideo.aspx?video=69800. You basically have to make it an assembly resource.
Since the beginning of Silverlight you've been able to embed fonts within a Silverlight application. The challenge in version 1.0 was that you essentially had to use a downloader and some SetFontSource methods on a TextBlock (for example) to do it. I wrote about this a while back when using my own handwriting as a font within Silverlight.
It looked something like this:
this.downloader = control.createObject("downloader");
this.downloader.addEventListener("completed",
Silverlight.createDelegate(this, this.handleFontDownloaded));
this.downloader.open("GET", "timheuer.ttf");
this.downloader.send();
handleFontDownloaded: function(sender, eventArgs)
{
this.header.setFontSource(sender);
this.itemtext.setFontSource(sender);
this.header.fontFamily = "Tim Heuer Normal";
this.itemtext.fontFamily = "Tim Heuer Normal";
}
It isn't incredibly ideal for all situations. It works, and in some scenarios might be valid and fine.
For most, I think we'll want an easier implementation and something that feels a bit more natural. Well, in Silverlight 2, we now have it. Let's take a look at the above sample and how we could do that for Silverlight 2:
<TextBlock x:Name="Header" FontFamily="timheuer.ttf#Tim Heuer Normal" /> <TextBlock x:Name="ItemText" FontFamily="timheuer.ttf#Tim Heuer Normal" />
Okay, so what is happening here? What happened to the script? There is none (obviously). What is happening here is that Silverlight now does the lifting for you. Let's break this down a bit more.
First, the FontFamily is set to "timheuer.ttf" in this example, which is my handwriting font in TrueType format. This font is located next to the applications XAP file which is in ClientBin. It could be located anywhere in the same application domain and you could use an absolute URL here as well. For our purposes, we have a file on a web server.
When we set that in the FontFamily to a file, Silverlight essentially creates the downloader for us in an efficient manner. The font file is requested based on the URI provided and downloaded via a GET request. Once downloaded it parses out the second part (the "#") to look within that font file for the named font. So essentially the format is:
<file>#<named-font>
where # is the delimiter in this format. That's it, you are done. No script needed. If you choose to package several font assets within your application you can put them in a single archive file as well and the same syntax would apply:
<TextBlock x:Name="Header" FontFamily="timheuer.zip#Tim Heuer Normal" />
The same execution happens. Silverlight gets the archive file and then looks at the font file contents in the archive to find the first named font to use. The archive doesn't have to only have font files either...which is cool at times.
Hope this helps!
