Cómo añadir fuentes en Next.js: Google Fonts, Fuentes Locales y Tailwind CSS
Ya has superado la mitad. Estás muy cerca de completar el curso.
Sobre esta lección
Aprende cómo integrar fuentes de Google y fuentes locales en tu sitio web Next.js con Tailwind CSS de manera sencilla y rápida. En este tutorial, vamos a explorar paso a paso cómo agregar fuentes personalizadas a tu proyecto Next.js utilizando Tailwind CSS. Desde la instalación de las fuentes hasta la implementación en tu sitio web, te enseñare todos los pasos necesarios para lograr tener las fuentes instaladas correctamente. ¡Únete a mi newsletter y lleva tus habilidades en programación al siguiente nivel! 🚀 Cada semana, más de 100 apasionados por la programación reciben contenido exclusivo para potenciar sus conocimientos, crecer como profesionales y estar al día con las últimas tendencias de la industria. 📩 ¿Qué encontrarás? ✅ Noticias y consejos clave para programadores. ✅ Recursos gratuitos que te ahorrarán tiempo y esfuerzo. ✅ Contenido práctico para mejorar tus habilidades. 🎁 Además, al unirte recibirás gratis un eBook para aprender uno de los lenguajes más demandados del mercado. No te lo pierdas: Suscríbete ahora https://bit.ly/news-jsdev y sé parte de esta comunidad en constante crecimiento. ¡Te espero! 🔥 Suscríbete al canal: https://bit.ly/johnserranodev 🚀 Sitio web: https://johnserrano.co/ Sígueme en mis redes sociales: Instagram: https://www.instagram.com/johnserranodev Facebook: https://www.facebook.com/johnserranodev X: https://twitter.com/johnserranodev Linkedin: https://www.linkedin.com/in/johnserranodev GitHub: https://github.com/johnsi15 Jesús le dijo: Yo soy el camino, y la verdad, y la vida; nadie viene al Padre, sino por mí. Juan 14:6 00:00 — Introducción: Qué aprenderás en este video 00:37 — Errores comunes al usar fuentes en Next.js (¡evítalos!) 04:10 — Por qué `next/font` es mejor: rendimiento y DX 05:55 — Google Fonts en Next.js: implementación paso a paso 08:42 — Uso de fuentes variables con `next/font` 12:22 — Fuentes locales en Next.js: configuración completa 16:34 — Cómo aplicar fuentes con Tailwind CSS fácilmente 20:55 — Conclusiones nextjs, next js, Tailwind CSS, next js tutorial, diseño web, make login authentication with google and github, google fonts, google provider, react js, google and github login, javascript, html, CSS, diseño responsivo, desarrollo web, frameworks de JavaScript, Fuentes Locales, diseño de páginas, programación, desarrollo frontend #informatica #programadores #programador #sistemas #software #programacion #nextjs #react #googlefonts
Sobre este curso
Aprende Next.js 15 paso a paso con este curso completo en español. Desde la instalación inicial hasta la conexión con bases de datos y despliegue en Vercel, este curso está diseñado para ayudarte a dominar el desarrollo web moderno con Next.js. Ideal para principiantes que buscan crear aplicaciones full stack eficientes y escalables. Nuevas lecciones cada semana.
Lo que aprenderás en este curso:
- Dominar la sintaxis moderna de JavaScript (ES6+)
- Manipular el DOM y gestionar eventos del navegador
- Trabajar con funciones asíncronas, promesas y APIs
- Implementar estructuras de datos y algoritmos en JavaScript