Decide font-display strategy

ckrina → credited finnsky → .

ckrina → credited kostyashupenko → .

Comment by kostyashupenko:

I'd put my 50 cents regarding this change.

1. here is an image describing how font-display property works:


Usually on production web-sites you can see font-display: swap because it's really making sense. The screenshot above illustrating that swap value have no "invisible" state at all. From DOC:

swap - Gives the font face an extremely small block period and an infinite swap period.

when you are using auto - in most browsers it's actually meaning block. Which means text will be hidden for some timing, then fallback text shown, then custom font shown, which is never a case with swap value.

So i'd recommend to replace auto by swap again.

2. Next thing is why text is blinking on page refresh. I bet there were 2 reasons why:

- dropping of browser cache on every page reload? Could be a reason if you have used Google Chrome for instance with opened devtools while recording
- js issues?

Again - i don't think this task is related to font-display. Even if it's blinking or not -> font is cached by browser once loaded and on every next page reload font should be applied immediately from cache (check video below). And with `swap` once again - there is no "invisible" state.

I have changed locally font-display back to swap and here is a video: (see video on the issue)

Text is not blinking almost (maybe left bottom part of sidebar only).

Also i found another problem is that "Shortcuts" menu button is not clickable anymore (but contains child menu items, i have checked in devtools). Not sure if it's related to the js rework in this MR. Maybe a follow-up can be opened?

We might need to subset the font as well. Haven't checked how big it is but it should help with loading speed

Fixed font with preload and swap here
https://www.drupal.org/project/navigation/issues/3423020 🐛 Flickering when loading the page Needs review

Closed since fixed here https://www.drupal.org/project/navigation/issues/3423020 🐛 Flickering when loading the page Needs review