Display issue with BOLD custom font in HTML5 project

[mikel60656858]

I'm using a custom font in my RoboHelp 2019 (Classic) project and I'm running into an issue where bold text doesn't display at all when my HTML5 project is viewed in a browser (but it does appear properly in the editor).

The font I'm using is called Montserrat (a free font available from Google), and I'm using custom CSS for all my character and paragraph styles.

Some background: I originally ran into an issue where the font itself appeared properly in RoboHelp and in a browser on my machine, but that was because I have the font installed locally - it didn't appear for anyone who does not have the font (or when I disabled the font on my machine). So to solve that issue I added the following font files to the RH project (as baggage files) and to the layout folder (project/!ScreenLayout!/Azure_Blue):

Montserrat-Bold.tff
Montserrat-BoldItalic.tff
Montserrat-Italic.tff
Montserrat-Regular.tff

I also added the following code to default.css (at the top level of my project) and layout.css (in project/!ScreenLayout!/Azure_Blue):

@Blissful_help0D4E-face {
font-family: Montserrat;
src: url(Montserrat-Regular.ttf);
}

This solved my first issue and the Montserrat font now appears properly in all browsers.

But it led me to discover my current issue which is that text does not appear bold when I apply the BOLD character style in RH. (I never use the BOLD button in RH, instead I always select text and apply the style as defined in CSS.)

This is how the BODY style is written in default.css:

p.Body,
body,
p.Normal {
font-size: 12pt;
margin-left: 10px;
margin-right: 10px;
font-family: Montserrat, sans-serif;
x-next-page: page-with-header;
}

And here's how the BOLD style is written:

span.Bold {
font-weight: bold;
font-family: Montserrat;
}

As I said, whenever I apply the BOLD style to any text it appears OK in the RH project editor, but does not appear bold when viewed in a browser.

For comparison, the ITALIC style appears without issue. Here is how the ITALIC style is written:

span.Italic {
font-style: italic;
font-family: Montserrat;
}

So... I'm hoping someone here can try to help me figure out what I'm missing.

I tried removing the font-family attribute, but that doesn't help. I've tried to set the font-family of span.Bold to "Montserrat-Bold" but that didn't work as I thought it would. It did change the text to a bold font, but the font itself was not Montserrat, it looked more like Times or something. In my testing I have the Montserrat font disabled on my machine, but if I enable it the bold font DOES appear as Montserrat AND bold (but that's only because it's installed on my machine - it won't appear that way for anyone else who doesn't.)

So I don't know if this is a CSS issue or a RoboHelp issue, but I need to figure it out before I go live with this project in January.

Help me RoboHelp community, you're my only hope!

[Peter Grainge · Accepted solution]

Could it be that you haven't also added reference to the bold font? I'm only seeing one TTF referenced.

This does not refer to Montserrat-Bold.tff. Italics is a font-style whereas bold is a font-weight. Maybe that is somehow behind one working and the other not.

@font-face {
font-family: Montserrat;
src: url(Montserrat-Regular.ttf);
}

I may be completely wrong on that but it's worth a try.

Also have you tested on a server to ensure the @font-face is working rather than the locally installed files are giving that impression?

Also try enclosing src url file name in quotes ("Montserrat-Regular".ttf). Again not sure but worth trying.

---

www.grainge.org

[mikel60656858]

Peter your first suggestion was exactly it! I added a new @font-face reference with the bold file and that did the trick.

Such a facepalm moment... But sometimes all it takes is someone else's quick assessment to see something you didn't. Thanks!

[Peter Grainge]

We've all been there. 🙂

As you are working with@font-face, you might find these two links useful.

http://www.grainge.org/pages/authoring/fonts/fonts.htm covers various font methods.

Item 50 at http://www.grainge.org/pages/snippets/snippets.htm#miscellaneous covers how to use @font-face for the TOC and Index in responsive skins.

---

www.grainge.org