• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Open Sans not working on Mac and iOS

New Here ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

We generate html5 projects with open sans as the font. When the pages open on Mac or iOS (any browser), open sans gets converted to Times New Roman. We want the font to be open sans as we have been consistently using it in all our resources across platforms.

 

Is there something we need to do in RH to fix this?

Views

2.0K

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
Community Expert ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

See this page on my site. Using Font Awesome, Google Fonts, @font-face and SVGs in RoboHelp (grainge.org)

 

It is written for Windows users but I think it will be the same issue.

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

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

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 ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

Thanks a lot, Peter. I tried the font face method. It works on the pages (I get the desired font), but it doesn't work on the skin header and the TOC. Any thoughts?

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
Community Expert ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

The short answer is No. However, I have a feeling someone asked the same problem sometime last year and posted an answer. Not sure.

 

Take a look and let us know how you get on.

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

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

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
Participant ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

We had a similar issue rolling out a RH2020 (mac) html5 site.  Safari would show times new roman where all the other browsers would display in open sans.  Adding a call directly to the google api for the font seemed to fix the issue for safari.

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 ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

Thanks for your suggestion. Did it work for the header and TOC as well? Also, did you add the call in default.css?

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
Participant ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

in our instance, it was the TOC specifically that wasn't loading with open sans (I can't recall if the headers will doing the same thing).  Calling it in the default.css and master file did not work for us. You could possibly try adding a separate css file via the skin assets (I did not not try that).  I ended up building the site and then adding the line directly to the header in the index.htm file in the build as I already had other customizations i had made to the file to add additional features to the site.  The index.htm file is basically the shell that puts all the frames together.  The only problem with this is that you run the risk of overriding that file everytime you push a new build.  For the time being, i exluded the index.htm file from my pushes and changed the files permissions for the index.htm file on my server to avoid accidently overring my customizations when pushing a new build of the site.       

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 ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

I called the Google API in the index.html file. It worked like a charm. Thanks a lot, David and 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
Community Expert ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

See if Snippets > HTML5 and Skins on my site helps. I forgot the TOC is covered there. 

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

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

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
Community Expert ,
Jan 15, 2021 Jan 15, 2021

Copy link to clipboard

Copied

I wonder if you could post the exact steps to help other Mac users who hit this problem?

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

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

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 ,
Jan 18, 2021 Jan 18, 2021

Copy link to clipboard

Copied

Here’s what I did to fix this (with help from Peter and David):

 

After generating the HTML5 output, I edited the default.css file. I added the font face tag at the top and added open sans to other elements. Here’s a snippet of how it looked.

 

/*Created with Adobe RoboHelp 2019.*/

@Font-face {

  font-family: "Open Sans";

  src: url("OpenSans-Regular.ttf");

}

body {

  font-family: Open Sans;

  background-color: #ffffff;

}

h1 {

  font-family: Open Sans;

  font-weight: bold;

  font-size: 22.0pt;

 

This took care of the topic pages; however, the TOC and the header still showed an incorrect font. To fix that I added a call to the Google API for open sans in index.htm. Open index.html in notepad++ and add the following tag in the head.

style>@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');</style>

 

Voila! Issue fixed.

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
Community Expert ,
Jan 18, 2021 Jan 18, 2021

Copy link to clipboard

Copied

LATEST

Meantime I have updated the Snippet on my site with specific information about targetting a skin style.

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

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

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
Download Adobe RoboHelp