Bold text formatted with web font gets misaligned

Question

I'm trying to use the Roboto Mono font in my web page. I have encoded the font in the open web font format (WOFF) and created the following @font-face rule for it:

@font-face {
  font-family: roboto-mono;
  src: url('robotomono-regular.woff');
}

However, when I make text bold it gets misaligned:

How do I fix that?

Answer 1

You need to create @font-face rules for all typefaces you'll be using (typically regular, italic, bold, and bold+italic). Create a .woff file for each of these typefaces (the font archive has TrueType fonts for all of them in the static subfolder) and reference the respective files in the rules. Use the same font-family name in all rules and distinguish the typefaces by font-weight and font-style:

@font-face {
  font-family: roboto-mono;
  font-weight: normal;
  font-style: normal;
  src: url('robotomono-regular.woff');
}
@font-face {
  font-family: roboto-mono;
  font-weight: normal;
  font-style: italic;
  src: url('robotomono-italic.woff');
}
@font-face {
  font-family: roboto-mono;
  font-weight: bold;
  font-style: normal;
  src: url('robotomono-bold.woff');
}
@font-face {
  font-family: roboto-mono;
  font-weight: bold;
  font-style: italic;
  src: url('robotomono-bolditalic.woff');
}