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.


Step 2

Pick your favorite font and click the embed link:


Step 3

Verify the license is acceptable to your needs.


Step 4

Click the “Get the code” tab:


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).


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.


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.


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:


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


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:


Step 9

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


<Button Content="Login" Height="54" Margin="21,156,16,0" 
                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.


  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.