Open Sans not working on Mac and iOS

[ayaanh17892469]

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?

[Peter Grainge]

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

[ayaanh17892469]

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?

[Peter Grainge]

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

[davidk99046111]

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.

[ayaanh17892469]

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

[davidk99046111]

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.       

[ayaanh17892469]

I called the Google API in the index.html file. It worked like a charm. Thanks a lot, David and Peter.

[Peter Grainge]

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

[Peter Grainge]

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

[ayaanh17892469]

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

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

[Peter Grainge]

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