Participating Frequently

Question

Open Sans not working on Mac and iOS

Forum|Forum|5 years ago
January 14, 2021
8 replies
4614 views

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?

This topic has been closed for replies.

Peter Grainge

Community Expert

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 if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

A

ayaanh17892469Author

Participating Frequently

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

@11220649-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

Community Expert

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 if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Peter Grainge

Community Expert

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 if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

davidk99046111

Inspiring

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.

A

ayaanh17892469Author

Participating Frequently

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

davidk99046111

Inspiring

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.

Peter Grainge

Community Expert

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 if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

A

ayaanh17892469Author

Participating Frequently

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

Community Expert

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 if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded