Skip to main content
straayer
straayer
Participant
July 10, 2020
Question

RH2019 embed custom font

  • July 10, 2020
  • 7 replies
  • 295 views

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).

@1552174 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?

    This topic has been closed for replies.

    7 replies

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    July 13, 2020

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

     

    Where doesn't it work?

     

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    July 13, 2020

    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.

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    July 10, 2020

    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.

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    straayer
    straayerAuthor
    Participant
    July 10, 2020

    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:

    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..

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    July 10, 2020

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

     

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    straayer
    straayerAuthor
    Participant
    July 10, 2020

    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? 🙂

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    July 10, 2020

    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

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices