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
- Using Windows Explorer, copy the CSS files to the Content/Resources/Stylesheets folder.
- Create a fonts folder below the Stylesheets folder, and copy the font files to it.
- Open your Flare project.
- In Flare, select Project>Add Stylesheet..
- Select New from existing, then click Browse (…) to locate and import the stylesheet into the project.
- Enter the name of the CSS file in the File Name text box, and click Add.
- On the Flare toolbar, click Open Master Stylesheet.
- Click the Options drop-down, and select Link Stylesheet.
- 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.
Hello Mr. Marsh,
This is a great tutorial and I’m going to try this myself. Thank you very much.
Happy Holidays!
– Patrick
Glad you found it helpful! Let me know how it works out for you.
Happy holidays!
-=Ed.
Extremely helpful article – a year after you wrote it 😀
Oh good! I’m glad it was helpful, Jason. I know the technology has really moved forward since then, and Adobe’s bought Typekit, so you may want to see if one of the font providers will work for you.
I see this post goes back a bit but I’d appreciate a bit of extra help if you don’t mind. Could you clarify what you mean by “All you need to do is change the path to your fonts on the server or local machine (not the windows/fonts folder), …”. I’m new to this and although I’ve managed all the other steps, I’m not sure what that means.
Hi Julie-
Glad you’re still finding this helpful.
If you think of your server as nothing more than a computer with folders, then hopefully that will help you visualize. For example, if you keep your fonts in a “fonts” folder in the stylesheets folder, below your main “help” folder, your server path may look like the following:
edmarsh.com/help/stylesheets/fonts
All you need to do then in your CSS is point to the fonts folder, i.e.
fonts/fontname
The google fonts have come a long way since I wrote this, and they’re really easy to implement. If you continue to have difficulties, that may be the way to go.
I hope this helps. Let me know if you need any more guidance; I’d be happy to work with you via email or another form like Skype.
-=Ed.
Hi Ed,
Thanks for your answer. I’ve got it working now except that Flare isn’t embedding the fonts folder in the webhelp. I copy it in manually: not ideal for our CI process. Did you have to do the same?
Again, many thanks. I owe you a beer if ever you’re in Paris.
Well, I haven’t used Flare in a little while, so I don’t recall my exact process, but it certainly wasn’t manual.
My folder structure in an old project looks like this:
ROOT FOLDER
|_Resources
|__MasterPages
|__Stylesheets
|___Fonts
So the fonts folder is below the Stylesheets folder. Hope that clarifies.
We may be heading to Spain and Germany next year, so I may take you up on the beverage!
Let me how this works out for you.
Hi Ed,
It’s working now! It was working in an empty project, so I did some detective work in the project I was in originally and found an option in the Target editor Advanced tab that was checked: Exclude content not linked directly or indirectly from the target. Hey presto.
Thanks for all your help. You have my email if you come to Paris, right? If you go to Barcelona, check out the Scorpio bar-restaurant (4 Carrer d’Ali Bei, 08010 Barcelona). They have a nice selection of Belgian (and other) beers, the food is pretty good and reasonably priced and I don’t think you’ll find many non-catalans in there. The service is awful though 🙂
Hello – this topic is super helpful, thanks! I know this post goes back a bit, but I am wondering if you remember how you decided on the name for the individual font CSS files?In the example, you renamed the stylesheet ‘ptsans.css’ or ‘Gentium.css’, but how does Flare connect the name you gave to the font file for use in the output? Also, for the typefaces that have several fonts there are several CSS files included, so each CSS file needs to be altered as in the section Modifying CSS Files above?
Hi Michelle-
I’m very happy and more than a bit surprised three years later that this topic is as helpful as it’s been. It’s still the most-hit topic on my site.
I used a modular approach for my CSS files, so I named the font CSS files based on the font that I used, i.e. Gentium was the serif font and ptsans was the sans-serif. When you reference the font-only CSS files in your main CSS file using the @import declaration, Flare then “knows” to use those font files. You certainly don’t have to take the modular approach, and can place the @font-face declarations in your master CSS file.
To answer your second question, yes, you have to create a reference for each variant of the font, i.e. bold, italic, etc. If you use fontsquirrel.com, it will create the CSS for all of the fonts for you when you use the webfont kit I referenced. It looks like their site has changed in the past three years, so the webfont kit is available on each font’s page.
Hope this helps. Please let me know if you have any other questions. Thanks again for visiting!
-=Ed.
Maravilloso!!!!! aplausos!!
Very useful article even four years down the line!
It should be noted that the webfont subfolder will not be copied into the Flare output unless the following Flare option is UNCHECKED:
HTML5 Target > Advanced > “Exclude content not linked directly or indirectly from the Target”.
Thanks very much for the update, Moshe! Glad you still found it useful.
Worked like a charm! But…. I can’t figure out how to use the embedded fonts in my HTML5 skin.
Anybody know how to do this?
Thanks, Ana
Ana, I’m far removed from Flare at this point, so I don’t have much to help you out. Usually this is all handled by CSS, so you may want to look around Flare’s forums and support sites to see if people have a solution.
Embedding Fonts in HTML5 Skin
At the moment, the only way I have been able to accomplish this is to add a line to the index.htm file in the final output. The index.htm file in my project is the name I used for the Output File in my HTML 5 target. Editing the file means that I have to modify that file every time I do a build. I could modify the base file that Flare uses, but I don’t want to do that because other projects do not use the embedded font.
Below is the line I added after the build that made the whole thing work.
Note: I use a properties folder instead of a Resources folder.
Hmmm…. Line didn’t post…. since the line is html the comment box may be trying to use it.
“”
Gaahh….
link rel=”Stylesheet” href=”properties/stylesheets/roboto_regular.css”
Imagine that line surrounded by the appropriate carets and slashes beginning and end.
OK, you shouldn’t have to manually edit your index file each time to include the css. I can’t remember how it’s done, but Flare definitely has a way to use external CSS across all your topics. This post from Madcap may help.
Hi Ed,
Thanks for your response. The topics are fine. The only place I am having an issue is in the Skin. I can’t get it to recognize the embedded fonts and everything comes up as Times. So, if I want the TOC displayed on the left to use an embedded font, I have to edit the index.htm file… which is the file used to launch help.
Ana
Oohhhhhhh. Well that’s different, then, as I believe that index.htm is generated each time by Flare. I took a look at a sample .flskn file in a text editor, and I’m not really sure you could edit that to include the font info. I assume you saw this help topic on using the skin editor? Unless someone else chimes in here, your best bet would to ask on the Madcap forums. If you find an answer, be sure to share with us here. Good luck!
Is there a way I can use Font Awesome icons even if the ‘Exclude Content Not Linked Directly or Indirectly from the Target’ option is checked from Advanced Tab of Target Editor?
Right now, when this option is checked, the Font Awesome icons are not showing up in output.
Hi there – hope you found this post helpful.
If your output is on a Web server, it’s possible you could upload the font awesome file to the server and link to it. Unfortunately, I haven’t worked in Flare in about five years, so I haven’t kept up with all of the changes. Hopefully someone from the community can chime in with some help!