Sprinkle some Google Fonts into your projects

Are you tired of using standard Windows fonts such as Arial or Verdana in your RoboHelp projects? You and me both. Why not try Google Fonts to jazz things up a bit?

If, like me, you’re tired of using standard Windows fonts such as Arial or Verdana in your Help projects, why not try Google Fonts to jazz things up a bit? It’s a breeze to set up and frees your readers from the need to have the font installed locally on their PCs. Simply take your pick from the extensive Google Fonts library, copy a line of code, and then apply the font in your stylesheet. It’s that simple. Let’s take a look…

How to use

First up, go to www.google.com/fonts and browse the font collections – there are a number of filters and previews available to help you narrow things down. When you’ve found the font you want to use, for example Open Sans, click the Select this font button (it’s the one with a plus symbol on it). This adds the font family to your personal collection, which appears in the popup at the foot of the screen. You can add multiple fonts, but for the purposes of this example we’ll stick with one.

Next, click Family Selected at the bottom of the screen. When the popup opens, notice that there are 2 sub headings – Embed and Customize.

Under Embed, click @Import, and copy the following into the top of your CSS:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Now you can use the following rule to assign the font family against the desired style in your CSS. For example, you may want to apply this to the entire body or just to a particular heading. The choice is yours! In the code snippet below, heading 1 will use Open Sans.

h1 {
  font-family: 'Open Sans', sans-serif;
}

Customising further…

By default, only the regular weight of the selected font can be specified in your CSS. However, it is also possible to add other variants to the import URL, so that you can apply font styles like light, bold, extra bold, etc. This is done under the Customize heading in Google Fonts by simply ticking the desired styles. When you’re done, go back to the Embed heading, and copy the import URL.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

Back in your CSS file, all that’s left to do is specify the font sizes against the desired styles. This is done by using the font-weight attribute. For example, to make heading 1 use the bold variant you declare this by setting it to 700:

h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
}

Each font family may have different weights available, but typically these are the standard offerings:

• Light (300)
• Light italic (300i)
• Regular (400)
• Regular italic (400i)
• Semi-bold (600)
• Semi-bold italic (600i)
• Bold (700)
• Bold italic (700i)
• Extra-bold (800)
• Extra-bold italic (800i)

Download

To save you the bother of setting this up, I’ve created a simple RoboHelp project with a working demo already inside. This showcases 5 different fonts across styles for heading 2 and paragraph formatting. Check out the live demo or download the project for free now.