Inspiring

Question

RH 2015 Responsive - best way to control font of Contents

Forum|Forum|6 years ago
November 22, 2019
8 replies
514 views

I'm using Responsive HTML 5 to generate help. I've customised my layout and things look good, except for the headline and the contents, which appear in Times New Roman. I'd like to use our corporate (Google) font like I do in the rest of the document. I have the font on my PC so it's all good WYSIWYG, but of course not all users have it so they get the stock Times font.

I'm good with getting the Google font out there for the main body - just about. I've tried a few things around @1552174 and @11220649-face etc. in the style sheet and this is okay, but this doesn't cover the contents. I've selected the right font in Layout Customisation - Basic Settings - Layout font, but presumably this only works for web safe fonts? Is there another css file that I need to specify my font in?

HTML5 layout

This topic has been closed for replies.

Peter Grainge

Community Expert

Solution found. See Item 50 in Snippets > Miscellaneous on my site.

www.grainge.org

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

I am finding that the definition for the index using a locally installed font works OK but not the @font-face method.Please let me know if you find otherwise. This is being looked into.

www.grainge.org

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

I got a quick response and it seems you don't need to edit the index.htm file.

In Classic versions

Locate layout.css in the skin and append this to the end of the file amending the fonts as required. For anyone not using @font-face just remove that definition and use fonts that all users will have installed.

@font-face {
font-family: Lobster;
src: url('Lobster.woff');
}
.toc-holder {
font-family: Lobster;
}
.idx-holder {
font-family: "Bell MT";
}

In 2019

Add the above to a new CSS file such as custom-toc.css.

Open the skin editor and go to Layout > User assets and browse to that css.

Note this is for responsive skins only as the skin editor for frameless already allows the required fonts to be specified.

Please let us know how you get on as I haven't been able to test this. It is easily reversible!

www.grainge.org

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

Adobe have kindly created a CSS file that should make this possible. It requires some editing of the index.htm file after generating and at the moment I am clarifying what those edits are.

Hopefully in a few days there will be a solution for both Classic versions and 2019.

I will update the thread as soon as I can.

www.grainge.org

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

I have made some enquiries about fixing the font in the TOC. It may be possible by editing layout.css but as you will have seen, it is a complex CSS and I don't know exactly what needs to be edited.

Be aware that if you go the webhelp to CHM route, it is a script that is not supported in the new 2019. It is in Classic versions only.

www.grainge.org

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

In 2019 the skin editor does not give an option to change the TOC font and given the way skins now work, I suspect it may not be possible to change it. I will ask.

In Classic versions you could delve into the CSS created for the skins but I don't know if that did allow you to change the font for the TOC.

By Headline do you mean where I show "RoboHelp Tour" at http://www.grainge.org/pages/authoring/rh_tour/? If so in 2019 in the Skin Editor see Header > Title Font Family.

www.grainge.org

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Ayrton_5Author

Inspiring

I mean exactly where you show "Robohelp Tour". In RH2015 the UI allows me to select the Roboto font, in Basic Settings - Layout Font, and this works on my PC where Roboto is installed, but doesn't work where the font is absent. I don't mind editing CSS if needs be but I don't know where to edit.

Thanks for the Webhelp-to-CHM tip BTW, I'll need to do some more layout configuring but an out-of-the-box pass at it looks very promising.

Peter Grainge

Community Expert

Probably because Microsoft last updated the compiler in 2004 so it doesn't understand all the new font methods. As you are still on 2015 have you tried compiling webhelp and then using the webhelp to CHM script. That gets round some limitations but not all. Worth a try.

www.grainge.org

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Ayrton_5Author

Inspiring

Thanks Peter I'll try that out. That was my side issue though - I'd be interested to know how to control the TOC font in Responsive format, if I want to use web fonts.

Ayrton_5Author

Inspiring

A side issue, tangentially related. If I have the font-face clause in my layout css, I don't get the google font in CHM output (I know... I'd love to be rid of it but I can't yet). Take font face out and CHM works fine. Why so? I can work around it, and take the clause in and out, but I'd rather not... is there a better resolution?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded