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
21 views
21 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 General by (15) 4

Your answer

Preview

Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
By submitting this post you agree to our Terms & Conditions.
To avoid this verification in future, please log in or register.

1 Answer

0 votes
 
Best answer

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 (15) 4
...