I have had CLS problems on my website since a long time now. I decided to shift to next/font since it mentions
next/font includes built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.
I first tried it on a Next JS boilerplate to see if it’s really true, but I can still experience CLS on mobile.
https://file.io/rqIwPBSoVYAH
Can anyone help me in this regard? Or is this CLS inevitable?
I tried next/font and expected 0 CLS
This is my layout.tsx
import type { Metadata } from "next";
import { Nunito_Sans } from "next/font/google";
import "./globals.css";
const nunitoSans = Nunito_Sans({ subsets: ["cyrillic"], display: "swap" });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={nunitoSans.className}>{children}</body>
</html>
);
}