Lección: 09 Comó añadir FUENTES TIPOGRAFICAS en nuestra PLATAFORMA DE PELICULAS con(LARAVEL y MYSQL)FULLSTACK

09 Comó añadir FUENTES TIPOGRAFICAS en nuestra PLATAFORMA DE PELICULAS con(LARAVEL y MYSQL)FULLSTACK

Duración: 9 min

Módulo: 🏗️ Módulo de Fundamentos y Diseño Base Lección 9 de 18

Descripción

✍️ Lección 09: Integración de Fuentes Tipográficas Personalizadas

Esta lección es crucial para el diseño (frontend), ya que enseña a utilizar fuentes tipográficas externas (no las predeterminadas del navegador) para darle al título y a la plataforma un estilo único y profesional. El instructor explica cómo instalar, referenciar y aplicar fuentes descargadas al proyecto.

1. 📂 Gestión de Archivos de Fuente [01:29]

Se establece el proceso para descargar e incorporar las fuentes al proyecto Laravel:

Búsqueda de Fuentes: Se utiliza un repositorio en línea (ej. DaFont) para descargar fuentes con licencia gratuita [01:31].
Creación de Directorio: Se crea una nueva carpeta llamada fonts dentro del directorio public/ para organizar todas las fuentes tipográficas del proyecto [02:23].
Formato de Archivo: Se manejan los archivos de fuente con extensión .ttf (TrueType Font) [02:46].

2. 📝 Referencia e Inclusión de CSS (@font-face) [02:48]

Para que el navegador reconozca y pueda usar las fuentes, es necesario definirlas usando CSS:

Regla @font-face: Se introduce la regla @font-face dentro del bloque de estilos (<style>) para declarar la fuente [02:57].
Definición de la Familia: Se utiliza la propiedad font-family para darle un nombre descriptivo a la fuente (ej. "título 1"), que luego se usará para aplicar el estilo [03:08].
Ubicación del Recurso: Se usa la propiedad src: url(...) para indicar dónde se encuentra el archivo, referenciando la ruta dentro de public/fonts [04:20].

3. 🎨 Aplicación de la Fuente y Estilos CSS [03:22]

Finalmente, se aplica la fuente personalizada a los elementos HTML de la plataforma, en este caso, al título:

Definición de Clase: Se crea una clase CSS (ej. .titulo-1) para encapsular los estilos [03:22].
Aplicación de font-family: Dentro de la clase, se llama a la fuente usando la propiedad font-family con el nombre definido en @font-face [04:52].
Estilos Adicionales: Se añaden mejoras visuales para el título, como:
- Color Blanco (color: white;) [03:47].
- Tamaño Aumentado (font-size: 100px;) [05:16].
- Sombra de Texto (text-shadow) para hacerlo más legible sobre el fondo oscuro [07:16].
Resultado: Se muestra cómo el título del proyecto ahora utiliza la tipografía personalizada, lo que antes solo era posible con software de diseño gráfico [05:00].

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Hilari Web