Display issue with BOLD custom font in HTML5 project

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):

@11220649-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!