From 36420614d6e99131ccf23ce961eb0a704eabc2d0 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 11 Oct 2023 12:05:28 +0100
Subject: [PATCH] Use font-display: swap for custom fonts
Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/410199. See also
https://gitlab.com/gitlab-org/gitlab/-/issues/426437.
Changelog: changed
---
app/assets/stylesheets/fonts.scss | 10 ++++------
app/assets/stylesheets/fonts_optional.scss | 1 -
app/assets/stylesheets/fonts_swap.scss | 3 ---
app/views/layouts/_head.html.haml | 5 +----
app/views/layouts/_loading_hints.html.haml | 5 +----
app/views/layouts/component_preview.html.haml | 6 +-----
config/application.rb | 3 +--
config/feature_flags/development/font_display_swap.yml | 8 --------
8 files changed, 8 insertions(+), 33 deletions(-)
delete mode 100644 app/assets/stylesheets/fonts_optional.scss
delete mode 100644 app/assets/stylesheets/fonts_swap.scss
delete mode 100644 config/feature_flags/development/font_display_swap.yml
diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss
index 2f7228766b925..6886e751b723b 100644
--- a/app/assets/stylesheets/fonts.scss
+++ b/app/assets/stylesheets/fonts.scss
@@ -1,5 +1,3 @@
-$font-display: optional !default;
-
/* -------------------------------------------------------
Inter variable font.
@@ -9,7 +7,7 @@ Usage:
@font-face {
font-family: 'GitLab Sans';
font-weight: 100 900;
- font-display: $font-display;
+ font-display: swap;
font-style: normal;
/* stylelint-disable-next-line property-no-unknown */
font-named-instance: 'Regular';
@@ -19,7 +17,7 @@ Usage:
@font-face {
font-family: 'GitLab Sans';
font-weight: 100 900;
- font-display: $font-display;
+ font-display: swap;
font-style: italic;
/* stylelint-disable-next-line property-no-unknown */
font-named-instance: 'Regular';
@@ -35,7 +33,7 @@ Usage:
@font-face {
font-family: 'GitLab Mono';
font-weight: 100 900;
- font-display: $font-display;
+ font-display: swap;
font-style: normal;
src: font-url('gitlab-mono/GitLabMono.woff2') format('woff2');
}
@@ -43,7 +41,7 @@ Usage:
@font-face {
font-family: 'GitLab Mono';
font-weight: 100 900;
- font-display: $font-display;
+ font-display: swap;
font-style: italic;
src: font-url('gitlab-mono/GitLabMono-Italic.woff2') format('woff2');
}
diff --git a/app/assets/stylesheets/fonts_optional.scss b/app/assets/stylesheets/fonts_optional.scss
deleted file mode 100644
index 2b1a3796bbc5a..0000000000000
--- a/app/assets/stylesheets/fonts_optional.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'fonts';
diff --git a/app/assets/stylesheets/fonts_swap.scss b/app/assets/stylesheets/fonts_swap.scss
deleted file mode 100644
index b259b8ad10303..0000000000000
--- a/app/assets/stylesheets/fonts_swap.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$font-display: swap;
-
-@import 'fonts';
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 267c32e53bd5c..bb492913346dc 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -38,10 +38,7 @@
= stylesheet_link_tag "disable_animations", media: "all" if Rails.env.test? || Gitlab.config.gitlab['disable_animations']
= stylesheet_link_tag "test_environment", media: "all" if Rails.env.test?
- - if ::Feature.enabled?(:font_display_swap, current_user)
- = stylesheet_link_tag_defer "fonts_swap"
- - else
- = stylesheet_link_tag_defer "fonts_optional"
+ = stylesheet_link_tag_defer "fonts"
= stylesheet_link_tag_defer "highlight/themes/#{user_color_scheme}"
diff --git a/app/views/layouts/_loading_hints.html.haml b/app/views/layouts/_loading_hints.html.haml
index b6b1fe716dbb8..bf0421e962487 100644
--- a/app/views/layouts/_loading_hints.html.haml
+++ b/app/views/layouts/_loading_hints.html.haml
@@ -20,7 +20,4 @@
%link{ rel: 'preload', href: font_path('gitlab-sans/GitLabSans-Italic.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 }
- - if ::Feature.enabled?(:font_display_swap, current_user)
- = preload_link_tag(path_to_stylesheet('fonts_swap'), crossorigin: css_crossorigin)
- - else
- = preload_link_tag(path_to_stylesheet('fonts_optional'), crossorigin: css_crossorigin)
+ = preload_link_tag(path_to_stylesheet('fonts'), crossorigin: css_crossorigin)
diff --git a/app/views/layouts/component_preview.html.haml b/app/views/layouts/component_preview.html.haml
index 4ef7ba0486877..82ad5e3e3bbd3 100644
--- a/app/views/layouts/component_preview.html.haml
+++ b/app/views/layouts/component_preview.html.haml
@@ -1,4 +1,5 @@
%head
+ = stylesheet_link_tag "fonts"
- if params[:lookbook][:display][:theme] == "light"
= stylesheet_link_tag "application"
= stylesheet_link_tag "application_utilities"
@@ -6,11 +7,6 @@
= stylesheet_link_tag "application_dark"
= stylesheet_link_tag "application_utilities_dark"
- - if ::Feature.enabled?(:font_display_swap, current_user)
- = stylesheet_link_tag_defer "fonts_swap"
- - else
- = stylesheet_link_tag_defer "fonts_optional"
-
%body
.gl-mt-6{ class: (params[:lookbook][:display][:layout] == "fluid" ? "container-fluid" : "container") }
- if params[:lookbook][:display][:bg_dark]
diff --git a/config/application.rb b/config/application.rb
index ad62648868fc8..29f3688015318 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -368,8 +368,7 @@ class Application < Rails::Application
config.assets.precompile << "disable_animations.css"
config.assets.precompile << "test_environment.css"
config.assets.precompile << "snippets.css"
- config.assets.precompile << "fonts_optional.css"
- config.assets.precompile << "fonts_swap.css"
+ config.assets.precompile << "fonts.css"
config.assets.precompile << "locale/**/app.js"
config.assets.precompile << "emoji_sprites.css"
config.assets.precompile << "errors.css"
diff --git a/config/feature_flags/development/font_display_swap.yml b/config/feature_flags/development/font_display_swap.yml
deleted file mode 100644
index cabe3ca614acf..0000000000000
--- a/config/feature_flags/development/font_display_swap.yml
+++ /dev/null
@@ -1,8 +0,0 @@
----
-name: font_display_swap
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/132798
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/426437
-milestone: '16.5'
-type: development
-group: group::foundations
-default_enabled: false
--
GitLab