@font-face
A way to ensure your readers see the font you want when they don't have it installed locally is to use the @font-face CSS method. In response to a forum post, Amber Boughen provided a complete answer. It is used in this topic, which has a separate CSS file. The method ensures your readers see your chosen font even if it is not installed locally on their device.
The Steps
- Download the chosen font file. Check the licence to ensure it can be used in this way.
- Save the TTF or OTF file to your project. I suggest it is saved in the same location as the CSS file used.
- Install the font on your PC so that you see the font in RoboHelp. In Windows 10 you simply right click the downloaded file and select Install.
Note the name of the installed font by looking in Settings > Personalisation > Fonts or any font dropdown, it may not be the same as the name of the file you downloaded. In this case the file is Quicksand-Regular.otf but the installed font is Quicksand.
- Add the following to your CSS file
@font-face {
font-family: "Quicksand";
src: url("Quicksand-Regular.otf");
}
Note that font-family is the name of the installed font but the file referenced in the URL is Quicksand-Regular.otf.
- Add the font-family to the styles that are to use this font as shown in this example. By adding it to each style you ensure it shows as the chosen font in Properties in RoboHelp.
h1 {
font-family: Quicksand;
font-weight: bold;
font-size: 24.0pt;
}
- In RoboHelp 2019 it is not necessary to add the font file to baggage, it will get uploaded automatically from the reference in the CSS. In Classic versions of RoboHelp, you need to add the file to baggage.