Using custom fonts in the Navigation pane

[Deb Sauer]

Hi

I'm using custom fonts in my webhelp. To do this, I created a folder for the web versions of the custom fonts and put it in the same folder as my css. I then added the font face elements to the top of my css (in Notepad). Next I used the custom font name for all the style defined in the css (in Notepad). That makes the content of the topics use the custom font. All good.

Next, I edited the htt file (in Notepad) to use the name of the custom font. Now the breadcrumbs and topic footer use the custom font. All good.

Finally, I want to use the custom font in the navigation pane (the text next to the books and page icons). I edited the skn file (in Notepad) to use the custom font. I also added a dependency for my css to the bottom of the skn file. Then I generated the webhelp.

When I launch the help, the browser (IE) doesn’t allow running scripts or ActiveX controls (this is normal). At this point, the TOC in the Navigation pane looks like it uses the correct font. Once I click to allow IE to run scripts, etc. the font in the TOC changes to something that looks like Times or some default serif font.  So, it appears that something in the javascript is changing the font.

For good measure, I checked the whtdhtml file and the custom font name is used there.

Any ideas on what's happening and how to get my custom font to appear in the Navigation pane?

BTW, I use images only in the toolbar pane (that spans the top of the webhelp window), so I don't need to specify the custom font there.

Deborah

[Willam_van_Weelden]

Hi,

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.

Greet,

Willam

[Deb Sauer]

Hi William

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:

setFont("Normal", "MyFont","10pt","Black","Normal","Normal","none");
setFont("Hover", "MyFont","10pt","#004080","Normal","Normal","underline");

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).

Deborah

[Willam_van_Weelden]

Hi,

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.

Greet,

Willam

[Deb Sauer]

Hi

I figured out how to do it. Thamnk you, Wiliiam, for your responses.

Here's what worked for me:

Fonts

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.

CSS

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.

HTT

In Notepad, or some other similar editor, change the fonts used in this file to one of the custom font names.

whtdhtml.htm

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!

Deborah