Skip to main content
Deb Sauer
Deb Sauer
Inspiring
July 28, 2011
Question

Using custom fonts in the Navigation pane

  • July 28, 2011
  • 1 reply
  • 1110 views

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

This topic has been closed for replies.

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
July 29, 2011

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
Deb SauerAuthor
Inspiring
July 29, 2011

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
Willam van Weelden
Inspiring
July 30, 2011

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices