Changing the font of TOC entries in Responsive Help

[authorinkltd]

I'm just starting to find my way with Responsive help and am creating a project where a non-standard font needs to be used. This is fine in topics - I provide a link to the font in every page and it works great. But try as I might, I can't fathom how to change the font of entries within the table of contents.

Bumbling about so far, I've found the Table of Contents.slp file and put the same link to the font in the header there (<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans" />) - I then customised my layout to specify the font name (PT Sans) for the TOC Desktop, but this seems to have no effect at all: when I generate the help, the TOC renders in what looks to be a default Times font.

I'm really just guessing at this stage so if anyone can point me in a slightly more considered direction, I'd be really grateful!

Thanks

Claire

[Peter Grainge]

I trust you are well Claire.

Try right clicking the layout name in Project Setup and then clicking Edit. Look under Global.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[authorinkltd]

Hello Peter - I'm really well thanks - and thanks so much for your suggestion 🙂

I had indeed overlooked the Global settings but alas even this doesn't solve the problem. A little further checking tells me that font settings for the TOC Desktop take precedence over Global settings; I've proved that I can change the colour and specify another standard font here, which makes me think I must be missing a trick about linking to the non-standard font.

I'll keep digging - it's certainly helping me find my way around all this shiny new stuff!

Thanks again

Claire

[Willam van Weelden]

I don't believe RH will pick up a non standard font anyway, not in the editor and also not in the HTML5 editor. The best way to go forward is to manually update the CSS with the font name to use. If you search for 'font-family', you'll find about 5 settings that you must change manually.

Kind regards,

Willam

[authorinkltd]

Thanks for the advice Willam - it's worked a treat 🙂

Claire

[authorinkltd]

Hmmm. Actually there's an addendum to this one.

When I generate the help, all looks good with the correct font in the TOC and in topics. But as soon as I expand the TOC to show second-level entries, all entries in the TOC seem to revert to a default font. Only when I collapse the TOC again to shown top-level entries does it revert to PT Sans.

I'm guessing that there is something in main.css that controls the different TOC levels - I'm not sure what it is but I do know that all font settings in this file are set to PT Sans.

Any more clues gratefully received 🙂

Claire

[Willam van Weelden]

Does all entries mean the second level only, or the entire TOC? I just tried locally and it worked fine on my side.

You can try the following: Add the font-family explicitly to the following styles:

span.wTOCTreeCloseBookText

span.wTOCTreeOpenBookText

span.wTOCTreePageText

span.wTOCTreeLinkText

This will make sure that your styles being overwritten.

Kind regards,

Willam

[authorinkltd]

Thanks Willam!

I did as you suggested and ensured that the font-family is set to PT Sans for these elements (in fact, I've updated ALL font settings to this). But there's still odd behaviour which I've narrowed down to this...

When I generate the help, everything looks fine; all top-level TOC entries are in PT Sans. If I then navigate the TOC and expand branches by clicking the arrow icons, then collapse again using the arrow icons, everything is good. The problem comes when I click the TOC title links, rather than the arrows - as soon as I do that, the font defaults back to something weird for all TOC levels.

Looking at main.css again, I can see that there are various wTOCNodeLink settings, which I think may be relevant. None of these had a font-family attribute so I have added font-family: PT Sans just in case, but to no avail.

I fear this one might be a bit too twisty to unravel 😐

Claire

[Willam van Weelden]

Hmm. Did you enable the option to 'Limit project styles to topic contents'? Just to make sure.

Can you zip up an example output with this problems and send it to me at contact [at] wvanweelden [dot] eu? I would like to take a look and see what is going on.

Kind regards,

Willam

[authorinkltd]

Thanks so much Willam, I've emailed you 🙂

Best

Claire

[Willam van Weelden]

This problem was fixed by adding an @font-face rule in the topic CSS and adding the font file as baggage file to the project.

You can find more info about this method here: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Note: In RoboHelp 11.0.3, Responsive HTML5 help changed. This change solves many issues, but a side effect is that CSS/JS changes in the screen layout don't propagate to the topic. In this specific case, making sure that the @font-face rule is in the topic CSS solved the issue.

Kind regards,

Willam