How to embed and use the Google Web Fonts in Silverlight

There are a few steps necessary to using one of the Google Web Fonts in Silverlight.

Step 1

Go to the directory of web fonts here.

  image

Step 2

Pick your favorite font and click the embed link:

SNAGHTML5af9c8a9

Step 3

Verify the license is acceptable to your needs.

SNAGHTML5afad2c6

Step 4

Click the “Get the code” tab:

image

Copy the location of the CSS and open it in your favorite editor. I just paste it into a new tab in Chrome. But you could open it in Visual Studio if you’d like for example (just File > Open).

Step 5

Grab the font URL from the CSS (copy the link to the clipboard).

image

Step 6

From the same tab in Chrome, I paste in that value which prompts me to download the file:

Give the font a file name and save it locally.

image

Step 7

In Windows 7, installing Fonts is easy (as easy as it should have been for years). For other operating systems, consult your OS docs.

SNAGHTML5aff9164

In Windows 7, simply click the image button.

Step 8-Blend 4 (RC)

In Blend 4, to use the font, you’ll need to select it once as a Font choice:

 image

Click the “Embed” checkbox to include it in your XAP file.

image

Step 8-Visual Studio 2010

In Visual Studio 2010, copy the font file to a new folder (suggest something like Fonts). Set the build action to Resource:

image

Step 9

Then, to use the font, set the FontFamily to be the Path/FileName.ext#FontName as shown here:

image

<Button Content="Login" Height="54" Margin="21,156,16,0" 
                x:Name="button1" 
                VerticalAlignment="Top" Click="button1_Click" Grid.Row="1" Grid.Column="1" 
                FontFamily="FONTS/INCONSOLATA.TTF#Inconsolata" />

 

Step 10

Sit back and enjoy the new font.

2 Comments

  1. Im curious if there might be a way to load these directly from google after the silverlight app loads in the browser?

Comments are closed.