Adding Open Sans to a WebHelp - pdf file project

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
garryrobinson_new
Posts: 8
Joined: Fri May 19, 2017 10:50 am

Adding Open Sans to a WebHelp - pdf file project

Unread post by garryrobinson_new »

Searched a bit and didn’t find so here is the question

How can I make a style based on a online font reference? I wish to deploy the Google Open Sans font group.

I presume I put the https://fonts.googleapis.com reference below in a css file on the base html folder or maybe in the skin.


>>> Google said this

Embed Font
To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document.
STANDARD @IMPORT
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Specify in CSS
Use the following CSS rules to specify these families:
1. font-family: 'Open Sans', sans-serif;


Thanks
Garry Robinson

BTW: I am going to replace a wix site (using open sans) with a help and manual site running on azure which is way faster
Sample of wiz in Open Sans here
https://www.biketrail.info/olympic-bikeinfo
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Adding Open Sans to a WebHelp - pdf file project

Unread post by Tim Green »

Hi Garry,

You can't do this with an online font for a PDF file because PDF is not HTML. It is just raw printer data stored in a file. Instead, you need to download the Google font in the TTF format and install it on your computer (then it will also be visible in Help+Manual and you can use it directly there). Then make sure that it is embedded in the PDF with the settings in Configuration > Publishing Options > PDF > Font Embedding.

See this page for basic instructions on installing Google Fonts locally:

https://www.labnol.org/software/google- ... ter/19780/
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
garryrobinson_new
Posts: 8
Joined: Fri May 19, 2017 10:50 am

Re: Adding Open Sans to a WebHelp - pdf file project

Unread post by garryrobinson_new »

Got that. Good point. I have the font installed locally.

So what about the Webhelp. Where do I put the reference to open sans font ?
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Adding Open Sans to a WebHelp - pdf file project

Unread post by Tim Green »

garryrobinson_new wrote:So what about the Webhelp. Where do I put the reference to open sans font ?
That depends on what skin you are using. If you are using one of the V3 Responsive skins Google Web Fonts are supported directly. See here for instructions:

http://www.it-authoring.com/info/pp3hel ... fonts.html

Otherwise you would have to add the necessary references as described by Google to your HTML Page Template in your skin for your topic pages. If you let me know which skin you are using I can show you where to put the references.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
garryrobinson_new
Posts: 8
Joined: Fri May 19, 2017 10:50 am

Re: Adding Open Sans to a WebHelp - pdf file project

Unread post by garryrobinson_new »

Using webhelp Iframes responsive white. Just before I roll over from wix, I will do some comparisons for you
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Adding Open Sans to a WebHelp - pdf file project

Unread post by Tim Green »

Hi Garry,

Basically, all you need to do is this:
  1. Use the Google fonts actively in Help+Manual (then you don't need to re-map existing fonts to the ones you really want to use)
  2. Insert references to the fonts you want to use in the HTML page template in the skin
To insert the references in the skin, open the .hmskin file in Help+Manual (you'll need to make a copy in your project folder if the version you are using is still in the HM program directory). The navigate down to Configuration > HTML Page Templates > Default and locate this line of code:

Code: Select all

<link type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />
Then insert this line of code for your web font directly before the existing stylesheet line, replacing the "Sofia" example name with the name of your font:

Code: Select all

<link href='//fonts.googleapis.com/css?family=Sofia' rel='stylesheet' />
The result will then look like this:

Code: Select all

<link href='//fonts.googleapis.com/css?family=Sofia' rel='stylesheet' />
<link type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
garryrobinson_new
Posts: 8
Joined: Fri May 19, 2017 10:50 am

Re: Adding Open Sans to a WebHelp - pdf file project

Unread post by garryrobinson_new »

Tried a few combos of this with ' and " - not getting anywhere.

Referenced as a style and as a direct reference on the h & M page

See picture attached

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' />
You do not have the required permissions to view the files attached to this post.
garryrobinson_new
Posts: 8
Joined: Fri May 19, 2017 10:50 am

Re: Adding Open Sans to a WebHelp - pdf file project

Unread post by garryrobinson_new »

Sens that Open Sans Light is not a member of the Open Sans family. So now I have Open Sans working.

Will keep experimenting

So fixed for now.

garry
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Adding Open Sans to a WebHelp - pdf file project

Unread post by Tim Green »

Hi Garry,

Sorry, while I wrote correctly that the Google Fonts reference must go before the stylesheet restaurant, the example code shows it the other way round. I've corrected it now. If you swap the order of the two entries it should work. Note that you also need an Internet connection for it to work, since the font is being actively downloaded. Also note that most ad blockers will prevent the font from displaying, because it is external content that is being blocked just like ads. The only way around that would be to install the fonts with your WebHelp, but that's generally not a good idea.

While web fonts are fundamentally nice, they are not without problems. In addition to being blocked by ad blockers, they will also slow down your pages because the fonts need to be loaded from Google before anything can be displayed. This can cause real issues if you use a lot of fonts.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Post Reply