Why Nextjs 14 display button different with next/font and tailwind?

I am trying to upgrade to nextjs 14 but stuck to how to use next/font. I have two button that have exactly tailwind classes, just different about nextjs font className in the last

Here is my code

import type { Metadata } from "next";
import { Lato } from "next/font/google";
import "./globals.css";

const LatoFont = Lato({
  subsets: ["latin"],
  weight: "400",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body
        style={{ backgroundColor: "rgba (244, 241, 255, 1)" }}
        className={` ${LatoFont.className}`}
      >
        {/* {children} */}
        <button
          className={`bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg w-1/2 mr-2 ${LatoFont.className}`}
        >
          Google
        </button>
        <button
          className={`bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg w-1/2 mr-2`}
        >
          Google
        </button>
      </body>
    </html>
  );
}

and here is the result

I inspected and saw that the font-family inside these two button is exactly the same? And only the 2nd button displayed bold. Why their display different? Any idea?

Solution

In Next.js, when you're working with fonts, you might want to include multiple font weights, such as regular (400) and (600). You can modify your code like this to include both regular and semibold weights to rich the same result for both buttons

const LatoFont = Lato({
  subsets: ['latin'],
  weight: '400,600', // Add '400' for regular and '600' for semibold
});

You can refer to https://tailwindcss.com/docs/font-weight for information on the font-weight values to achieve the same behavior while using Tailwind CSS.

so it will be looks like:

import type { Metadata } from "next";
import { Lato } from "next/font/google";
import "./globals.css";

const LatoFont = Lato({
  subsets: ["latin"],
  weight: "400,600",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body
        style={{ backgroundColor: "rgba (244, 241, 255, 1)" }}
        className={` ${LatoFont.className}`}
      >
        {/* {children} */}
        <button
          className={`bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg w-1/2 mr-2 ${LatoFont.className}`}
        >
          Google
        </button>
        <button
          className={`bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg w-1/2 mr-2`}
        >
          Google
        </button>
      </body>
    </html>
  );
}