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

160

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

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
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
Adobe Community Professional ,
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

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 ,
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
Explorer ,
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
Adobe Community Professional ,
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

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
Adobe Community Professional ,
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

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
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
Adobe Community Professional ,
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

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
Resources
RoboHelp Documentation