Merge branch 'leipert-use-gitlab-mono' into 'master'

Use GitLab Mono over JetBrains Mono

See merge request gitlab-org/gitlab!123056



Merged-by: Enrique Alcántara <ealcantara@gitlab.com>
Approved-by: Chad Woolley <cwoolley@gitlab.com>
Approved-by: Enrique Alcántara <ealcantara@gitlab.com>
Approved-by: Kamil Trzciński <ayufan@ayufan.eu>
Reviewed-by: Lukas 'Eipi' Eipert <leipert@gitlab.com>
Reviewed-by: Chad Woolley <cwoolley@gitlab.com>
Co-authored-by: Lukas Eipert <leipert@gitlab.com>

app/assets/stylesheets/fonts.scss

@@ -13,9 +13,32 @@ Usage:
   src: font-url('gitlab-sans/GitLabSans.woff2') format('woff2');
 }
 
+/* -------------------------------------------------------
+Monospaced font: GitLab Mono.
+
+Usage:
+  html { font-family: 'GitLab Mono', sans-serif; }
+*/
+@font-face {
+  font-family: 'GitLab Mono';
+  font-display: optional;
+  font-style: normal;
+  src: font-url('gitlab-mono/GitLabMono.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'GitLab Mono';
+  font-display: optional;
+  font-style: italic;
+  src: font-url('gitlab-mono/GitLabMono-Italic.woff2') format('woff2');
+}
+
 /* -------------------------------------------------------
 Monospaced font: JetBrains Mono.
 
+All of the definitions below can be removed once
+`GitLab Mono` is properly rolled out.
+
 Usage:
   html { font-family: 'JetBrains Mono', sans-serif; }
 */
@@ -49,11 +72,6 @@ Usage:
   src: font-url('jetbrains-mono/JetBrainsMono-BoldItalic.woff2') format('woff2');
 }
 
-:root {
-  --default-mono-font: 'JetBrains Mono', 'Menlo';
-  --default-regular-font: 'GitLab Sans', -apple-system;
-}
-
 // This isn't the best solution, but we needed a quick fix
 // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107592/
 * {

app/assets/stylesheets/framework/variables.scss

@@ -569,9 +569,9 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 /*
  * Fonts
  */
-$monospace-font: var(--default-mono-font, 'Menlo'), 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
+$monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
   'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
-$regular-font: var(--default-regular-font, -apple-system), BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
+$regular-font: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
   Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
   'Segoe UI Symbol', 'Noto Color Emoji';
 $gl-monospace-font: $monospace-font;

app/assets/stylesheets/startup/startup-dark.scss

@@ -17,10 +17,9 @@ header {
 }
 body {
   margin: 0;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -48,7 +47,7 @@ a:not([href]):not([class]) {
   text-decoration: none;
 }
 kbd {
-  font-family: var(--default-mono-font, "Menlo"), "DejaVu Sans Mono",
+  font-family: "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono",
     "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono",
     "lucida console", monospace;
   font-size: 1em;
@@ -413,10 +412,9 @@ a.gl-badge.badge-warning:active {
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #333238;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875rem;
   line-height: 1rem;
   padding-top: 0.5rem;

app/assets/stylesheets/startup/startup-general.scss

@@ -17,10 +17,9 @@ header {
 }
 body {
   margin: 0;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -48,7 +47,7 @@ a:not([href]):not([class]) {
   text-decoration: none;
 }
 kbd {
-  font-family: var(--default-mono-font, "Menlo"), "DejaVu Sans Mono",
+  font-family: "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono",
     "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono",
     "lucida console", monospace;
   font-size: 1em;
@@ -413,10 +412,9 @@ a.gl-badge.badge-warning:active {
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875rem;
   line-height: 1rem;
   padding-top: 0.5rem;

app/assets/stylesheets/startup/startup-signin.scss

@@ -16,10 +16,9 @@ header {
 }
 body {
   margin: 0;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -380,10 +379,9 @@ input.btn-block[type="submit"] {
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875rem;
   line-height: 1rem;
   padding-top: 0.5rem;

app/helpers/ide_helper.rb

@@ -8,8 +8,8 @@ def ide_data(project:, fork_info:, params:)
       'new-web-ide-help-page-path' => help_page_path('user/project/web_ide/index.md', anchor: 'vscode-reimplementation'),
       'sign-in-path' => new_session_path(current_user),
       'user-preferences-path' => profile_preferences_path,
-      'editor-font-src-url' => font_url('jetbrains-mono/JetBrainsMono.woff2'),
-      'editor-font-family' => 'JetBrains Mono',
+      'editor-font-src-url' => font_url('gitlab-mono/GitLabMono.woff2'),
+      'editor-font-family' => 'GitLab Mono',
       'editor-font-format' => 'woff2'
     }.merge(use_new_web_ide? ? new_ide_data(project: project) : legacy_ide_data(project: project))
 

app/views/layouts/_loading_hints.html.haml

@@ -17,8 +17,6 @@
     -# Do not use preload_link_tag for fonts, to work around Firefox double-fetch bug.
     -# See https://github.com/web-platform-tests/wpt/pull/36930
     %link{ rel: 'preload', href: font_path('gitlab-sans/GitLabSans.woff2'), as: 'font', crossorigin: css_crossorigin }
-    %link{ rel: 'preload', href: font_path('jetbrains-mono/JetBrainsMono.woff2'), as: 'font', crossorigin: css_crossorigin }
-    %link{ rel: 'preload', href: font_path('jetbrains-mono/JetBrainsMono-Bold.woff2'), as: 'font', crossorigin: css_crossorigin }
-    %link{ rel: 'preload', href: font_path('jetbrains-mono/JetBrainsMono-Italic.woff2'), as: 'font', crossorigin: css_crossorigin }
-    %link{ rel: 'preload', href: font_path('jetbrains-mono/JetBrainsMono-BoldItalic.woff2'), as: 'font', crossorigin: css_crossorigin }
+    %link{ rel: 'preload', href: font_path('gitlab-mono/GitLabMono.woff2'), as: 'font', crossorigin: css_crossorigin }
+    %link{ rel: 'preload', href: font_path('gitlab-mono/GitLabMono-Italic.woff2'), as: 'font', crossorigin: css_crossorigin }
     = preload_link_tag(path_to_stylesheet('fonts'), crossorigin: css_crossorigin)

config/application.rb

@@ -362,6 +362,7 @@ class Application < Rails::Application
     config.assets.paths << "#{config.root}/node_modules/@gitlab/fonts/"
     config.assets.precompile << "gitlab-sans/*.woff2"
     config.assets.precompile << "jetbrains-mono/*.woff2"
+    config.assets.precompile << "gitlab-mono/*.woff2"
 
     # Import gitlab-svgs directly from vendored directory
     config.assets.paths << "#{config.root}/node_modules/@gitlab/svgs/dist"

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -17,10 +17,9 @@ header {
 }
 body {
   margin: 0;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -48,7 +47,7 @@ a:not([href]):not([class]) {
   text-decoration: none;
 }
 kbd {
-  font-family: var(--default-mono-font, "Menlo"), "DejaVu Sans Mono",
+  font-family: "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono",
     "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono",
     "lucida console", monospace;
   font-size: 1em;
@@ -413,10 +412,9 @@ a.gl-badge.badge-warning:active {
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #333238;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875rem;
   line-height: 1rem;
   padding-top: 0.5rem;

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -17,10 +17,9 @@ header {
 }
 body {
   margin: 0;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -48,7 +47,7 @@ a:not([href]):not([class]) {
   text-decoration: none;
 }
 kbd {
-  font-family: var(--default-mono-font, "Menlo"), "DejaVu Sans Mono",
+  font-family: "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono",
     "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono",
     "lucida console", monospace;
   font-size: 1em;
@@ -413,10 +412,9 @@ a.gl-badge.badge-warning:active {
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875rem;
   line-height: 1rem;
   padding-top: 0.5rem;

ee/app/assets/stylesheets/startup/startup-signin.scss

@@ -16,10 +16,9 @@ header {
 }
 body {
   margin: 0;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -380,10 +379,9 @@ input.btn-block[type="submit"] {
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
-  font-family: var(--default-regular-font, -apple-system), BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875rem;
   line-height: 1rem;
   padding-top: 0.5rem;

spec/helpers/ide_helper_spec.rb

@@ -104,9 +104,9 @@
             help_page_path('user/project/web_ide/index.md', anchor: 'vscode-reimplementation'),
           'csp-nonce' => 'test-csp-nonce',
           'ide-remote-path' => ide_remote_path(remote_host: ':remote_host', remote_path: ':remote_path'),
-          'editor-font-family' => 'JetBrains Mono',
+          'editor-font-family' => 'GitLab Mono',
           'editor-font-format' => 'woff2',
-          'editor-font-src-url' => a_string_matching(%r{jetbrains-mono/JetBrainsMono})
+          'editor-font-src-url' => a_string_matching(%r{gitlab-mono/GitLabMono})
         }
       end