Michael Esteban

Posted on Feb 20, 2023 • Originally published at mikeesto.com

How to use @next/font globally

#nextjs #font #css

The @next/font package can download Google Fonts at build time and self-host them as a static asset. This is useful because no requests are made to Google by the client to request fonts used on the page.

However, it wasn't obvious to me how to apply the font globally. This can be achieved as follows.

app.js

import "@/styles/globals.css";

import { DM_Sans } from "@next/font/google";

const dm_sans = DM_Sans({
  display: "swap",
  subsets: ["latin"],
  weight: ["400", "500", "700"],
});

export default function App({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        :root {
          --dm-font: ${dm_sans.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  );
}

And then use the CSS variable in your stylesheet.

global.css

body {
  font-family: var(--dm-font);
}

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Top comments (2)

Nicolas Dellazzeri • May 8 '23

Hello! Did you find any way to use this with the app folder?

Dave • Oct 18 '23 • Edited

/src/app/layout.tsx

import { Open_Sans, Playfair_Display } from '@next/font/google';

import './globals.scss';

const openSans = Open_Sans({
  display: 'swap',
  subsets: [ 'latin' ],
  weight: [ '400', '500', '700' ],
  variable: '--font-open-sans',
});

const playfairDisplay = Playfair_Display({
  display: 'swap',
  subsets: [ 'latin' ],
  weight: [ '500' ],
  variable: '--font-playfair-display',
});

const RootLayout: FC<PropsWithChildren> = ({ children }) => (
  <html lang="en" className={`${openSans.variable} ${playfairDisplay.variable}`}>
    <body>
      {children}
    </body>
  </html>
);

export default RootLayout;

/src/app/global.scss

.foo {
  font-family: var(--font-open-sans);
}

DEV Community

How to use @next/font globally

app.js

global.css

Speedy emails, satisfied customers

Top comments (2)

The Next Generation Developer Platform

Read next

Top Free Hosting Services for Web Developers in 2025

Interactive Quiz App

How to Build a Custom MedusaJS Admin Dashboard with NextJS, Supabase, and Tailwind CSS

GMX.css v0.0.16: Select your favorite theme!

Okay