NextJS 搭配 TailwindCSS 页面切换时字体重复加载、大小变动导致偏移的问题求助

各位大佬好，我最近碰到一个特别头疼的问题：用NextJS开发项目时，每次切换页面都会重新加载字体，导致页面上的文字出现明显的大小变动和偏移，看起来就像bug一样。但奇怪的是，本地开发环境下一切正常，菜单切换完全不会有这个问题，只有在非本地环境才会出现这种情况。

下面是我的Layout组件代码，麻烦帮忙看看哪里可能出问题了：

import { Inter } from "next/font/google";
import Head from "next/head";
import React from "react";
import NavBar from "../common/navbar";
import Footer from "../common/footer";

const inter = Inter({ subsets: ["latin"] });

export default function Layout({
  children,
  title = "",
  description = "Find and stay updated",
}) {
  const pageTitle = title
    ? `google.net - ${title}`
    : "google.net";

  const metaTags = (
    <>
      <title>{pageTitle}</title>
      <meta name="description" content={description} />
    </>
  );

  return (
    <>
      <div className={`${inter.className} bg-white`}>
        <Head>{metaTags}</Head>
        <NavBar />
        <div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between tracking-wide md:px-4">
          {children}
        </div>
        <Footer />
      </div>
    </>
  );
}

有没有大佬遇到过类似的情况？或者能帮我分析下可能的原因，以及怎么解决这个字体重复加载、页面偏移的问题？

备注：内容来源于stack exchange，提问作者Wamz