RH2017 - How do I import new fonts in RH2017 project

[Tejas Dandekar]

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?

[Peter Grainge]

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

[Peter Grainge]

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

[Peter Grainge]

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

[Tejas Dandekar]

Oh yes, that worked. I put in the regular and it worked.

So can i put in multiple sources each on a new line or should i mention the otf files as comma separated?

[Tejas Dandekar]

Sorry, what I meant is the regular works. There are other like bold, thin, light, and others that may be in use. For example bold for heading. How do I mention multiple fonts in the source?

src: url("font1.otf","font2.otf");

or

src: url("font1.otf");

src: url("font2.otf");

[Peter Grainge]

First of all, see if you really need all of them. I found just installing regular and then applying bold and italic in RoboHelp or via the keyboard worked fine. My guess is you only need them if the font size is very large.Light and suchlike will probably install with different font names so you may need those..

I think I would look in Windows settings and uninstall all the proximanova fonts and start again with just regular, then see what you need.

As to how to write the URLs, I found this on the web. Even uses your font.

https://stackoverflow.com/questions/13609119/if-multiple-sources-are-listed-in-an-font-face-are-all-...

---

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

@petergrainge

[Tejas Dandekar]

It worked but partially .

You are right actually only 2 fonts are being used the regular and semibold.

The regular is used for all of the body text and the semibold for the headings at all levels.

With this snipped in the CSS:

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

src: url("proximanova-regular.otf");

url("proximanova-semibold.otf");

}

In the output, the body text looks fine. Only the topic headings and the text in the left navigation and the title text shows up as times roman. Ideally, this snipped should work, right?

[Amebr]

Try replacing the semi-colon after the first otf reference with a comma.

That way you're comma-separating your font files.

[Peter Grainge]

To add to Amber's answer, I'm guessing the headings are wrong as you haven't added it font to the heading style.

h1 {

  font-family: Quicksand;

  font-weight: bold;

  font-size: 24.0pt;

}

where Quicksand is the name of your font in style dropdowns.

---

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

@petergrainge

[Peter Grainge]

I have added a TOC to the 2017 demo and it is not showing in Times. What are you seeing?

---

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

@petergrainge

[Tejas Dandekar]

The demo link looks fine. I don't see Time Roman either in the ToC.

[Tejas Dandekar]

So, it is still working partially. The body text is showing up perfectly. Only the headings and the font of the ToC is Times Roman for some reason. Here is the CSS extract. Is something amiss here?

/*Created with Adobe RoboHelp 2017.*/

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

src: url("proximanova-regular.otf"),

url("proximanova-semibold.otf");

}

h1 {

margin-right: 6.5pt;

margin-left: 5.75pt;

font-weight: bold;

font-size: 12pt;

margin-bottom: 11pt;

margin-top: 11pt;

font-family: "Proxima Nova Semibold";

color: #000000;

)

h2 {

margin-right: 6.5pt;

margin-left: 5.75pt;

font-weight: bold;

margin-bottom: 6.5pt;

margin-top: 18pt;

font-size: 11pt;

font-family: "Proxima Nova Semibold";

}

h3 {

margin-right: 6.5pt;

margin-left: 5.75pt;

font-weight: bold;

margin-top: 11pt;

margin-bottom: 6.5pt;

font-size: 10pt;

font-family: "Proxima Nova Semibold";

}

[Peter Grainge]

In @font-face there is no reference to semi bold

Peter Grainge

www.grainge.org

@petergrainge

[Amebr]

I think for each font name you want to use, you need to define a separate @font-face rule. I can't see any examples of comma-separating the font-family...

[Peter Grainge]

I did find a couple of pages that confirm Amber's suggestion.

---

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

@petergrainge

[Tejas Dandekar]

Sorry, I was out of the office so could not get back.

Finally, after trying out various combinations, the custom font is working as expected. YaY!

However, it works on Chrome only. IE still shows up Times Roman. We can live with that because we recommend Chrome.

But any reason why it would not work on IE?

[Amebr]

Yep, IE doesn't support otf format. Have a look at the link Peter posted in post #8 for a brief description of which browsers support which formats. You'll need to add the required font file as baggage and add the file name in your comma separated list of font files (the src url entries).

Also have a look at the mozilla link I posted earlier. The section "@font-face in more detail" goes in to more detail.

[Tejas Dandekar]

Got it. All is good on Chrome with the custom font.

Is there a way to define Arial as the default fall back font and not Times Roman if a user decides to ditch Chrome and view the help in IE? Right now the default Times Roman shows up in IE.

[Jeff_Coatsworth]

I thought there was something in the CSS you could do - font families or something? Something that says, "try using this font first, but if that's not available, try this one, etc."

[Amebr]

When you define the font-family for your styles, that's where you specify the fallback fonts using a comma separated list.

For example

font-family: "My Fancy Font", Arial, Helvetica, sans-serif;

In Robohelp, you'd select the font set you created earlier in this thread and specify one or more other fonts AFTER your preferred font.

" If you specify a font set, you can tell the computer which font to load if "ReallyCoolFont" is not available."

The Logical Blog by IconLogic: Adobe RoboHelp 7: Font Sets

[Jeff_Coatsworth]

Ah good, I wasn't hallucinating then

[Tejas Dandekar]

I tried this:

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

src: url("proximanova-regular.otf");

}

@font-face {font-family: "Proxima Nova Semibold", "Arial";

src: url("proximanova-semibold.otf");

}

But the fall back didn't work. Times Roman still shows up.Also the proxima nova which is my custom font didn't show up after I added the fallback Arial.

I tried with and without the double-quotes.

Also, I followed the steps here The Logical Blog by IconLogic: Adobe RoboHelp 7: Font Sets to add Arial in the font sets. So my font sets now shows Proxima nova first and then Arial.

Is something missing?

[Peter Grainge]

You don't add it in the @font-face definition. Add it to the font family in the individual style definitions such as H1, P and so on.

---

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

@petergrainge

[Tejas Dandekar]

Yes, worked. Thanks.