Next.js Discord

Discord Forum

next/font not applying font until AFTER full load

Answered
chan posted this in #help-forum
Open in Discord
Avatar
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?
Image
Image
Image
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

Avatar
chanOP
seems like the stuff in <b> tags loads as Inter from the get go. why not the rest of the content?
Image
Avatar
American Chinchilla
What's your code look like?
Avatar
@American Chinchilla What's your code look like?
Avatar
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
Avatar
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?
Avatar
@American Chinchilla And are you importing tailwind components and utilities to globals.css?
Avatar
chanOP
yes. forgot to include them in the snippet. updated it
Avatar
@American Chinchilla What version of next are you running?
Avatar
chanOP
▲ Next.js 14.2.3
Avatar
@American Chinchilla Tried reproducing and everything looked normal to me
Avatar
chanOP
so you see everything in the DOM having Inter from the get go? no CLS?
Avatar
@chan so you see everything in the DOM having Inter from the get go? no CLS?
Avatar
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
Avatar
@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
Avatar
chanOP
yeah. I made sure to comb through the globals.css and tailwind config to see if something was off. will comb again..
Avatar
American Chinchilla
do you have a full repo on github by any chance?
Avatar
chanOP
let me make clone toy project which is a stripped down version of my current repo
Avatar
American Chinchilla
im really not sure what's happening
Image
Avatar
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
Avatar
American Chinchilla
yeah, i'm not getting it when i'm throttling
does it happen on other browsers?
Avatar
chanOP
happens on chrome + firefox
Avatar
American Chinchilla
try deleting .next
/stop server before, delete and restart
Avatar
chanOP
tried deleting .next. still happens on dev and a full build. working fine on the bold tags somehow..
Image
Image
I appreciate all the help you're giving me. You've gone above and beyond
Avatar
American Chinchilla
the bold tags are really tripping me up lol
Avatar
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
Avatar
American Chinchilla
does it work if you only remove the font-weight in globals?
Avatar
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.."
Avatar
American Chinchilla
the odd part in that though is it's on the type
Image
Avatar
chanOP
no CLS
Image
Image
Avatar
American Chinchilla
weird
there is a mention that variable has better performance
Avatar
chanOP
weird. yeah. super weird.
even stranger then lol