• Embedding fonts in Silverlight 2


    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!

    Monday, March 10, 2008 10:36 PM

    PostTypeIcon

Comments.

  • Gravatar
    # re: Embedding fonts in Silverlight 2


    Hiya Tim, good call. It should be nice to mention that I only got this to work when changing the build action for the font to "content".

    3/11/2008 12:44 AM
  • Mark Heath said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    thanks for this, very useful. Do you know of any sources of fonts whose license would allow you to use them in this way? I have been looking for some more interesting fonts for my own Silverlight apps, and I've found lots of nice looking "free for personal use" ones, but I'm not sure about the licensing implications of using these in a Silverlight app

    3/11/2008 2:30 AM
  • Joe Levi said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    That's awesome! Thanks for doing the research for us!

    - www.JoeLevi.com

    3/11/2008 11:21 AM
  • Gravatar
    # re: Embedding fonts in Silverlight 2


    Way to go, thanks for the info!

    3/12/2008 1:22 PM
  • Gravatar
    # re: Embedding fonts in Silverlight 2


    How do you do this in VB.net

    5/9/2008 11:23 AM
  • timheuer said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    @patrick: in Silverlight 2 there is no code needed. the code above is javascript using Silverlight 1.0. So no VB or C# code is needed to do this.

    5/9/2008 1:40 PM
  • kpantos said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Hey Tim,
    I followed your instructions and embedded my font on my Silverlight application. I switched its type to content and made sure that the font exists in the *.xap file. I then changed the FontFamily property of a control to reference the new Font.
    Although this works in the Blend 2.5 designer (I can see the selected font), I keep getting a Download exception when trying to run it.
    Do you have any idea what's going wrong? Have you tried it?
    Thanks

    5/12/2008 7:38 AM
  • timheuer said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    @kpantos: what is the exception being shown? have you looked at the http traffic to see if there is any bad request?

    5/15/2008 10:35 AM
  • Sylvie said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Hey Tim, gorgeous!
    Just what I was looking for. Take care,
    Sylvie

    6/25/2008 12:34 AM
  • Sylvie said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Hey Tim, it´s Sylvie again. You said: "The archive doesn't have to only have font files either...which is cool at times." And I am now trying to also put in the CliendBin folder more kind of files than just fonts. I then embedded a XML file in the ClientBin folder. Could you tell me how I can read it? I tried the StreamResourceInfo with System.XML.Linq but it doesn´t work. Any idea? When you also know how this works with Images, just send me the code. It will be more than appreciated.
    Many thanks,

    Sylvie

    6/26/2008 1:42 AM
  • timheuer said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    @Sylvie: you can just use a WebClient object to request the URI to the endpoints of where your XML/images are. Assuming they are in the same location as the XAP (same domain I mean) you should be fine. Once you get your XML you can load it into an XDocument or with your Image to a Stream.

    6/26/2008 8:52 AM
  • Gravatar
    # re: Embedding fonts in Silverlight 2


    How do I change the the build action? I can't find any option or setting for this....

    7/8/2008 6:54 AM
  • Gravatar
    # re: Embedding fonts in Silverlight 2


    Answered offline. Thanks, Tim!

    7/9/2008 2:20 AM
  • Turkey said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Thanx You.. Perfect Docs

    7/30/2008 10:57 PM
  • Andres said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Hey man,

    Welli tried to use your code with Silverlight 2 beta, but I cant find the downloader, am i missing a reference?

    I tried this too: Downloader myDownloader = new Downloader()...

    My VS2008 cant find the Downloader...

    Please answer me man.

    8/6/2008 4:18 AM
  • Andres said:
    Gravatar
    # Cant find the Downloader


    Hey man,

    Welli tried to use your code with Silverlight 2 beta, but I cant find the downloader, am i missing a reference?

    I tried this too: Downloader myDownloader = new Downloader()...

    My VS2008 cant find the Downloader...

    Please answer me man.

    8/6/2008 4:45 AM
  • timheuer said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Andres: See http://www.timheuer.com/blog/archive/2008/07/10/embed-fonts-and-file-upload-in-silverlight-2.aspx for a link to a video describing this process and how to do it in a supported manner. The Downloader object is for use in Javascript.

    8/6/2008 7:57 AM

Your Reply.

  Comment Form  

Fields denoted with a "*" are required.

*Your name:
Subject:
Your blog:
Your email:  (will not be displayed)
*Your message:

 
Please add 3 and 3 and type the answer here: