Agregar Fuentes Personalizadas de Google
Centrémonos ahora en las fuentes que se utilizarán en la aplicación.
Las fuentes de la aplicación se optimizan automáticamente cuando utilizamos el módulo next/font con Next.js. Los archivos de fuentes se descargan en tiempo de compilación y se alojan junto con tus otros recursos estáticos. Como resultado, cuando un usuario visita tu aplicación, no hay solicitudes de red adicionales para las fuentes, lo que ayuda a mejorar el rendimiento.
Volver al proyecto
Agreguemos la fuente personalizada Poppins de Google para nuestra aplicación.
- Crea un nuevo archivo llamado
fonts.tsdentro de la carpetaapp/ui; - Importa la fuente
Poppinsdesde el módulonext/font/google; - También debemos especificar el
weighty lossubsetsde la fuente.
Estamos listos para utilizar la fuente Poppins en la aplicación. Se debe aplicar al elemento body en el archivo app/layout.tsx.
Como resultado, toda la aplicación utiliza la fuente Poppins.
En el siguiente capítulo, se incluirán fuentes adicionales.
En la práctica
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can I use multiple font weights or styles with the Poppins font?
How do I add another custom Google font to my project?
What should I do if the font doesn't appear correctly in my app?
Awesome!
Completion rate improved to 2.08Agregar Fuentes Personalizadas de Google
Desliza para mostrar el menú
Centrémonos ahora en las fuentes que se utilizarán en la aplicación.
Las fuentes de la aplicación se optimizan automáticamente cuando utilizamos el módulo next/font con Next.js. Los archivos de fuentes se descargan en tiempo de compilación y se alojan junto con tus otros recursos estáticos. Como resultado, cuando un usuario visita tu aplicación, no hay solicitudes de red adicionales para las fuentes, lo que ayuda a mejorar el rendimiento.
Volver al proyecto
Agreguemos la fuente personalizada Poppins de Google para nuestra aplicación.
- Crea un nuevo archivo llamado
fonts.tsdentro de la carpetaapp/ui; - Importa la fuente
Poppinsdesde el módulonext/font/google; - También debemos especificar el
weighty lossubsetsde la fuente.
Estamos listos para utilizar la fuente Poppins en la aplicación. Se debe aplicar al elemento body en el archivo app/layout.tsx.
Como resultado, toda la aplicación utiliza la fuente Poppins.
En el siguiente capítulo, se incluirán fuentes adicionales.
En la práctica
¡Gracias por tus comentarios!
