[RFC] Switch to font-display optional

[justman00]

Suggested change

I suggest moving from font-display: swap; to optional. Currently, on the website, we are experiencing FOUT(Flash of Unstyled Text), which leads to text jumping from line to line, not the perfect experience for users and a trigger in LCP, inflating that value, as well as higher and desirable CLS. Example below:

https://user-images.githubusercontent.com/36477870/123383797-49850180-d59c-11eb-811d-2b818fea1c2e.mov

For more context, this is a nice read, explaining how we got here and why font-display: optional; is the only solution that we can rely on.

Alternatives

I have explored with all the other font-display options out there, and out of all of them, either swap or optional I can see as the winners.

Potential downsides

Lack of brand experience for all the SumUp applications, however all of the other ones are apps that merchants tend to come back to very often, such as the dashboard or partner portal, and the lack of custom brand font is going to be only the first time they visit any app.

We are planning on trying this out on real users very soon on the marketing website, PR ref, so we don't have any data right now. One more downside is that we can not track what users get the custom font and what users get the fallback ones, as currently it is not supported to check the rendered font of an element programmatically.

[robinmetral]

I'm totally in favor of this if your experience with it on the website is positive 👍

[justman00]

I'm totally in favor of this if your experience with it on the website is positive 👍

Hey Robin, so this has been running on the marketing website for a month or so, and in fact, there is no noticeable impact on the business metrics, but there is quite a substantial one if we look at performance metrics, in particular, LCP: 13th of July being the date when we released the font-display: optional; feature

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Add a comment explaining why the issue is still relevant to prevent it from being closed.

[connor-baer]

I was hesitant about the proposed change initially, because I was afraid that our brand would lose its distinctiveness if our custom font isn't shown.

I just compared the marketing website (https://sumup.com) on first load with a fallback font and on second load with our second font — I can't tell them apart:

Fallback font	Custom font

Can you tell the difference?

Here's a diff:

I think the improvement to the user experience thanks to the reduced layout shift outweighs the (limited) branding value. Let's make the switch in the next major release.

Thank you @justman00 for suggesting this change and proving its value on the marketing website 🙌

[justman00]

great to see this moving forward!