Landings Page Fonts

Summary

En este video, Criso Develop explica cómo gestionar fuentes en un proyecto web utilizando CSS y Sass. Se detalla cómo cambiar las tipografías en una página web, accediendo a Google Fonts para elegir una fuente, descargarla, y luego integrarla en el proyecto. Se revisan conceptos como font-family, URL de la fuente, tamaño, y estilo. Además, se muestra cómo organizar archivos y optimizar el uso de fuentes locales y del navegador. El video concluye con un adelanto de cómo cambiar colores y personalizar otros elementos visuales en futuros tutoriales.

Takeaways

• 😀 El video trata sobre cómo trabajar con CSS, fonts y otros recursos en proyectos web.
• 💻 Se explica que los proyectos se organizan en carpetas como CSS, fonts y otros recursos.
• 🔤 Se menciona que las fuentes se identifican mediante la propiedad 'font-family', el enlace URL, el tamaño y el estilo (como bold o light).
• 🌐 Se sugiere buscar fuentes en Google Fonts para usarlas en proyectos web.
• 📁 El autor demuestra cómo descargar y agregar una fuente llamada 'Rubik' al proyecto.
• 🔧 Se explica cómo eliminar fuentes no deseadas y agregar nuevas fuentes correctamente.
• 🎨 El video destaca la importancia de tener todas las variantes de una fuente, como TTF o WOFF.
• 📄 Se muestra cómo organizar y guardar las fuentes en carpetas específicas dentro del proyecto.
• ✂️ Se enseña a simplificar el código CSS eliminando líneas innecesarias cuando se usa una sola fuente.
• 🎥 El próximo video tratará sobre cómo cambiar los colores de la página y los botones en el proyecto.

Q & A

¿Cuál es el primer paso que se menciona para trabajar con las fuentes en un proyecto web?

El primer paso es identificar las fuentes utilizando la propiedad 'font-family' en el archivo CSS del proyecto, donde se define la fuente que se va a usar.

¿Qué se utiliza para definir variables y simplificar el CSS?

Se utiliza Sass, un preprocesador de CSS que permite definir variables y otras funciones avanzadas para gestionar estilos de manera más eficiente.

¿Qué pasos se siguen para agregar una nueva fuente a un proyecto web?

Primero se descarga la fuente desde Google Fonts o algún otro proveedor, luego se descomprime el archivo, se copia en una carpeta de fuentes dentro del proyecto y finalmente se referencia en el archivo CSS utilizando 'font-family'.

¿Qué significa la propiedad 'font-weight' y qué valores puede tener?

La propiedad 'font-weight' define el grosor de una fuente. Algunos de sus valores son: 'bold' para negrita, 'light' para una fuente más delgada, y 'normal' para el grosor estándar.

¿Qué es lo que hace el 'hackeo' mencionado en el video?

El 'hackeo' es una línea de código que indica al navegador que si no puede encontrar la fuente localmente, utilice la fuente predeterminada del navegador para garantizar que el texto se muestre correctamente.

¿Qué diferencia se menciona entre utilizar solo TTF o múltiples formatos de fuentes?

Si solo se utiliza el formato TTF, solo se referenciará esa fuente. Sin embargo, es recomendable incluir otros formatos como WOFF para garantizar la compatibilidad con diferentes navegadores y dispositivos.

¿Cómo se puede cambiar la fuente de una página web?

Para cambiar la fuente, se debe editar la propiedad 'font-family' en el archivo CSS y definir la nueva fuente que se ha descargado e integrado en el proyecto.

¿Qué es el archivo 'main.css' y cuál es su propósito?

El 'main.css' es el archivo principal de estilos en cascada (CSS) de una página web. Define los colores, imágenes, tipografías y otros estilos visuales de la página.

¿Qué significa la propiedad 'font-style' y qué valores puede tener?

La propiedad 'font-style' se utiliza para definir el estilo de la fuente, como 'normal' para una fuente estándar o 'italic' para un texto en cursiva.

¿Qué se debe hacer si el proyecto incluye una fuente que ya no se quiere utilizar?

Se debe eliminar la referencia de esa fuente en el archivo CSS y reemplazarla con la nueva fuente que se desee utilizar.