Next.js Discord

Discord Forum

next/font not applying font until AFTER full load

Answered
chan posted this in #help-forum
Open in Discord
chanOP
I switched to using next/fonts to improve performance and prevent cumulative layout shift but the CLS still happens. It seems like the font is the second thing to get fetched right after the base HTML yet the entire UI's font doesn't update until AFTER everything else has loaded. How do I fix this?
Answered by chan
I removed the weight parameter in the Inter function and the font-weight declarations in globals.css and it remedy's the issue. the Inter font now loads into the full DOM properly. I still want/need the font weights though lol
View full answer

42 Replies

chanOP
seems like the stuff in <b> tags loads as Inter from the get go. why not the rest of the content?
American Chinchilla
What's your code look like?
@American Chinchilla What's your code look like?
chanOP
// layout.js

import "./globals.css";
import { Footer } from "./components/Footer";
import { Inter } from "next/font/google";

const inter = Inter({
  weight: ["400", "700"],
  subsets: ["latin"],
  variable: "--font-inter",
});

export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      translate="no"
      className={`${inter.variable} font-sans subpixel-antialiased text-text bg-gradient-to-br from-primary to-secondary scroll-smooth`}
    >
      <body id="root" className="min-h-screen flex flex-col justify-between">
        {children}
        <Footer />
      </body>
    </html>
  );
}


//tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)"],
      },
    },
  },
  plugins: [],
};


//globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    font-family: var(--font-inter);
  }

  body {
    font-weight: 400;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-weight: 700;
  }

  html {
    font-size: 100%;
  } /* 16px */
}
// page.js

import Image from "next/image";
import chanPhoto from "../public/me.webp";

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col items-center pl-8 pr-8 pb-10 leading-relaxed justify-center">
      <section id="intro" className="flex flex-col max-w-screen-md pb-10">
        <div
          id="picAndInfo"
          className="flex flex-col md:flex-row items-center justify-center"
        >
          <div className="w-52 h-52 sm:w-64 sm:h-64 md:w-80 md:h-80 flex-shrink-0">
            <Image
              src={chanPhoto}
              alt="Chandler at the Pokemon Cafe in Tokyo, Japan"
              className="rounded-xl"
              quality={80}
              priority={true}
              loading={"eager"}
            />
          </div>
          <div className="flex flex-col items-center justify-center pt-5 md:pl-7">
            <ul className="">
              <li>
                <b>Name:</b> Chandler Forrest
              </li>
              <li>
                <b>Location:</b> California (GMT -07:00)
              </li>
              <li>
                <b>Years of Experience:</b> 5 Years
              </li>
              <li>
                <b>Credentials:</b> B.S. Computer Science
              </li>
              <li>
                <b>School:</b> UC Santa Barbara
              </li>
              <li>
                <b>Favorite Languages:</b> Python, JavaScript, Java
              </li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  );
}
I'm using the next/font library exactly how the documentation says to https://nextjs.org/docs/app/api-reference/components/font
American Chinchilla
Tried reproducing and everything looked normal to me
What version of next are you running?
And are you importing tailwind components and utilities to globals.css?
@American Chinchilla And are you importing tailwind components and utilities to globals.css?
chanOP
yes. forgot to include them in the snippet. updated it
@American Chinchilla What version of next are you running?
chanOP
▲ Next.js 14.2.3
@American Chinchilla Tried reproducing and everything looked normal to me
chanOP
so you see everything in the DOM having Inter from the get go? no CLS?
@chan so you see everything in the DOM having Inter from the get go? no CLS?
American Chinchilla
yes—did you restart after updating the tailwind config by any chance? sometimes that can cause weird stuff like that...
My first thought was it had something to do with the font weight not being added but it looks like you're handling that in the snippets
@American Chinchilla My first thought was it had something to do with the font weight not being added but it looks like you're handling that in the snippets
chanOP
yeah. I made sure to comb through the globals.css and tailwind config to see if something was off. will comb again..
American Chinchilla
do you have a full repo on github by any chance?
chanOP
let me make clone toy project which is a stripped down version of my current repo
American Chinchilla
im really not sure what's happening
chanOP
you can only really see the cummulative layout shift when you throttle the network with the toy app
but if it's still not happening for you even with the throttled network then yea..clueless
American Chinchilla
yeah, i'm not getting it when i'm throttling
does it happen on other browsers?
chanOP
happens on chrome + firefox
American Chinchilla
try deleting .next
/stop server before, delete and restart
chanOP
tried deleting .next. still happens on dev and a full build. working fine on the bold tags somehow..
I appreciate all the help you're giving me. You've gone above and beyond
American Chinchilla
the bold tags are really tripping me up lol
chanOP
I removed the weight parameter in the Inter function and the font-weight declarations in globals.css and it remedy's the issue. the Inter font now loads into the full DOM properly. I still want/need the font weights though lol
Answer
American Chinchilla
does it work if you only remove the font-weight in globals?
chanOP
okay..figured it out
so Inter is a variable weight font. the Next.js documentation doesn't say you need to add a weight param to the Inter function call but I did anyways just to be concise. guess that ruins the way it loads or something since removing that param fixes everything
the documentation should be more explicit in saying "don't declare font-weights for variable weight fonts such as Inter.."
American Chinchilla
the odd part in that though is it's on the type
chanOP
no CLS
American Chinchilla
weird
there is a mention that variable has better performance
chanOP
weird. yeah. super weird.
even stranger then lol