If you want to use multiple font weights, you have to load and reference each weight in your stylesheet. Otherwise, you end up with a browser-added faux-bolding instead of the actual bold font.
Someone should make a Chrome developer tools extension to catch stuff like this. It's incredible how many people mess it up and don't realize it, simply because developers still aren't accustomed to good typography on web pages.
A separate font file is required for every style and weight of a typeface that you want to use. For example, to use four unique styles of a typeface on a site (say Regular, Italic, Bold, and Bold Italic), you would need to import four font files (ClearSans-Regular, ClearSans-Italic, ClearSans-Bold, ClearSans-BoldItalic).
If you give a chunk of type a style or weight that you haven't loaded the appropriate font file for, browsers will add weight to or slant the text themselves. ("faux-bold", "faux-italic"). This gives you ugly, rough, less readable text that counteracts the primary reasons to use a web font in the first place. Default CSS styles (H1 automatically adding font-weight: bold;) can also cause this in some cases. [See link]
That technique is actually what I'm referring to. I've seen that not work before; sorry don't have details. I just don't mess with that anymore and instead use every font-family explicitly when needed.
If you want to use multiple font weights, you have to load and reference each weight in your stylesheet. Otherwise, you end up with a browser-added faux-bolding instead of the actual bold font.