Font `swap` vs. `optional`

[davidrans]

use-system-font

Google dislikes any second paint above the fold. It's likely setting font-display: optional would fix it (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)
Optional will force the first load of "slow" users to not use our font(s) and thus fallback to the browser defaults.
It's possible to style the browser defaults close to the actual font, which is what we do on the main site. It's a pain to style and may not be worth it right now.

                  href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:wght@400;700&display=optional"

Originally posted by @jarstelfox in #564 (comment)

[federicobadini]

I think we should discuss a point here: how much value we tribute to the Lato font?

The display=optional property is said to give the font face an extremely small block period and no swap period. That means that it may often happen that on low bandwidth network or on slow devices, we will end up without Lato.
So, why not abandoning Lato at all?

If we choose to exploit a font strategy like this we will have a coherent UX regarding fonts and we will align to the default font of the various operating systems.

Consider that all the mockups made by @mmarcon91 were in SF font, so the default font of OSX. So that will be the actual appearance for OSX.
Moreover we will not have anymore any FOUT or font to download.

It all boils down to how much important is Lato for us

[jarstelfox]

It all boils down to how much important is Lato for us

💯. Kyle indicated that was okay for us to do:

Kyle Wiens
1 day ago
Or we just switch to system font!

The way we handle this on the main website is that Lato is display=optional and we did spend a lot of time trying to get the system font stack on all devices to look okay enough. Since we are not swapping the font until a page load (now that Lato would be cached) you never take the LCP hit.

How would you feel about:

• A user possibly gets Lato, possibly gets a system font
• Both fonts look okay
• No swapping between them
• Next page load is Lato for those who had a system font

[davidrans]

I've been kind of annoyed by the font switching back and forth between page loads. I'd prefer switching to the system font all the time if @kwiens and @mmarcon91 are okay with it.

[mmarcon91]

It's ok for me! 🙌

[kwiens]

Sure, let's do it.

We should kick off that project for the rest of the code now too, then.

[davidrans]

https://github.com/iFixit/ifixit/discussions/41208
https://github.com/iFixit/ifixit/pull/41227