Beware the Font Name

The other day at work, we were reviewing some CSS code when we stumped upon something interesting. It was related to how we imported the new font files that we got from an agency.

The code looked something like this:

@font-face {
  font-family: myFont;
  src: url(myFont.eot);
  src: url(myFont.woff) format("woff"), 
       url(myFont.ttf) format("truetype");
}

@font-face {
  font-family: myFont-bold;
  src: url(myFont-Bold.otf);
}

@font-face {
  font-family: myFont-bolditalic;
  src: url(myFont-BoldItalic.otf);
}

@font-face {
  font-family: myFont-italic;
  src: url(myFont-Italic.otf);
}

@font-face {
  font-family: myFont-medium;
  src: url(myFont-Medium.otf);
}

@font-face {
  font-family: myFont-mediumitalic;
  src: url(myFont-MediumItalic.otf);
}

---

It was a puzzling moment that led to a more interesting conversation:

DEV 1:
Why are you doing it like that?

DEV 2:
That's how the agency provided the fonts.

DEV 1:
But that makes the code more difficult to maintain.

DEV 2:
It's not that much.

DEV 1:
Also, you may not be using the font you think you are using. Why not have the same name for all the fonts?

DEV 2:
What do you mean by "the same name"?

DEV 1:
Yes, why don't you do something like this:

@font-face {
  font-family: myFont;
  src: url(myFont.eot);
  src: url(myFont.woff) format("woff"), 
       url(myFont.ttf) format("truetype");
}

@font-face {
  font-family: myFont;
  src: url(myFont-Bold.otf);
  font-weight: bold;
}

@font-face {
  font-family: myFont;
  src: url(myFont-BoldItalic.otf);
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: myFont;
  src: url(myFont-Italic.otf);
  font-style: italic;
}

@font-face {
  font-family: myFont;
  src: url(myFont-Medium.otf);
  font-weight: 500;
}

@font-face {
  font-family: myFont;
  src: url(myFont-MediumItalic.otf);
  font-style: italic;
  font-weight: 500;
}

DEV 2:
Wait, you cannot do that! ...Can you?!

I have to admit, at this point, I doubted myself and had to pause to verify that the suggested alternative was, in fact, correct.

The test

But even after the explanation, the other developer didn't seem too convinced, so we created a simple example:

<section>
  <h1>This is a title</title>
  <p>
    And this is a paragraph with <b>bold text</b> using
    the <strong>b and strong tags</strong>.
  </p>
</section>

The CSS looked like the first import, plus these rules:

body {
  font-family: myFont, sans-serif;
}

h1, h2, h3, h4 {
  font-family: myFont-bold, sans-serif;
}

The text had the new font, and the titles, <b>, and <strong>, looked bold. Everything seemed correct... but it really wasn't. And it was easier to see after we replaced the bold font with a new font that looked completely different, like a handwriting font:

@font-face {
  font-family: myFont-bold;
  src: url(Handwriting-bold.otf);
}

After that, we reloaded the page, and... the headings looked bold and had the new font, and the <b> and <strong> elements looked bold, too... but they have the old font!

In reality, the browser had synthetically emboldened the regular font to approximate how it should look. But that was not the bold font. An example on the W3C font module definition explains this effect and process in detail.

Now, it was apparent where the problem was and what we needed to do. If we kept the different names for all the fonts, we would need to redefine the font for every single element and situation. Otherwise, we would just be using the regular font (modified by the browser to look correctly) instead of the custom fonts we had.

Conclusion

Our team had paid for an agency to create fancy fonts, and then we were not really using them because we didn't incorporate the fonts properly in CSS.

We were specifying the font for some particular elements (e.g., headings) but not for all elements (e.g., missing <b> and <strong>), and that made the browser generate fake bold/italics versions of the font, instead of the actual bold/italics fonts that we were importing (and paid for!)

We should let the browser handle the font complexity instead of trying to go around it by using different names. Having the same name (specifying the font-weight and style) makes things smoother and easier to maintain in the long run.

Bibliography

• CSS Tricks: What’s the deal with declaring font properties on @font-face?
• Hacksoft: Using multiple font files the right way
• W3C: CSS Fonts Module Level 4 (editor's draft)

Cover photo by Brett Jordan on Unsplash.

Comments

[Supportic]

Don't forget to use local("fontName") in src separated by comma so it will search for the font on the user's machine first. May reduce the amount of resource requests.