@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';

[Emiliano-Bucci]

@LogansDad This is something we can fix or should be fixed next js side?

[LogansDad]

This is something anyone can fix on any webpage that has custom fonts

[Emiliano-Bucci]

Sorry but this is not clear to me. Let's say I'm using the Inter font. What code should I have to add to make it properly work on android devices?

[LogansDad]

Declare a fallback font for inter at the top of your html document....
@font-face{font-family:"fallback-font-for-inter";size-adjust:{figure-out-the-percentage}%;src:local('Roboto');}

Then, for your css, something like....
font-family: Inter, 'fallback-font-for-inter';

[Emiliano-Bucci]

Hh that way, yes ok! Thanks a lot! :)