Conteúdo do Curso
Next.js 14
Next.js 14
Custom Google Fonts
Let's shift our attention towards the fonts to be used in the app.
The application's fonts are automatically optimized when we use the next/font
module with Next.js. The font files are downloaded at build time and hosted with your other static assets. As a result, when a user visits your application, there are no additional network requests for fonts, which helps improve performance.
Back to the Project
Let's add the custom Poppins Google font for our app.
- Create a new file called
fonts.ts
inside theapp/ui
folder; - Import the
Poppins
font from thenext/font/google
module; - We should also specify the font's
weight
andsubsets
.
We are ready to use the Poppins
font in the app. Let's apply it to the body
element in the app/layout.tsx
.
As a result, the entire app uses the Poppins
font.
In the next chapter, let's include additional fonts.
In Practice
Obrigado pelo seu feedback!