Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of my favorite tasks in UI design is choosing typefaces. I can't tell you how many hours I spent mulling over a range of typefaces, trying to pick the best one to use in my application. Silverlight, like many tools, uses the term font to represent typeface. If you do not choose a font for your Silverlight element, you will see the default font, which on Windows is Lucida Sans Unicode and on the Macintosh is Lucida Grande. Any element in Silverlight that displays text has a Font Property. If you dig into the font- related properties, you'll find familiar-looking settings.
You can choose a typeface through the FontFamily property. You can change its size. FontWeight specifies how to enhance the thinness or fatness of the text. The two most common settings here are Normal and Bold. FontStyle allows you to access other font renderings. The most commonplace style is Italics. FontStretch lets you change the distance between letters. This setting only works on fonts that have special condensed or expanded versions. Silverlight includes a number of built-in fonts. These are installed with the Silverlight runtime.
As long as you use these fonts in your Silverlight application, you won't have to do any extra work or change any settings. There are many other fonts that are typically installed on end users' computers. These fonts aren't embedded in the Silverlight runtime, but are used if installed on the destination computer. As you can see from this list, they are mostly standard common Windows fonts. If you have a font that is not on the prior to list, you have to embed them in your Silverlight assembly. By embedding, I mean adding a copy of the font file to your application download. The first step to using this nonstandard font is to add a TTF or OTF font file to the project.
Next, you set the build action for that font to resource and then in your XAML you use the FontFamily attribute and use the special pound symbol syntax. Rather than handwrite the XAML, you can use Expression Blend to embed the font and have it generate the XAML for you. Let me add a cautionary word about licensing. Just because you have a font on your computer doesn't mean you have the right to distribute it with your application. Always verify that you have a license to embed your font. To determine if you have the rights to embed, you can use the Font Extension Utility.
This is a utility that's available for Windows XP. Here is a URL to find out more. If you're on Windows Vista or Windows 7, you can just right-click on the file and choose Properties. Let me show you how to do that. I'm looking at the Assets folder inside my Exercise Files and in here I have a font. You can choose any font you want on your computer. Just right-click on the font and choose Properties. Then go to the Details tab and look at this Font embeddability property.
I see that this font is Installable, which means I have permission to embed the font. Now I'll show you how to use Blend to add the font to your project. I'm inside a project called UsingTypefacesAndFonts. I've opened a file called EmbedFont, which has a text block containing the word Explore California. To set font properties, you go to your Property pane and scroll down to the Text section. It has standard font type properties like Bold, Italics, Underscore. You can change the font size by clicking on this combo box, and you can click on this Show advanced properties button to see more settings.
For instance, here's where you set the FontStretch property. To change the font, use this combo box. Let me scroll to the top of this list. Any font that has the blue symbol on the right side is one of the built-in Silverlight fonts. So that means I can choose Arial Black and I know that it's always going to work on the user's computer. Notice that the Embed checkbox is not available at the moment. If I choose a font that doesn't have the blue symbol, let's say I choose this one here, the Embed checkbox turns itself on, I can now click on this to embed that font in my application.
Let me show you what the XAML looks like for that. Over here in my XAML, I can see that the FontFamily is set to use a ZIP file, Fonts/Fonts.zip. That means that inside my XAP file will be a ZIP file that contains all the fonts that are embedded inside my application. I'll return back to the Designer. If you want more control over the font embedding technology, you can click on Font Manager. This shows all of the files that are inside that Fonts.zip file and you can select one and then change which portions of the font glyphs are included.
For instance, if I don't want the Uppercase versions of this font, I can unselect that checkbox and then click OK. Silverlight 5 added support for OpenType fonts. I love the OpenType specification. With this spec, type foundries can be much more expressive with their typeface. In Silverlight 5 you can tap into this power by using the Typography Attached property. On this slide I show a few of the features that are available in OpenType. For instance, ligatures, alternate capitals, different kinds of numeric enhancements like fractions and monospaced numeric fonts.
You can see a ligature example on the bottom of the screen, the letter f in the second word in the word Coffee is a ligature version of the font shown in the first version. Contextual alternates show the beautiful alternate versions of fonts available within OpenType. Notice how the letter g in eggs is rendered in each version. What a charming font! I'll return back to Expression Blend and show you a few examples of OpenType. I'm going to start by opening this file called OpenType. If you're following along with the Exercise Files, make sure that you have a copy of these fonts on your computer.
They are installed by default with Windows Vista and Windows 7. Here I'm using a normal default font and I'm setting the Fraction value to Normal, and here I'm using a normal default font and I'm setting the Fraction value to Slashed. When I used the Candara font, I see how different that looks. If I say Fraction='Normal' and Fraction='Slashed', you can definitely see a difference between the way these fractions are rendered on the screen. Let me zoom into make this a little more clear. So how do you set these properties? Use the Typography Attached property, like this.
Here's a TextBlock, then I say Typography.Fraction='Slashed'. If the open source font has a slashed version of the fraction, it will then render it on the screen. For numeric values, you can use things like the 0s with a Slash through it. That's called Slashed Zero. You can use monospaced fonts, so that your numbers line up in columns when you're using numeric calculations. There is a setting for SubScripts and SuperScripts. The way you work with these is you create a run within your text block and then you apply the subscript or the superscript to the run.
And this last one shows you that Eggs and Toast example. Here's those Contextual Alternates, again, that is switched on with this Typography.ContextualAlternates and Typography.StylisticSet1="True". This says that I want the alternates and I want you to choose one of the sets of alternate fonts. I could spend hours playing with typefaces and Expression Blend makes it easy to work with font properties.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99883 Viewers
56 Video lessons · 112995 Viewers
71 Video lessons · 81829 Viewers
131 Video lessons · 39266 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.