Next.js Discord

Discord Forum

Local font declarations not taking effect

Answered
Short mackerel posted this in #help-forum
Open in Discord
Short mackerelOP
Just spun up a fresh NextJS project (App Router v15.5.4) for a new website, and need to use a local font (Helvetica Neue Lt Pro). I have several .otf files which I've converted to .woff2 files. This font in particular has excess space below the baseline, which I wish to control using the descent-override descriptor for the @font-face at-rule. From the NextJS docs, I understand that the recommended way to achieve this is via declarations in next/font/local. The font is showing up OK, but descent-override property modification is not taking effect. If I set the override in my globals.css file using @font-face rules, then it all works as expected . Here is my layout.tsx file:

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

const helveticaNeueLtPro = localFont({
  declarations: [{ prop: "descent-override", value: "10%" }],
  src: [
    {
      path: "../assets/fonts/helvetica-neue-lt-pro/woff2/HelveticaNeueLTProTh.woff2",
      weight: "100",
      style: "normal",
    },
    {
      path: "../assets/fonts/helvetica-neue-lt-pro/woff2/HelveticaNeueLTProUltLt.woff2",
      weight: "200",
      style: "normal",
    },
    {
      path: "../assets/fonts/helvetica-neue-lt-pro/woff2/HelveticaNeueLTProLt.woff2",
      weight: "300",
      style: "normal",
    },
    {
      path: "../assets/fonts/helvetica-neue-lt-pro/woff2/HelveticaNeueLTProMd.woff2",
      weight: "500",
      style: "normal",
    },
    {
      path: "../assets/fonts/helvetica-neue-lt-pro/woff2/HelveticaNeueLTProBd.woff2",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-helvetica-neue-lt-pro",
});

export const metadata: Metadata = {
  title: "...",
  description: "...",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${helveticaNeueLtPro.variable}`}>{children}</body>
    </html>
  );
}
Answered by Short mackerel
Fixed in NextJS canary release... hopefully will be rolled out to stable releases soon enough. https://github.com/vercel/next.js/pull/85051
View full answer

3 Replies

Short mackerelOP
It might be that overrides like declarations: [{ prop: "descent-override", value: "10%" }], are being stripped out during the CSS minification process. If I add it manually to the minified CSS files after building, the property takes effect as intended. Does anyone know how to bypass CSS minification for a build, using NextJS App router v15.5.4?
Short mackerelOP
Hmm.. actually seems like it may be the bundler that's the issue:
https://github.com/vercel/next.js/issues/82822
Short mackerelOP
Fixed in NextJS canary release... hopefully will be rolled out to stable releases soon enough. https://github.com/vercel/next.js/pull/85051
Answer