How to use @next/font globally

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 @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);
}

Print Share Comment Cite Upload Translate
APA
Michael Esteban | Sciencx (2024-03-28T21:12:15+00:00) » How to use @next/font globally. Retrieved from https://www.scien.cx/2023/02/20/how-to-use-next-font-globally/.
MLA
" » How to use @next/font globally." Michael Esteban | Sciencx - Monday February 20, 2023, https://www.scien.cx/2023/02/20/how-to-use-next-font-globally/
HARVARD
Michael Esteban | Sciencx Monday February 20, 2023 » How to use @next/font globally., viewed 2024-03-28T21:12:15+00:00,<https://www.scien.cx/2023/02/20/how-to-use-next-font-globally/>
VANCOUVER
Michael Esteban | Sciencx - » How to use @next/font globally. [Internet]. [Accessed 2024-03-28T21:12:15+00:00]. Available from: https://www.scien.cx/2023/02/20/how-to-use-next-font-globally/
CHICAGO
" » How to use @next/font globally." Michael Esteban | Sciencx - Accessed 2024-03-28T21:12:15+00:00. https://www.scien.cx/2023/02/20/how-to-use-next-font-globally/
IEEE
" » How to use @next/font globally." Michael Esteban | Sciencx [Online]. Available: https://www.scien.cx/2023/02/20/how-to-use-next-font-globally/. [Accessed: 2024-03-28T21:12:15+00:00]
rf:citation
» How to use @next/font globally | Michael Esteban | Sciencx | https://www.scien.cx/2023/02/20/how-to-use-next-font-globally/ | 2024-03-28T21:12:15+00:00
https://github.com/addpipe/simple-recorderjs-demo