Skip to content

Add font-display: swap behind a feature flag

Mark Florian requested to merge 410199-inconsistent-fonts into master

What does this MR do and why?

Add font-display: swap behind a feature flag

This is an attempt to resolve inconsistent font rendering.

See #410199 (closed) for details.

Screenshots or screen recordings

n/a

How to set up and validate locally

As far as I can tell, no browser's devtools makes it easy to inspect @font-face rules. Firefox almost does, but truncates the properties with no apparent way to expand them:

simplescreenrecorder-2023-09-28_11.53.21

So instead, good ol' View Source will have to do!

  1. Load any page.
  2. View Source (usually via something like CtrlU).
  3. Search for a CSS file with fonts.
  4. Click it.
  5. Observe the font-display is optional for all four @font-face rules.
  6. Enable the font_display_swap feature flag.
  7. Repeat steps 1 to 4.
  8. Observe the font-display is swap for all four @font-face rules.

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