Skip to content

Use font-display: swap for custom fonts

Mark Florian requested to merge 410199-font-display-swap into master

What does this MR do and why?

Use font-display: swap for custom fonts

Addresses #410199 (closed). See also #426437 (closed).

Changelog: changed

Screenshots or screen recordings

From #426437 (comment 1598437203):

Now that we've had a couple of days to collect metrics, I don't see any change in CLS in either Sentry or DebugBear:

cls_2

cls_1

Note that the selected point on the graph is approximately when the feature flag was enabled globally.

Anecdotally, this matches my own experience: I haven't noticed a change in layout shifts since this was enabled. I've also not heard of any complaints since this was enabled.

So, I think we should remove the feature flag and use font-display: swap.

How to set up and validate locally

  1. Force reload any page (that is, bypass the cache, e.g., CtrlF5 (not sure about macOS))
  2. Observe GitLab Sans/Mono are always used.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #410199 (closed)

Edited by Mark Florian

Merge request reports