Adobe RoboHelp: Use Custom Fonts

When you are creating content for the web, you have to keep in mind that you can only use a limited set of fonts: the Web Safe Fonts. Web Safe Fonts are fonts that are available on all browsers and devices. This includes fonts like Arial and Times New Roman. Other fonts such as Wingdings will only work on specific browsers. In this case, it will only work on Internet Explorer on Windows. This means that you can’t just use your company’s font in online materials.

To use fonts that are not web safe, you have to embed the font files in your style sheet with an @font-face rule. In this post I show how you can add a custom font to RoboHelp.

For this example I’ll be using the font Folktale.

Note:

• Many fonts have licenses forbidding you to redistribute them in this way. If you want to use this method, make sure you have the required licenses.
• There are also online provides whose fonts you can embed. Just google “online font providers” and you’ll get lots to choose from. Or see our post on using Google Fonts.

Install the Font on Your PC

If you want the font to be usable in RoboHelp, install the font on your machine:

1. Double click the font file.
2. Click Install to add the font to your computer.

Embed the Font

1. Open your CSS file with Notepad++ or another text editor.
2. At the beginning of the file, add the following code:

@font-face {
   font-family: Folktale;
   src: url("Folktale.ttf");
}

Save your changes.

If you want to embed a different font, change the Folktale name with the font of your choice.

Add Font to RoboHelp Project

After you added the font to the CSS, you have to add the font to RoboHelp:

1. Open your RoboHelp project.
2. Add the font file as a baggage file to your project. Make sure the file is in the same folder as your CSS file:

You can now use the font in RoboHelp as you would in any application. When you generate the help, the font wil be available for all devices and browsers.

Note: You need to add the font to every project you want to have the font available in the output.