RH 2015 Responsive - best way to control font of Contents

Explorer ,
Nov 22, 2019 Nov 22, 2019

Copy link to clipboard

Copied

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 @import and @font-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? 

TOPICS
HTML5 layout

Views

243

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 22, 2019 Nov 22, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 22, 2019 Nov 22, 2019

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 22, 2019 Nov 22, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 23, 2019 Nov 23, 2019

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 25, 2019 Nov 25, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 25, 2019 Nov 25, 2019

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 27, 2019 Nov 27, 2019

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 28, 2019 Nov 28, 2019

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 02, 2019 Dec 02, 2019

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 02, 2019 Dec 02, 2019

Copy link to clipboard

Copied

LATEST

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


www.grainge.org

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation