@next/font still has content layout shift on mobile

[LogansDad]

According to the doc for @next/font, you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.

However, the size-adjust property that @next/font uses does not work on Chrome for Android.

A bug for the issue is filed here
https://bugs.chromium.org/p/chromium/issues/detail?id=1370818

Most web traffic is from mobile devices, so utilizing size-adjust will not move the needle in the right direction for the CLS core web vital.

Posting this as a discussion here in hopes that this brings about more awareness and Google fixes size-adjust on Chrome for Android.

[lebreRafael]

I just added a comment in that chromium bug saying that the problem is not with size-adjust but actually with the font family we try to use on Android because Android only has Roboto as system font.
That said, Next can fix CLS on Android by creating another font-face for android fallback as described in this article
Then the font-family would include one more element. Something like:

font-family: '__Source_Serif_4_a4f0b3', '__Source_Serif_4_Fallback_a4f0b3', '__Source_Serif_4_Fallback_Android_a4f0b3';