Logo

dev-resources.site

for different kinds of informations.

How to use @next/font globally

Published at
2/20/2023
Categories
nextjs
font
css
Author
mikeesto
Categories
3 categories in total
nextjs
open
font
open
css
open
Author
8 person written this
mikeesto
open
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 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} />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

And then use the CSS variable in your stylesheet.

global.css

body {
  font-family: var(--dm-font);
}
Enter fullscreen mode Exit fullscreen mode
font Article's
30 articles in total
Favicon
Variable, Real Fonts: A Glimpse into the Future, plan "B"
Favicon
How to add custom fonts and viewports in storybook?
Favicon
Dafont: A Designer’s Best Friend for Unique Fonts
Favicon
Best Design Resources
Favicon
OTF vs TTF: Best Font Format for Flutter App Development
Favicon
Cool Banner Font Size Tool
Favicon
Liquid Display Fonts in Motion Graphics: Creating Visually Stunning Animations
Favicon
The Ultimate Guide to Choosing and Using Fonts for Your Projects
Favicon
Interactive Type + Code with Google Fonts
Favicon
Roboto's weight in Figma is fake
Favicon
Installing a Nerd Font in Ubuntu
Favicon
How To Use Google Fonts in web app🚀
Favicon
Unlock Limitless Creativity: 7000+ Fonts Bundle – Instant Installation Awesomeness!
Favicon
Unlock Limitless Creativity: 7000+ Fonts Bundle – Instant Installation Awesomeness!
Favicon
فونت فارسی ایران سنس – IranSansX
Favicon
TCPDF: How to add new custom font in tcpdf
Favicon
Why I love Monaspace font for coding
Favicon
Font Loading API: A Fun and Powerful Tool for Making Your Web Pages Look Amazing
Favicon
Zalgo Font Generator: Elevate Your Content with Creepy Text
Favicon
The typeface you didn't know you wanted and were trained to hate
Favicon
Using condensed font with Flutter
Favicon
La typographie en CSS...
Favicon
Grogie – Modern Serif Font
Favicon
Dynamic font-size using only CSS3
Favicon
Using custom fonts in a Chakra UI - React app
Favicon
Configuring your fonts in Next.js 13 with Stitches
Favicon
Como criar fonte de ícones
Favicon
How to use @next/font globally
Favicon
Creating your own handwriting into a usable font.
Favicon
Convert variable font to static font using Python

Featured ones: