How to get Roboto Font for RoboHelp 11?

New Here ,
Sep 28, 2020 Sep 28, 2020

Copy link to clipboard

Copied

Hi,

Trying to recreate a project since I do not have the source file with me. In this project, we use a special font called Roboto. How does one get this font? Do we need the help of IT team to install this with the RoboHelp software. 

I do not know what was done earlier, I had simply inherited the file with this font already available in the Styles pane whenever I would launch RoboHelp on my desktop. Currently, I am using a laptop with RoboHelp 11 installed.

Views

154

Likes

translate

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 ,
Sep 29, 2020 Sep 29, 2020

Copy link to clipboard

Copied

The page below was written for the New UI versions of RoboHelp but I think they will work for Classic. They may need a bit of adaptation.

 

BTW. If you are generating WebHelp from RoboHelp 11, I would be expecting issues with it in modern browsers. Do test fully.

 

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

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 ,
Sep 29, 2020 Sep 29, 2020

Copy link to clipboard

Copied

@Peter Grainge - I think something got lost there - there's no link to any "page below" in your post.

Likes

translate

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 ,
Sep 29, 2020 Sep 29, 2020

Copy link to clipboard

Copied

Oops. https://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

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 ,
Oct 01, 2020 Oct 01, 2020

Copy link to clipboard

Copied

Thanks for the link to the page. I would need clarification on few of the points mentioned under the Font Face method.

1.Do I need to purchase the Roboto font as the 1st step mentions going through the licensing details? 

2. It also says that the TTF or OTF file needs to be saved in the same location as the CSS file. Do you mean the project folder? Is this just a simple copy and paste action?

3. I do not recall installing the Roboto font on my PC so that I can see the font in RoboHelp. It came with the project file.

4. It says that the font needs to be added to the CSS file. In the example that was given, the Quicksand font family and file referenced in the URL were added to the file. Does this mean that I need to edit the CSS file from within RoboHelp using either CSS editor or HTML editor?

5. Do I need to manually add the font family to each individual styles (h1, h2, h3 etc) by editing the CSS using HTML editor from within RoboHelp?

6. For Classic version, it is said that the OTF or TTF file needs to be added as a baggage file. Why do we need to do this when we are saving it in the same location where the CSS file is used? This seems to clash with the 2nd point.

Likes

translate

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 ,
Oct 01, 2020 Oct 01, 2020

Copy link to clipboard

Copied

1. Some fonts are not allowed to be distributed (that's basically what you are doing)

2. In the project, yes

3. You should check to see if you are licensed to distribute the font file.

4. Yes, edit the CSS file to include this - doesn't make any difference what tool you use to edit a CSS - it's just text.

5. Yes, same as 4.

6. Because you are distributing the font file, it has to get into your output somehow - in Classic versions, that was achieved via Baggage Files; in the New UI, that's not necessary because the CSS gives RH the info it needs at build time to suck in the file.

Likes

translate

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 ,
Oct 01, 2020 Oct 01, 2020

Copy link to clipboard

Copied

  1. Search in Google for Roboto font. According to that it is free.
  2. The same folder your project as the CSS. Yes just paste it in using File Explorer or import it.
  3. You will need it installed on your computer if you want to see it in the source. That means you must test on a machine that doesn't have the font installed.
  4. You need to define the font for the styles where it is to be used. Same as any other font. Look in the project you can download from my site.
  5. You will need to edit the CSS file in RoboHelp's CSS editor or in a text editor.
  6. Because the font needs to get uploaded to the output folder. The project CSS folders get uploaded automatically but not additional CSS files.

 

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

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 ,
Oct 02, 2020 Oct 02, 2020

Copy link to clipboard

Copied

Roboto is also available from Google: The license details can be found here:

https://fonts.google.com/specimen/Roboto

 

Steps to implement it:

  1. Go to the Google Roboto page and select the styles you want to use. I have preselected "Regular 400", "Regular 400 Italic", "Bold 700", and "Bold 700 Italic" here. Select more depending on your needs.

  2. On the Google Roboto page, choose "Embed" in the "Selected Family" Panel on the right.

  3. Choose @embed.

  4. Copy the code given.

  5. Switch to RoboHelp. Open the CSS file associated with the topic. (In RoboHelp 2019/2020, by default this CSS is in folder: "\asset\css\default.css").

  6. Add the code to import/link the font, and add it to the appropriate elements. Usually, you would add it for "body" to make it available for all elements.

    Example:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
    
    body {
      font-family: "Roboto", sans-serif;
    }
    


    If you have local font definitions for specific elements, you might need to change them there as well.

  7. Save the CSS. Open the topics and check if the font is applied everywhere.

Likes

translate

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 ,
Oct 08, 2020 Oct 08, 2020

Copy link to clipboard

Copied

Thanks Jeff, Peter and Stefan for your help.

@Stefan-Gentz 

I would like to donwload the font from Adobe. Can you please share the page from where one can download? This is an enterprise Adobe account with Adobe Creative Cloud enabled on my system. Though I havent ever signed into the Cloud account. I simply need the licensing details and installation information so that I can share with the project team and software installation team.

Likes

translate

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 ,
Oct 08, 2020 Oct 08, 2020

Copy link to clipboard

Copied

You can activate Google's Roboto font also through Adobe Fonts. Here is the page for Roboto on Adobe Fonts. You will need to be signed in to your Creative Cloud account so that the fonts are synced to your machine locally and can be used on your machine.

 

You can find detailed step-by-step instructions on how to use fonts available in Adobe Fonts in a web project here.

 

If you want to deploy this font (e.g. as part of an installer), you will need to download the font from Google directly and also check the license details with Google.

Likes

translate

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 ,
Oct 08, 2020 Oct 08, 2020

Copy link to clipboard

Copied

The font is a Google font, not an Adobe font, so you'll need to use the link Stefan included in his post.

Likes

translate

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 ,
Oct 08, 2020 Oct 08, 2020

Copy link to clipboard

Copied

@stefan - Correct me if I am wrong but I think what you are saying is that if the user wants Roboto to work for a user of the help on a machine that doesn't have the Roboto font installed, they need the Google version. Correct?

 

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

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 ,
Oct 08, 2020 Oct 08, 2020

Copy link to clipboard

Copied

Pretty much. A little bit more detailed:

 

Option 1: The font is a Google font, and can be used through the services and licenses Google provides for this font.

 

Option 2: Adobe Fonts also provides this Google font. It can be activated through Adobe Fonts and used through the Creative Cloud app on a user's local machine with an active Creative Cloud license. For implementation in a web output (e.g. in a RoboHelp Project) it can be implemented via Adobe's TypeKit Service with a simple CSS import (detailed instructions here, but basically the same procedure as in my code sample above).

 

Regarding a a "physical" deployment of the actual font files to other users' machines: Yes, You would need to download the font files as such from Google (because Adobe Fonts does not offer such a download of the physical font files.

The Google license information for Roboto fonts says: "You can use them freely in your products & projects - print or digital, commercial or otherwise. However, you can't sell the fonts on their own."

If that "you can't sell the fonts on their own" also excludes bundling the font as physical font files in a sold product - I don't know and cannot give any legal advice on this. I like to leave that to the legal experts.

Likes

translate

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 ,
Oct 11, 2020 Oct 11, 2020

Copy link to clipboard

Copied

Thanks for the detailed reply. It was really helpful!

Likes

translate

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