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 …


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Michael Esteban

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


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Michael Esteban


Print Share Comment Cite Upload Translate Updates
APA

Michael Esteban | Sciencx (2023-02-20T04:13:09+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 ,<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 ]. 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 . 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: ]
rf:citation
» How to use @next/font globally | Michael Esteban | Sciencx | https://www.scien.cx/2023/02/20/how-to-use-next-font-globally/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts