Silverlight custom fonts – How to and issues.

I have been working on a few projects lately, one of them requiring a custom font to be embedded into the Silverlight application. It’s really simple to do.

Open your project in Visual Studio. First thing is to add the new font to your project.

Right click your project in the tree > Add > New Item and select the font from the browser. (Note: You can’t add a font while it sits within your windows folder, copy the font out of the folder to your desktop or something to add it.)

once the font is in the tree, right click it and go to properties.

Build action = Content
Copy to Output Directory = Copy if newer

So they should now include your font into the project when you build it.

Next up is to put it into the XAML.

<TextBlock
Height=”29.5″
Text=”INFUSION”
TextWrapping=”Wrap”
Width=”114.417″
FontSize=”24″

FontFamily=”./GOTHIC.TTF#Century Gothic”
/>

and TADAHHH! Custom font in your Silverlight app.

So that was pretty simple hey, but there is a problem with it.

If you use Expression Blend to make your Silverlight apps you will run into some issues with using custom fonts. Its a bug that seems to cause a lot of trouble when using custom fonts in your application.

If you try to edit your project in Blend you will probably get this error

You can simply get rid of this error by building the project, but you will notice that when it was loaded in blend, it was loaded as a WPF application and not Silverlight, so you don’t have the state manager and your project tree is empty. So you can edit your current application, but you cannot add new items to it.

The only way around this is to remove the references to the new font in your application until you have finished your application, then add the font references (or you can just comment them out).

So now you can have all your completely outlandish fonts in your applications and its still real text, not pictures!!! Totally sweet.


9 Comments so far
Leave a comment

actually for the supported method at release, look at http://silverlight.net/learn/learnvideo.aspx?video=69800 — same thing as above, just change the output type.

Comment by timheuer

Hi Tim,
Thanks, I tried changing the Build action to Resource but it still seems to throw the exception in Blend 2.5 June preview. I have read a few different posts on people getting the same issue as well.

Comment by agkdesign

yes, the blend 2.5 june preview will throw an exception (known and fixed i believe), but you can set the setting in VS and it should work…but opening in blend will have an exception temporarily in the design surface. the UI in blend will actually change as well so this process is simpler even from that tool!

Comment by timheuer

[...] Silverlight: Silverlight CMS Demo Silverlight Particle Generator Silverlight custom fonts – How to and issues [...]

Pingback by Links For August 21st 2008 | .Net

[...] Mike Taulty discusses the new controls from Intersoft and Telerik. From SilverlightCream.com: Silverlight custom fonts – How to and issues. Alex Knight discusses adding a font to your Silverlight project and then talks about a problem with [...]

Pingback by Silvelright Cream for August 20, 2008 -- #352

[...] – bookmarked by 1 members originally found by briansm on 2008-08-22 Silverlight custom fonts – How to and issues. http://agkdesign.wordpress.com/2008/08/20/silverlight-custom-fonts-how-to-and-issues/ – bookmarked [...]

Pingback by Bookmarks about Silverlight

After reading the article, I just feel that I need more info. Can you share some resources please?

Comment by Liza

There is a new way to embed fonts, directly from Blend, just select the font you want to apply to the text from the drop down, and then you can simply click the embed button and your good to go!

Comment by agkdesign




Leave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>