This story is for intermediate to advanced help developers. It requires knowledge of HTML, CSS, and a help authoring tool such as MadCap Flare or Adobe Robohelp.

Have you ever been bored using Georgia, Tahoma, Verdana, and (sigh…) Arial over and over in your help projects? The font-face property has been available for some time in Cascading Style Sheets (CSS), but browser and font foundry support are only now allowing use of fonts other than those that ship with operating systems and applications, without workarounds like sIFR and cufon.

New technologies have sprouted up, with Google creating its own font API, and Adobe announcing font support through TypeKit. However, you can also save and host freely available font files on your company’s web server, or install on your users’ PCs, and use these fonts in your WebHelp projects. The web site Font Squirrel creates the CSS for you, using only free, embeddable fonts.

There are thousands of free fonts out there, but not all font creators support font embedding, so be sure to read any license agreement before using them in your projects.

MadCap’s Flare help authoring tool (HAT) uses CSS to style its WebHelp, so you can easily  embed fonts into your help. This should work similarly in Adobe Robohelp.

You can use the fonts locally, in addition to on a server. The CSS and font files are quite small, taking up only a few kilobytes each, so it shouldn’t add a lot of overhead to your projects. All major browsers, including Internet Explorer 7, 8, and 9, Firefox, Chrome, Opera, and Safari, currently support using the font-face attribute, but of course they are implemented differently. IE supports the EOT format, while most other browsers support TrueType (TTF) and some OpenType (OTF) format fonts.

Downloading Fonts

Since 95% of the work is done for you (did I also mention free?), we’ll use Font Squirrel’s font face kits. These kits include the CSS file for the font, which defines the @font-face properties you need, and the font files. All you need to do is change the path to your fonts on the server or local machine (not the windows/fonts folder), and then add these CSS files to your Flare project. I like this modular approach to the font files, originally shown to me by John “VSC” Zavocki at a Drupal meet-up. It’s easy to use, reduces clutter in your CSS files, and allows you to easily swap fonts by referencing a different CSS file. I downloaded and used the Gentium serif font for body text, and the PT Sans sans-serif for headings.

Modifying CSS Files

The only change you need to make in the CSS files is to specify the path to the fonts folder. I keep it simple, and place the fonts folder directly below the stylesheets folder (in Flare, this is in Content/Resources/Stylesheets). You then need to change the path in two places in each font’s CSS file: for the EOT reference and the TTF (or OTF) reference. In this case,  you just add the fonts/ path to each URL reference, shown in bold in the following example:

 @font-face {
      font-family: 'Gentium Basic Regular';
      src: url('fonts/GenBasR.eot');
      src: local('Gentium Basic Regular'), local('GentiumBasic-Regular'),
      url('fonts/GenBasR.ttf') format('truetype');
}

In your project’s master CSS file, you then reference the font-family you want. For example:

 body {
      font-family: 'Gentium Basic Regular', Georgia; serif;
      font-size: 14px;
      font-weight: regular;
}

As I learned the frustrating way (“…why won’t this work?!?“), font names with spaces must be enclosed in single, not double, quotation marks.

Configuring Flare

1. Using Windows Explorer, copy the CSS files to the Content/Resources/Stylesheets folder.
2. Create a fonts folder below the Stylesheets folder, and copy the font files to it.
3. Open your Flare project.
4. In Flare, select Project>Add Stylesheet..
   
5. Select New from existing, then click Browse (…) to locate and import the stylesheet into the project.
   
6. Enter the name of the CSS file in the File Name text box, and click Add.
7. On the Flare toolbar, click Open Master Stylesheet.
8. Click the Options drop-down, and select Link Stylesheet.
9. Add the font CSS files by clicking the double right arrow to move the file to the right, and click OK.Note: This adds an @import declaration in your master CSS file.

When you build your project, the fonts should appear in the output.

Happy fonting! Let me know if this was helpful, or if you have any questions, in the comments.