Highlighted

RH2017 - How do I import new fonts in RH2017 project

Explorer ,
Apr 23, 2019

Copy link to clipboard

Copied

I have installed the new set of fonts in c:\windows\fonts folder. How can I import them in my Responsve HTML5 project in RH 2017?

TOPICS
Classic, HTML5 layout

Views

839

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

RH2017 - How do I import new fonts in RH2017 project

Explorer ,
Apr 23, 2019

Copy link to clipboard

Copied

I have installed the new set of fonts in c:\windows\fonts folder. How can I import them in my Responsve HTML5 project in RH 2017?

TOPICS
Classic, HTML5 layout

Views

840

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
Apr 23, 2019 0
Adobe Community Professional ,
Apr 23, 2019

Copy link to clipboard

Copied

I think we need to know more about what you're wanting to achieve.

You don't typically need to import fonts into Robohelp to start using them. However, using them on your PC does not mean they are available to your users. I believe your output type, output destination and license of the fonts themselves will determine what you need to do.

Also note, I only have theoretical knowledge of what's necessary, so might not be much help in the long run.

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
Reply
Loading...
Apr 23, 2019 0
Explorer ,
Apr 23, 2019

Copy link to clipboard

Copied

Ok, so what I am wanting to do is this.

We have a set of custom font named Proxima Nova that we have copied in c:\windows\font folder.

We want to use it in the content of the Responsive HTML5 help output.

So essentially whenever we output and distribute the Responsive help files the output should be visible in the new font.

Would only a copy to c:\windows\font folder help? Or do I have to do something in RH as well?

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
Reply
Loading...
Apr 23, 2019 0
Adobe Community Professional ,
Apr 23, 2019

Copy link to clipboard

Copied

Assuming that the output will be deployed on a web server, you'll need to make sure the font license your company bought allows the font to be used on the web (i.e. not just a desktop license for installing on your (single) computer). Apologies if you already know this bit, I  know a lot of people aren't aware that fonts have specific licenses for very specific uses.

If you are installing the help on end user's computers, you'll have to get legal advice about the license you need (I'm not a lawyer, but suspect you'd need Desktop licenses for every user you install it for?)

Again assuming you're deploying the help on a web server, you then need to consider where the font will live on the web server. Maybe your company already uses this font on other websites. In this case there's probably already a location you can link to for example www.mycompany.com/fonts/.

It should be theoretically possible to add the fonts as baggage files to your project, but you would need to check whether multiple deployment of the files is allowed by the license. I would say a central location is better so that the fonts can be used on any site that needs it, rather than being distributed with each help project you product. (I'm also not sure how you go about using your baggage file version in Robohelp - you might need to live with the font not displaying when you're developing content? This isn't something I've worked with.)

Then you need to specify the font in the stylesheet using @font-face. You'll need to do this manually - as far as I know RH2017 doesn't support @font-face in its interface, although happy to be corrected .

Have a look at MDN for details:

Web fonts - Learn web development | MDN

As I said, I haven't used this technique at all, so my knowledge is theoretical. There may be other steps I'm not familiar with. But hopefully this will get you started.

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
Reply
Loading...
Apr 23, 2019 0
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

To help illustrate what Amber has said, I have set up a simple test for you. I created a topic using a font that everyone will have (Verdana) and one that many will not (Vladimir Script). I then added an image of what you should see.

In the Test Project​ if you have that font installed, the text you see will be the same as in the image. If you do not have the font installed, the browser will substitute something else.

If you are putting the help on a web server, then you need to see what Amber has said about that. If the help is going to be on a client's server or their users desktops, that also gets caught by licensing as Amber has explained.

I haven't tested Google Fonts in a 2017 project but if you go to Fonts I have set up a demo from RoboHelp 2019. Look at the Google Fonts topic. Perhaps instead of the font you were planning to use, one of the Google Fonts will work provided the users have internet access.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Apr 24, 2019 0
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

To answer your orginal question, the answer is in RoboHelp's online help.

Select Edit > Character > Character Formatting > Font Sets

Click New, type a name, and click Modify. Select the first font, and click Add.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Apr 24, 2019 0
Explorer ,
Jun 13, 2019

Copy link to clipboard

Copied

Hi,

We have a specific font that I have included in the Project Manager as a baggage file and also followed these steps:

Select Edit > Character > Character Formatting > Font Sets

Click New, type a name, and click Modify. Select the first font, and click Add.
In the output, the baggage files are getting included. The CSS is also referring to the correct font. However, when we view the responsive html5 output in Google Chrome it still takes times roman and is not able to take out specific font.
Any idea how to fix this?

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
Reply
Loading...
Jun 13, 2019 0
Explorer ,
Jun 13, 2019

Copy link to clipboard

Copied

Oh by the way this happens only when we test the output on a machine that does not have our specific font installed. It works as expected on out local machines because it has the font installed in Windows Fonts directory.

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
Reply
Loading...
Jun 13, 2019 0
Adobe Community Professional ,
Jun 14, 2019

Copy link to clipboard

Copied

Uploading the font file as a baggage file only puts the file on the server. That's like downloading a font file onto your PC and not installing it.

What fonts the end user sees depends on many things. See How to Use Embedded Fonts for Your HTML5 and CSS3 Based Web Pages - dummies

Beware of licensing too. You may only be licensed to use that font locally.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 14, 2019 0
Adobe Community Professional ,
Jun 14, 2019

Copy link to clipboard

Copied

In your first post you mentioned Chrome. Are you saying it is working in other browsers?


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 14, 2019 0
Explorer ,
Jun 14, 2019

Copy link to clipboard

Copied

Hi,

We have added the custom font as baggage in the project manager.

We also added here Edit > Character > Character Formatting > Font Sets

We also then added @font-face in the css as explained in the article you shared.

We tried on Chrome and IE as well but it still shows times roman and does not pick the custom font.

Any other issue that may be blocking it?

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
Reply
Loading...
Jun 14, 2019 0
Adobe Community Professional ,
Jun 14, 2019

Copy link to clipboard

Copied

Not sure but I think the issue is that as earlier the font is not installed on the server. All you have done is upload the font file, not installed it. Two different things. If you get your IT guys to install the font, then I believe it will work but I'm not sure, they will know.

Until then, as the article says, the user will see their default. You are currently seeing Times. Change that in Chrome to some obscure font and I think you will then see that font. Install the font you want on the server and then I think you will see it. Uploading it as a baggage file is not enough.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 14, 2019 0
Adobe Community Professional ,
Jun 14, 2019

Copy link to clipboard

Copied

I am assuming your users see the help from your server. If they see it through their own servers, then the same has to be done there.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 14, 2019 0
Explorer ,
Jun 14, 2019

Copy link to clipboard

Copied

Ok, sorry to to sum up:

Scenario 1 - product + help installed on the same server/machine that user will access. We need the font to be installed on the same server as well as in the RH baggage/css.

Scenario 2: product and help on separate servers. We need the font to be installed on the help server + baggage + css. Users can access help from their individual machine (via URL) and they need not install the font on their machines.

Is that understanding correct?

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
Reply
Loading...
Jun 14, 2019 0
Adobe Community Professional ,
Jun 14, 2019

Copy link to clipboard

Copied

To the best of my knowledge:-

Scenario 1 - Installed on the server but baggage file not needed. It is an installer file and you will have installed it.

Scenario 2 - On local servers. Same as scenario 1. It needs to be installed on those servers. If local, it needs to be installed on the local machines.

In all scenarios, you must have a licence to do what you are doing with that font. Most licences of for your local use and you have to pay more to distribute, if that is allowed at all.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 14, 2019 0
Adobe Community Professional ,
Jun 14, 2019

Copy link to clipboard

Copied

The linked 'dummies' page above indicates you don't need to install the font on the server:

"When you begin hosting on a web server, you’ll want to move your font file to the server along with all the other resources your web page needs."

The missing bit is setting up an @font-face definition. If you don't have this, you can't get the fonts working.

To test this, I downloaded a free font but didn't install it.
https://www.fontsquirrel.com/fonts/Amadeus

I added it as a baggage file in the root of my project and added the following code to the stylesheet:

@font-face {

font-family: "Amadeus";

src: url("amadeus.ttf");

}

Note: In this test the url must be the relative path from your stylesheet to the image. The easiest way is to add the font as a baggage file in the same directory as your stylesheet so you don't have to worry about it.

Then, also editing the stylesheet manually I updated the h1 - font-family: Amadeus;. This bit is only necessary because I haven't installed the font. Normally you can just select the font using the stylesheet editor.

Because I didn't install it, I can't see the font in RH:

But then I generated and voila:

I didn't upload to a web server, but my reading of the "dummies" link above indicates this should work exactly the same way.

As far as I can see in RH2017, there is no way to automatically add the @font-face statement. Creating a font set only lets you manually name a font or group of fonts that are already installed on your computer.

Summary:

1. Add font as baggage

2. Manually add @font-face definitions to the stylesheet.

You can either enter a relative path to your baggage file OR an absolute path on the webserver. You might use the absolute path if you have a corporate location for the font e.g. https://mycompanywebsite.com/corporate/fonts/myfont.ttf

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
Reply
Loading...
Jun 14, 2019 0
Adobe Community Professional ,
Jun 15, 2019

Copy link to clipboard

Copied

Nice work Amber. I didn't have the time to set up a test and my knowledge was sketchy. I will add that to the Font page on my site with credit to you.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 15, 2019 0
Adobe Community Professional ,
Jun 15, 2019

Copy link to clipboard

Copied

Hopefully it all works when copied to a web server.

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
Reply
Loading...
Jun 15, 2019 0
Adobe Community Professional ,
Jun 15, 2019

Copy link to clipboard

Copied

It does but I need to finalise the topic so it will be tomorrow now. In 2019 if you specify @font-face in the CSS, you don't have to add the CSS to baggage, it uploads automatically. I don't know if that works in 2017.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 15, 2019 0
Adobe Community Professional ,
Jun 15, 2019

Copy link to clipboard

Copied

If you try it in RH2017 without adding to baggage and it doesn't go, there's a safe css hack I've used to get files to publish. Let me know if you need the details.

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
Reply
Loading...
Jun 15, 2019 0
Adobe Community Professional ,
Jun 16, 2019

Copy link to clipboard

Copied

There is a page on my site covering the use of Font Awesome, Google Fonts and SVGs. I have now added @fontface to it.

Using Font Awesome, Google Fonts, @font-face and SVGs in RoboHelp

It shows a font that I have viewed on a PC that does not have that font installed. The page shows how to set things up in any version of RoboHelp. The only difference between 2019 and Classic versions is that in the latter, the font file must be added to baggage as Amber confirmed.

There are two links on the page. One to view the output with its instructions and one to download the 2019 project.

@Tejas Hope between Amber's post and my site you can now get things working. Let us know.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 16, 2019 0
Explorer ,
Jun 16, 2019

Copy link to clipboard

Copied

Thanks Amebr​ and PeterGrainge​ looks like it still doesn't work

So I have added the custom font as baggage. It is a .otf font and not .ttf.

I then added the @font-face part to the CSS manually.

The custom font is placed in the same directory as the CSS file.

This is also done: Edit > Character > Character Formatting > Font Sets

All works perfectly on the same machine where the custom font is but when distributed or accessed remotely from a different host, the default Chrome font times roman takes over.

I may need to try the hack by Amebr​ if you could share. Until then I shall use the good old Arial .

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
Reply
Loading...
Jun 16, 2019 0
Adobe Community Professional ,
Jun 16, 2019

Copy link to clipboard

Copied

Have you added the font as a baggage file in the same directory as your CSS? If the baggage file is in a different location move it into the same folder as the CSS file, which should fix the problem.

Have you selected the font for each style as well? (You may be able to automatically update most of your styles by selecting the font for Other > Background + Text (BODY) in the stylesheet editor, but this depends on whether you've previously configured the font for individual styles.)

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
Reply
Loading...
Jun 16, 2019 0
Adobe Community Professional ,
Jun 16, 2019

Copy link to clipboard

Copied

Please post the part of the CSS where you have added the font-face and one of the styles.

What is the name of the font as shown in say Word's dropdown?


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 16, 2019 0
Explorer ,
Jun 16, 2019

Copy link to clipboard

Copied

Here is the part added to the CSS:

@font-face {font-family: "Proxima Nova";

src: url("Proxima Nova.otf");

}

Here are the baggage files included:

and the font shows up here correctly:

The master page/CSS do show it correctly.

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
Reply
Loading...
Jun 16, 2019 0
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

You are showing the URL as src: url("Proxima Nova.otf". There is no font file with that name.

Try this:

  1. Uninstall all the fonts you find in Windows settings relating to that font.
  2. Remove all those files from baggage.
  3. Make sure in Word or something the file no longer appears in dropdowns.
  4. Now just install proximanova-regular on the PC and check the name in a dropdown.
  5. Add that to RoboHelp.
  6. Put that file name in the URL in the CSS.
  7. Check the styles have the name that appears in dropdowns.

Try that. You might not need the others for the variations but if you do, add those to the URL.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 17, 2019 0
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

Try this link. It is the same method set up in a simple 2017 project to prove it works there. I have tested it on a machine without the font used.

FontFace 2017

Email me via my Contact page and I will send you the project.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 17, 2019 0
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

... or try just changing the URL to just the file with "regular" in the

name. Worth a shot. Not at RoboHelp machine now. Will explain more later.

Peter Grainge

www.grainge.org

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Jun 17, 2019 0