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.
Susan Tabnik
I added this to the top of my CSS, with link from the Google Fonts site page:
@import url(‘https://fonts.googleapis.com/css?family=Roboto’);
Then, my RoboHelp project gave me an error, “Cannot open ‘https’ URLs: ‘https://fonts.googleapis.com/css’
What can I do to enable this?
Willam van Weelden
This error appears when you try to open the CSS for editing. RoboHelp doesn’t know what to do with the line of code. But you can ingnore it.
For example, the following code will style the paragraphs correctly in the output. Though the WYSIWYG doesn’t show the Roboto font. That’s the downside of this method.
@import url('https://fonts.googleapis.com/css?family=Roboto');
p {
font-family: Roboto, Verdana, Arial, sans-serif;
}
Using Custom Fonts may be a workaround that works better for you.
Susan Tabnik
Thank you! So, you are saying to ignore the error messages, as long as I have it set up like above? So even though I cannot select Roboto from the font drop-down in the RH WYSIWYG, the font is defaulted from the CSS, correct? Do I also need to add a “@font-face” statement to the CSS?
Also, it was mentioned that an alternative was to add a statement in the header of each HTM, with the reference to the Google Fonts site. So this is not necessary if it’s in the CSS, correct? When I tried that, RoboHelp complained that there were “illegal characters” in that statement. Not sure what was illegal characters in the URL.
I really appreciate your help here , Willam. Our marketing director here is very picky about fonts, and this is help for a new product. And also thanks for all your great assistance on the RoboHelp Forum!
Susan
Susan Tabnik
I just downloaded the TTF files for Roboto from the Google Fonts site! I copied them to my project folder. Then added them as baggage files. I added the @font-face statement for Roboto to my CSS, and changed the other font references. YAY!!! So I think that’s what I’m seeing now – Roboto!
For some reason, I was thinking that I couldn’t download the TTF files from Google – but I could.
Thanks so much!
Susan