Skip to content

Add JetBrainsMono font styles

What does this MR do and why?

Adds bold, italic, and bold italic font styles to the JetBrainsMono font definition. As those definitions were absent, the browser rendered faux fonts.

How to set up and validate locally

To test:

  1. Enable the feature flag new_fonts
rails c
Feature.enable(:new_fonts)
  1. Make sure to run yarn install to get the latest fonts provided with @gitlab/fonts package

  2. Add this file to the local repo. Try to comment out lines added to fonts.scss in the scope of this MR. Note how differently the bold and italic monospace font is rendered with and without the changes

E.g. without this change in the latest Chrome, the bold text is rendered as normal. Firefox and Safari render faux bold font. All tested browsers (Chrome, Safari, Firefox) render faux italic.

Screenshots or screen recordings

It is better to compare the pages with real and faux font side by side to see the difference. Here are 2 examples:

Faux font Real font
Screenshot_2023-01-06_at_19.17.12 Screenshot_2023-01-06_at_19.17.00
faux-italic italic

Related to #387007 (closed)

Edited by Olena Horal-Koretska

Merge request reports