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