Developer Tips & Tricks - Google Web Fonts API

February 15, 2012

Did you know that Google has an entire directory of open source web fonts that are free for the taking? Better still, they provide an API that makes it super simple to include them in your digital signage Presentations. After you've selected the perfect Google Web Font, there are only 2 steps you need to take to get it working. The first is to reference a particular CSS stylesheet within the head tag of your Presentation's HTML. For example, to include the Fondamento font, add a stylesheet link that looks like this:

&lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=<span style="color: #000000;">Fondamento</span>"&gt;

Once we've linked to the font, we need to actually use it somewhere. The following CSS will apply the font to the entire body of the Presentation. Notice that I'm specifying serif as a fallback font. This is a web safe font that will be used if the custom font is not available. You should always list at least one web safe font in case things go wrong:

body {
font-family: 'Fondamento', serif;
}

Here's what that font looks like in my Presentation:

If you try this, you may notice that text in Gadgets and Text Items are not affected. That's because those components are rendered in iframes, so the Google Web Font has to be included directly inside of the particular Gadget or Text Item, as opposed to adding it to the HTML of the Presentation. For example, add this in the HTML view of a Text Item to apply the Fondamento font:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Fondamento">
<style>
.fondamento {
font-family: 'Fondamento', serif;
}
</style>
<p class="fondamento">This is my custom font.</p>

Get started with Rise Vision

You can request multiple fonts by separating them with the pipe (|) character:

&lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=<span style="color: #000000;">Fondamento|Share</span>"&gt;

The regular style of any requested fonts are returned by default. If you want to use another style, such as bold or italic, you need to add a colon (:) at the end of the font name, followed by the style you would like. For example, a request for a bold version of the Share font would look like this:

&lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=<span style="color: #000000;">Share:bold</span>"&gt;
 

I think it's important to mention that the CSS stylesheet URL used here is not the same type of URL that you would use when specifying a custom font for a Gadget. The URL used by the Google Web Font API points to a CSS file, while the URL you would use in a Gadget links directly to the font file itself.