Chrome doesn't support `font-family: "Arial Bold"`?

Question

In Chrome v75 Windows 10

font-family: "Arial Black" works, but font-family: "Arial Bold" doesn't.

They both work in Edge.

I know I can still use font-weight. But here I struggle to understand why Chrome doesn't work with Bold: Other fonts that end with Bold wouldn't be found either.

As you see in the above I have all variants installed. "Arial Bold" falls back to "broadway".

http://jsfiddle.net/amts6ebq/1/

Answer 1

"Arial Bold" isn't a font family.

"Arial" is a font family. "Bold" is a weight. The Bold weight of Arial is stored in a file called "Arial Bold", but this doesn't mean it's part of a separate family.

What you want is:

.example {
  font-family: "Arial";
  font-weight: bold;
}

<div class="example">Example</div>

Answer 2

It’s true, "Arial Bold" isn't a font family. You can blame Microsoft.

Using the font-weight declaration is the correct answer, however, some users might find themselves in my situation. I am using sass on a large number of templates, and we have written all our work so far in a way that we cannot use font-weight. We apply font weights by using font-families of different weights. One recent design was specified to use Arial. Of course we also need to use this font in bold in many places. So Arial won’t work for us.

The solution is to use a different font. Arial is actually the same as Helvetica, so you can do a direct swap and no one will know. You can't rely on the user having Helvetica installed on their system, so you will need to provide web fonts. If you can't find a version of Helvetica to use, There are a lot of similar fonts. You should search online for Arial/Helvetica equivalents, but in 2022, I'm using Roboto, which is a good match, but it is a little condensed. Open Sans might be an acceptable replacement.

tldr; Art Direction should never specify the Arial typeface - it’s not a real typeface, it’s Microsoft’s free version of Helvetica. Instead, use Helvetica.