Adding Open Sans to a WebHelp - pdf file project
Moderators: Alexander Halser, Tim Green
-
- Posts: 8
- Joined: Fri May 19, 2017 10:50 am
Adding Open Sans to a WebHelp - pdf file project
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
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
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Adding Open Sans to a WebHelp - pdf file project
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/
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 8
- Joined: Fri May 19, 2017 10:50 am
Re: Adding Open Sans to a WebHelp - pdf file project
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 ?
So what about the Webhelp. Where do I put the reference to open sans font ?
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Adding Open Sans to a WebHelp - pdf file project
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:garryrobinson_new wrote:So what about the Webhelp. Where do I put the reference to open sans font ?
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 8
- Joined: Fri May 19, 2017 10:50 am
Re: Adding Open Sans to a WebHelp - pdf file project
Using webhelp Iframes responsive white. Just before I roll over from wix, I will do some comparisons for you
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Adding Open Sans to a WebHelp - pdf file project
Hi Garry,
Basically, all you need to do is this:
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:
The result will then look like this:
Basically, all you need to do is this:
- 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)
- Insert references to the fonts you want to use in the HTML page template in the skin
Code: Select all
<link type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />
Code: Select all
<link href='//fonts.googleapis.com/css?family=Sofia' rel='stylesheet' />
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 8
- Joined: Fri May 19, 2017 10:50 am
Re: Adding Open Sans to a WebHelp - pdf file project
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' />
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.
-
- Posts: 8
- Joined: Fri May 19, 2017 10:50 am
Re: Adding Open Sans to a WebHelp - pdf file project
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
Will keep experimenting
So fixed for now.
garry
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Adding Open Sans to a WebHelp - pdf file project
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.
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.