Merge branch '1321-inter-font' into 'main'

Add GitLab Sans and JetBrains Mono fonts

Closes #1321

See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/3450

Merged-by: David O'Regan <doregan@gitlab.com>
Approved-by: Suzanne Selhorn <sselhorn@gitlab.com>
Approved-by: David O'Regan <doregan@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>

11 files changed, 68 insertions, 31 deletions

diff --git a/Makefile b/Makefile
index c4f987b8..a8368c58 100644
--- a/Makefile
+++ b/Makefile
@@ -203,4 +203,9 @@ check-global-navigation:
 check-pages-not-in-nav: install-nodejs-dependencies
 	@scripts/pages_not_in_nav.js | jq
 
+add-gitlab-fonts:
+	@printf "\n$(INFO)INFO: Copying GitLab fonts...$(END)\n"
+	cp -v node_modules/@gitlab/fonts/gitlab-sans/GitLabSans.woff2 public/assets/fonts
+	cp -v node_modules/@gitlab/fonts/jetbrains-mono/JetBrainsMono* public/assets/fonts
+
 test: setup rspec-tests jest-tests eslint-tests prettier-tests stylelint-tests hadolint-tests yamllint-tests markdownlint-tests check-global-navigation
diff --git a/Rules b/Rules
index a2ba5231..da252b0a 100644
--- a/Rules
+++ b/Rules
@@ -175,6 +175,7 @@ layout '/**/*', :erb
 passthrough '/favicon.ico'
 
 postprocess do
+  raise "Failed to copy GitLab fonts. Run 'yarn install' and try again." unless system('make add-gitlab-fonts')
   raise "postprocessing error" unless system('nanoc frontend')
 
   Gitlab::SymlinksConverter.run(config, items)
diff --git a/content/assets/stylesheets/_base.scss b/content/assets/stylesheets/_base.scss
index 36bfbce5..7683b247 100644
--- a/content/assets/stylesheets/_base.scss
+++ b/content/assets/stylesheets/_base.scss
@@ -16,17 +16,8 @@ body {
   color: $gray-800;
   display: flex;
   flex-flow: column;
-  font-size: 1rem;
-  font-family: $gl-regular-font;
-  line-height: 1.5;
   min-height: 100%;
   position: relative;
-  -webkit-font-smoothing: antialiased;
-
-  code {
-    font-size: 0.875rem;
-    font-family: $gl-monospace-font;
-  }
 }
 
 // Fluid images by default
diff --git a/content/assets/stylesheets/_landing.scss b/content/assets/stylesheets/_landing.scss
index 9550c8c4..b3ad0d86 100644
--- a/content/assets/stylesheets/_landing.scss
+++ b/content/assets/stylesheets/_landing.scss
@@ -341,7 +341,6 @@
     .title {
       font-weight: 600;
       font-size: 2rem;
-      font-family: 'Source Sans Pro', sans-serif;
     }
 
     .sub-title {
diff --git a/content/assets/stylesheets/_normalize.scss b/content/assets/stylesheets/_normalize.scss
index 68e76876..b791ad29 100644
--- a/content/assets/stylesheets/_normalize.scss
+++ b/content/assets/stylesheets/_normalize.scss
@@ -221,18 +221,6 @@ pre {
   overflow: auto;
 }
 
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
 /* Forms
    ========================================================================== */
 
diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index 23f44916..0a4ff9ce 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -3,15 +3,55 @@
 @import 'mixins/md-typography';
 @import 'mixins/spacing';
 
+/*
+ * Font-face declarations copied from GitLab:
+ * https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/fonts.scss#L7
+ */
+@font-face {
+  font-family: 'GitLab Sans';
+  font-weight: 100 900;
+  font-style: normal;
+  font-named-instance: 'Regular'; /* stylelint-disable property-no-unknown */
+  src: url('../fonts/GitLabSans.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-display: optional;
+  font-style: normal;
+  src: url('../fonts/JetBrainsMono.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-display: optional;
+  font-weight: bold;
+  src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-display: optional;
+  font-weight: normal;
+  font-style: italic;
+  src: url('../fonts/JetBrainsMono-Italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-display: optional;
+  font-weight: bold;
+  font-style: italic;
+  src: url('../fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
+}
+
+/* https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107592/ */
+* {
+  font-variant-ligatures: none;
+}
+
 .gl-docs {
   p,
   ul,
   ol,
   pre,
   blockquote {
-    font-size: 1rem;
-    font-weight: normal;
-    letter-spacing: normal;
     margin-top: 0;
     margin-bottom: 1.5em;
   }
@@ -181,7 +221,6 @@
   @include gl-font-regular;
   @include gl-font-weight-normal;
 
-  -webkit-font-smoothing: auto;
 
   h1,
   h2,
@@ -200,6 +239,7 @@
 
     code {
       font-size: inherit;
+      line-height: 1.35;
     }
   }
 
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index e1c00677..ec5a66be 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -264,11 +264,10 @@ $badge-saas: $orange-500;
 // Gl Markdown
 
 // Fonts
-$gl-monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
-  'Courier New', 'andale mono', 'lucida console', monospace;
-$gl-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';
+$gl-monospace-font: 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
+  'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
+$gl-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-fonts: (
   'monospace': $gl-monospace-font,
diff --git a/layouts/fonts.html b/layouts/fonts.html
new file mode 100644
index 00000000..8409411c
--- /dev/null
+++ b/layouts/fonts.html
@@ -0,0 +1,5 @@
+<link rel="preload" href="/assets/fonts/GitLabSans.woff2" as="font" crossorigin />
+<link rel="preload" href="/assets/fonts/JetBrainsMono.woff2" as="font" crossorigin />
+<link rel="preload" href="/assets/fonts/JetBrainsMono-Italic.woff2" as="font" crossorigin />
+<link rel="preload" href="/assets/fonts/JetBrainsMono-Bold.woff2" as="font" crossorigin />
+<link rel="preload" href="/assets/fonts/JetBrainsMono-BoldItalic.woff2" as="font" crossorigin />
diff --git a/layouts/head.html b/layouts/head.html
index dea9c913..ab9e4573 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -35,6 +35,9 @@
 <% end %>
 <!-- End of CSP headers -->
 
+<!-- Preload fonts -->
+<%= render '/fonts.*' %>
+
 <link rel="stylesheet" href="/frontend/shared/global_imports.css">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/stylesheet.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/highlight.*'].path %>">
diff --git a/package.json b/package.json
index 5c6ccbea..c5b28091 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   "dependencies": {
     "@docsearch/css": "^3.3.2",
     "@docsearch/js": "3",
+    "@gitlab/fonts": "^1.1.0",
     "@gitlab/svgs": "^3.16.0",
     "@gitlab/ui": "^52.10.0",
     "@popperjs/core": "^2.11.6",
diff --git a/yarn.lock b/yarn.lock
index 53acbcf0..9a2a8f80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1192,6 +1192,11 @@
     eslint-plugin-vue "^9.3.0"
     lodash "^4.17.21"
 
+"@gitlab/fonts@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/fonts/-/fonts-1.1.0.tgz#141db7d7c8e72113307614932d64103d3a68668c"
+  integrity sha512-5XNDJke0ElrMRG5iLWOirFRSLQhf9oNpPx5uie1j2l8QU6RLkMAE0nXG6cwJ82mgAV49ZcqLXXSopWvuUg8Y9Q==
+
 "@gitlab/stylelint-config@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@gitlab/stylelint-config/-/stylelint-config-4.1.0.tgz#bd431406c8f8725afba353652f08e42c3301a982"