• Embedding fonts in Silverlight 2

    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!

    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
  • bursa said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Answered offline. Thanks, Tim!

    8/10/2008 11:33 AM
  • esevgi said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    thanks you , perfect Post.

    8/15/2008 10:13 AM
  • Nirav said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Hey!
    Your article is really nice one But i am still hungry to knoe much about the fonts in Silverlight.Actually I want to change "foreground property" of textblock on mouse enter and mouseleave event as well.I gt it correctly for changing fontsize but nt getting for foreground.Plz help me come out of this.

    8/17/2008 11:19 PM
  • Nirav said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Hey Tim Thanx Again
    I got the solution.Although I was nt using storyboard.I just made a instance(obj1) of class SolidColorBrush().and then assign value to textbox1.foreground = obj1.color.Anyways thanks for your quick reply.I want one more favour if you can plz help me.I want to create whole web app. in silverlight.I had created the homepage.Now i dont knoe how to add another aspx page into it.Hope you wud comment on it.

    8/18/2008 9:27 PM
  • timheuer said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Nirav: you wouldn't add an ASPX page into a Silverlight application, you'd continue to build your XAML or XAML user controls into your Silverlight appication.

    8/19/2008 6:51 AM
  • Nirav said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    HI
    Thanks for that now i had added xaml pages to it but m getting trouble in navigation.I got some source thru net for that but all are in c#.I am trying to convert that in VB but its not working.I am stuck up here.

    8/19/2008 9:37 PM
  • timheuer said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Nirav: see silverlight.net/learn/learnvideo.aspx?video=69800 for a supported method for Silverlight 2

    8/19/2008 9:44 PM
  • Nirav said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Hey Thanks man
    You are just great.You wud think tht I am gettin free tution from you but I could not stop myself asking questions.Now I am trying to have "include file(that we use in aspx page for repeated html)" in a Xaml file.Is it possible in Silverlight or will have to find some alternate.
    Thanks again.Have a nice time there

    8/19/2008 11:22 PM
  • timheuer said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Nirav: you don't use the same model as ASPNET, so there isn't a concept of "includes" -- but you can create your own XAML user controls and add logic in there.

    8/20/2008 8:00 AM
  • Nirav said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Thanks Tim
    It was so kind of you to guide me.Actually I am new to Sl and gt the wrok load so I had to find shortcuts,any ways I succeded finding substitute for "include files".Now Design is almost over,now I am trying to add one class,in which I want to write each and every functions used thru out application.But while importing some of namespaces I am getting error.Can u tell me y it is so.Below are some

    "Imports System.Web.HttpContext
    Imports System.Data.SqlClient
    Imports System.Drawing
    Imports System.Drawing.Image
    Imports System.Drawing.Imaging
    Imports System.Net.Mail"

    8/21/2008 12:36 AM
  • timheuer said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Nirav: the classes you are trying to use are not a part of the Silverlight managed runtime. Silverlight has a subset of the base class libraries. For instance, System.Data.SqlClient and System.Net.Mail are not available for sure.

    8/21/2008 11:17 AM
  • Nirav said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Thanks Tim.

    8/22/2008 2:36 AM
  • Nirav said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Hi Tim
    Is it possible to find any alternative for such namespaces other then "webservices".or this is the only way

    8/25/2008 9:31 PM
  • timheuer said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Nirav: if you want to access data from a client in a sandbox in a browser (aka Silverlight), you're safest route is to use a service architecture. Anything otherwise (i.e., direct access to your data source) would be increasing your attack surface of your application. This would be true of any rich client platform.

    8/25/2008 9:37 PM
  • Nirav said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Thanks Tim
    This means I dont have any option but learn building webservices or WCF.
    Its ok let me try this .

    8/26/2008 12:38 AM
  • Terence said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    This method downloads the TTF file on to the person's computer, right? Can this be somehow done by embedding TTF into a binary DLL or somehow that would make reverse-engineering / font-extraction IMPOSSIBLE? Or at least really really hard?

    8/27/2008 12:19 AM
  • Samar said:
    Gravatar
    # Embedding fonts in Silverlight 2


    Hello TH
    Useful article .Thanks for that.Still more to learn,I am confused about validating the forms(aa...h we dont have forms in SLB2) So how to deal with it any comments.

    9/2/2008 3:24 AM
  • RedSamurai said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    Hello!
    Thank you so much for the tip, it was very useful! This said, what I found pretty interesting is the "#" use which could turn out to be really handful for loading images within a package just with XAML!

    Let's say that I have an image (say "image1.png") that is in the root of a package (say "images.zip") on the file system repertory "C:"
    My question is: Is it possible to load the image with XAML in an Image control by using the "#" syntax?
    i.e: I would have

    9/26/2008 9:40 PM
  • tomask said:
    Gravatar
    # re: Embedding fonts in Silverlight 2


    My favorite megaupload search engine is megauploadfiles.com it’s the most powerful an easy to use. megauploadfiles.com has incredible speed of searching rapidshare links in the internet.
    megauploadfiles.com database include all rapidshare links.

    10/23/2008 8:08 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 2 and 7 and type the answer here: