Ability to include Google fonts in RH 2020

Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

Hi,

I would like to know if we can use Google Fonts to Robohelp 2020 or only use the fonts provided by RH? In case if we can use Google Fonts, can you please let me know how to install and use it?

 

Views

188

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

It's all explained here on my site. There is a demo and a download. The download is in 2019 format so just upgrade it.

 

Using Font Awesome, Google Fonts, @font-face and SVGs in RoboHelp (grainge.org)

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

Thank you so much for the solution Peter! 

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 Employee ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

RoboHelp does not come with fonts. The font drop-downs show you the fonts installed on your system.

Adding Google fonts to a topic is very easy:

 

  1. Go to https://fonts.google.com and select the fonts and styles you need. Copy the code given in the "Use on the web" section.
  2. Open your topic.
  3. Change to source code view and add paste the code.
    For Roboto regular and regular italic, bold, and bold italic, e.g. this:
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">​

    or this:
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
    </style>​
  4. Refresh the topic view (F5) or cust close and reopen it.

 

Alternatively, you can add it to the template/skin or layoutdiff.css. and the overrule with a catch-all * and !important.

 

 

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

LATEST

Thank you so much for the solution Stefan! 

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 Employee ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

Peter also just replied 🙂
Have a look at this project. It explains it in much deeper detail!

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