Highlighted

RH2019 embed custom font

New Here ,
Jul 10, 2020

Copy link to clipboard

Copied

I'm building a new version of our HTML5 help with the reimagined robohelp and try to use our company font. For the body I've managed to make it available everywhere I've tested by importing an online font.css pasting the following line at the beginning of my default.css (ofcourse the [font.css url] is replaced by the actual url).

@import url("[font.css url]");

Now my problem is, that I can't seem to use the same font across all platforms for the toc and title, as Robohelp won't recognize it. I've found it should be embedded in the layout.css that is created while building the output. On a local build I've added the line of code to layout.css after the build was finished and the effect is perfect. However, we're using an automated Jenkins build, so I can't simply paste my fonts source into this. 

 

Now my question is the following: Is there a way for me to either create a font set that can refer to the online fonts that is used throughout the project (and not just in the body text), or to tell the build to add this import to layout.css?

Views

49

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

RH2019 embed custom font

New Here ,
Jul 10, 2020

Copy link to clipboard

Copied

I'm building a new version of our HTML5 help with the reimagined robohelp and try to use our company font. For the body I've managed to make it available everywhere I've tested by importing an online font.css pasting the following line at the beginning of my default.css (ofcourse the [font.css url] is replaced by the actual url).

@import url("[font.css url]");

Now my problem is, that I can't seem to use the same font across all platforms for the toc and title, as Robohelp won't recognize it. I've found it should be embedded in the layout.css that is created while building the output. On a local build I've added the line of code to layout.css after the build was finished and the effect is perfect. However, we're using an automated Jenkins build, so I can't simply paste my fonts source into this. 

 

Now my question is the following: Is there a way for me to either create a font set that can refer to the online fonts that is used throughout the project (and not just in the body text), or to tell the build to add this import to layout.css?

Views

50

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
Adobe Community Professional ,
Jul 10, 2020

Copy link to clipboard

Copied

See this page on my site. It works on Windows but I haven't tested on all platforms. There is a link to a demo so you can try on whatever platform you need.

 

http://www.grainge.org/pages/authoring/fonts/fonts.htm

 

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
New Here ,
Jul 10, 2020

Copy link to clipboard

Copied

Hi Peter,

thanks for the reply. I checked your sample project, but I've already tried all the options listed there.. Adding the font to the css folder and referencing it in an @font-face{} in the css has no effect on the header and toc text.

A link in the html might be a good solution as well, though adding in the master page again only effects the body text, not the header and toc.. any other ideas? 🙂

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
Reply
Loading...
Adobe Community Professional ,
Jul 10, 2020

Copy link to clipboard

Copied

I'm confused because the demo shows the font face in my TOC and the Header of the @font-face topic.

 

image.png

 

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
New Here ,
Jul 10, 2020

Copy link to clipboard

Copied

It does look like it. However, with the solutions I can find on your page, I still get the correct font in the body, but not in the header and toc:

2020-07-10_1425.png

Referring to the online font this happens on every platform, using the .ttf the header and toc show up great on my own machine, but as above on part of other platforms i've tested on. If i use [F12] on this output and paste the font url in the layout.css all problems are solved..

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
Reply
Loading...
Adobe Community Professional ,
Jul 10, 2020

Copy link to clipboard

Copied

Have you tried applying the CSS I used or downloading the project and testing what you get with that? I'm pretty sure I did test it on a machine without that font.

 

See if my project works for you first.

 

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...