Guidelines

This site is for tech Q&A. Please keep your posts focused on the subject at hand.

Ask one question at a time. Don't conflate multiple problems into a single question.

Make sure to include all relevant information in your posts. Try to avoid linking to external sites.

Links to documentation are fine, but in addition you should also quote the relevant parts in your posts.

0 votes
158 views
158 views

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:

Screenshot of misaligned code lines.

How do I fix that?

in Sysadmin
by (100)
1 7 21
edit history

Please log in or register to answer this question.

1 Answer

0 votes
 

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');
}
by (100)
1 7 21
edit history
...