RH2019 embed custom font

New Here ,
Jul 10, 2020 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

78

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

 

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
New Here ,
Jul 10, 2020 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
community guidelines
Adobe Community Professional ,
Jul 10, 2020 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

 

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
New Here ,
Jul 10, 2020 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
community guidelines
Adobe Community Professional ,
Jul 10, 2020 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.

 

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 ,
Jul 12, 2020 Jul 12, 2020

Copy link to clipboard

Copied

In the skin you can select a font to be used for the layout, in the Layout or General section (depending on the skin). But I think you can only select installed fonts there.

 

The approved way of customising things in New UI is to add custom stylesheets to the User Assets section (under Layout or User Assets, depending on the skin), so you could try adding your stylesheet there, but I'm unsure exactly what you'd have to specify to get it to work.

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 ,
Jul 12, 2020 Jul 12, 2020

Copy link to clipboard

Copied

LATEST

So are you saying that my method works on Windows but not other platforms?

 

Where doesn't it work?

 

 

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