Next.js 13: Better Fonts Management - with Google Fonts & Local
Ғылым және технология
Learn how to work with fonts in Next.js 13!
This Next.js tutorial will cover:
- How to add Google fonts to the Next.js project
- How to use local fonts in the Next.js project
- What are the different methods of attaching the font (Style Prop, ClassName prop, and CSS Variables)
- The benefits that Next.js 13 offers for working with fonts
If you are using Next.js 13.2 or newer, you don't need to install the package manually!
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript:
• Next.js Full Website T...
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder:
• Nuxt 3 Crash Course - ...
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
Chapters:
📍00:00 Intro - Fonts
📍00:41 Using Next.js 13 with Google Fonts & next/font
📍02:32 Using a local font on our Next.js 13 project
📍05:41 Injecting our global font in the head of HTML document & CSS Variable
📍08:15 Outro
#nextjs13 #fonts
Пікірлер: 24
if not specify a subset it will use all of them? or there's a default? and same question for the weights
@Prismic
Жыл бұрын
Hi! If you don't specify subsets, you'll receive an error. Speaking of weights, you'll receive the same type of error indicating that the weight is missing, but it's not required if you use a variable font. The default value is usually a regular weight. Here's a good starting point to explore that topic: nextjs.org/docs/messages/google-fonts-missing-subsets
your explanation is even better than the official video by nextJS. Thank you
@Prismic
Жыл бұрын
Glad it was helpful!
Oh man this makes fonts so much easier. Great feature and so well explained!
@whatyoumissed9994
Жыл бұрын
how, i think importing it and attaching it to css is more easier, one line of code, this is too much
@TrostCodes
Жыл бұрын
@@whatyoumissed9994 But you won't get all the benefits that Next.js's font package brings by just grabbing the code snippet from Google fonts.
Great explanation 🙂
Amazing 🔥🔥
Very neat 💯 Keep it up, dude 🤞🏻
I have been trying to do this for 6 hours. Thank you...
Thank you!
What If i want a global font, but the use of a second font specifically in select components throughout my app (such as a subheading h3 etc). Do I import the second font in each component I need to use it in? I can't import it in the app/layout since I am not using it there at all.
@Prismic
11 ай бұрын
Yes, that's the idea! Have a look at 02:32, that's what this part is about :) - Lucie
You are a lifesaver man
Thank you sir
it was helpful thanks
@Prismic
9 ай бұрын
Glad it helped
thx, bro
I"m a little confused... this seems so ineffective and repetitive... if I have a few local fonts, I don't want to include in a bunch of components.... I want to just attach the global css and have it represented in the body tag....
how can i add multiple local fonts?
@Prismic
11 ай бұрын
I think you can just add as many declaration as needed with `localFont` from `next/font/local`. You cannot declare fallback fonts because Next.js automatically generates one for you to optimize Content Layout Shift: vercel.com/blog/nextjs-next-font - Lucie
thx
❤