# Next.js [#nextjs] Fontsource packages give you explicit, versioned control over the font files, weights, styles, subsets, and variable axes included in your Next.js build. The browser serves those assets from the same deployment as your application. ## 1. Install the font [#1-install-the-font] ```sh npm install @fontsource-variable/open-sans yarn add @fontsource-variable/open-sans pnpm add @fontsource-variable/open-sans bun add @fontsource-variable/open-sans ``` ## 2. Import it from the root [#2-import-it-from-the-root] ### App Router [#app-router] Import the font CSS from your root layout: ```tsx // app/layout.tsx import "@fontsource-variable/open-sans/wght.css"; import "./globals.css"; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` You can instead import a font from a nested `layout.tsx` when only one route segment needs it. ### Pages Router [#pages-router] Import the font from your custom App component: ```tsx // pages/_app.tsx import type { AppProps } from "next/app"; import "@fontsource-variable/open-sans/wght.css"; import "../styles/globals.css"; export default function App({ Component, pageProps }: AppProps) { return ; } ``` ## 3. Apply the font [#3-apply-the-font] ```css /* app/globals.css or styles/globals.css */ body { font-family: "Open Sans Variable", sans-serif; } h1 { font-weight: 700; } ``` ## Fontsource or `next/font`? [#fontsource-or-nextfont] Both approaches self-host font files and avoid browser requests to Google. `next/font` downloads supported Google Fonts at build time and generates the loading CSS for you. Use Fontsource when you want fonts to be normal package dependencies, need fonts outside the Google Fonts catalog, or want direct control over package versions, CSS, subsets, axes, and font files. See the [Next.js font documentation](https://nextjs.org/docs/app/getting-started/fonts) for the built-in alternative.