Silverlight 3 - Custom Fonts

As you go on with Silverlight, one thing sticks out if you are a designer: you have about 9 fonts to play around with. Well, with very little digging, you will find there is a way to get the fonts you want. You can easily take a font and add it to your Silverlight app, and best of all it is embedded into the app so it cannot be ripped out. Today, I will show you how to get custom fonts, not only in Visual Studio, but with Blend as well.

There is really no hiding it, I like custom fonts. A lot. There is something about having the right look and feel that gets me. I will be the first to admit that I like design work, but typically design changes require programming changes. For Silverlight, adding and using custom fonts in extremely easy.



To start, we are going to go through the process in Visual Studio. Assuming you have already created a Silverlight project, the first thing you have to do is add a font to your project. You can add it inside a folder, or anywhere you want, but you have to add a font:

Once you have a font inside your project, all you have to do is embed it into your Silverlight app. To do this, you have to set it's build action to resource:

As I stated, setting it's build action to resource will embed the font inside the Silverlight application and make it available for use. To use it, all you have to do is set the FontFamily of a control to point to it. This is slightly more tricky that just a font name:

As you can see, you have to point to the file first, then the font you wish to use. This allows you to use more than one font file, and each font file can have more than one font inside it. As long as you use this format in the FontFamily field, you will have a custom font.

If you wanted to organize a little more and used a "fonts" folder in your project, you have to use the path to that font, instead of just it's name:

It is really that easy. In three quick steps you have just embedded fonts and used them in your Silverlight app. Since they are embedded inside your application, it means that wherever the app is, the font is there too, making the custom font mechanism even better.

But for all of you who use Blend, the process to use the fonts you want is slightly easier. However, it is unfortunately not that obvious how to do it. If you have ever used Blend, you will most likely realize that if you try to use a font that is not available, you will get a pretty nasty message:

Even though the font selection has all your system fonts to choose from, you can't use any non-standard Silverlight fonts unless you "Embed" them first. The error message tells you that much, but leaves you to figure out how to do this yourself.

The key here is a devilishly simple Font Manager. All the Font Manager is, is a list of your current system fonts, but with checkmarks that allow you to embed the font inside your Silverlight app. This Font Manager can be accessed with the Tools menu:

As you can see, all you have to do is check the box next to the font, then tell Blend what character sets you want to use from the font. Hit ok and your font is now available for use. Easy process, just one that might be a little hidden.

And that is how you can add custom fonts to your Silverlight applications, at least using Visual Studio or Blend. I hope this helps you get the look you want, and just remember that if you need coding help, all you have to do is Switch On The Code.