Check whthost.js. Is the correct font used in the bottom of the file? There are some fonts set there.
Also, is your font available for whtdhtml? Try adding the font-face rule in whtdhtml.js itself.
I found one error. In the skin file, I had added a dependency to my css. It was missing a slash (/) to point to the correct folder level. Now that I've added that, the TOC displays the same font as the Index, Search results, and the topic (content, breadcrumbs, and footer). So, that's good, but on closer inspection, it looks like Verdana, not my custom font.
I changed the font in whthost.js to the name of my custom font and generated the help, but it made no difference. I also changed the font and just opened the help without generating and got the same results.
For your second suggestion, you mean whtdhtml.htm not whtdhtml.js? The custom font is in the lines:
I added the <font> tag to this file, but the tag just shows up as plain text within the webhelp TOC (no matter where I insert it in the file).
I also tried changing the font to my custom font for the Index body and Search results using the steps in Rick's Skinny on Skins (editing the whibody.htm and whfbody.htm files). When I do this, the serif font appears in the Index body and Search results.
It seems like the files cannot "see" my custom fonts (which are in a folder at the same level as my css).
1 person found this helpful
I did mean whtdhtml.htm. Sorry about that.
You talk about custom fonts. If I understand you correctly, these fonts are fonts that are normally not available on every computer. Is that correct?
If so, you need to make the custom fonts available through your css. As always, Internet Explorer may give trouble. Especially IE8 and lower. Check out http://sixrevisions.com/css/font-face-guide/, that explains the ins and outs of custom fonts on the web.
You probably need to add the @font-face rule to whtdhtml.htm. If you only specify a font name without the font itself, the browser may not recognize it and use the default font.
I figured out how to do it. Thamnk you, Wiliiam, for your responses.
Here's what worked for me:
Put web versions of your fonts in a folder at the same level as your CSS. In RH, this means in the top-level of the project and in the !SSL!/Webhelp folder. Alo put these folders in !SSL!/WebHelp.
In Notepad, or some other similar editor, add @ font-face rules to the very top of the CSS. These rules point to the folder with the web versions of the fonts. Then, change the CSS style definitions to use the name of the fonts.
NOTE: When you open your CSS in RH, the font field will be blank. You cannot select your custom font through the UI. I think there is a way to add the custom font names so yuo'll see them in the RH UI, but I'm OK with working with the CSS in Notepad so I didn't bother.
In Notepad, or some other similar editor, change the fonts used in this file to one of the custom font names.
In Notepad, or some other similar editor, put a link to your CSS, for example,
<link rel="StyleSheet" href="filename.css" type ="text/css"/>
I put it immediately after the </head>.
Then change all font names in this file to one of your custom font names.
Keep an edited copy of the whtdhtml.htm file in a safe, non RoboHelp folder so you can retrieve it when needed. (RH overwrites this file everytime you generate/publish. It's easier to keep a copy rather than edit the file repeatedly.
Generating the WebHelp
Generate the help in RoboHelp.
Go to the !SSL!/WebHelp folder and copy the whtdhtml.htm file to it. This replaces the whtdhtml.htm file that RH put there.
Make sure your font folder is in the WebHelp folder.
Open the help and see your fonts.
Publishing the WebHelp
Publish the help.
Copy the whtdhtml.htm file to the publish location. This replaces the whtdhtml.htm file that RH put there.
Make sure your font folder is in the publish location.
Open the help and see your fonts.
NOTE: I put the font folder at the top level of my RH project and in !SSL!/WebHelp. When I published the help, I expected to have to copy the font folder to my publish location, but RH had already put it there. This is great. I don't know how RH knew to do that, but it's one less step I had to do.
Hope this helps someone out!