Página 63 de 96
Clase: Cómo instalar y utilizar fuentes locales de Google Fonts con CSS @font-face
Aprende a integrar tipografías personalizadas en tus proyectos web utilizando @font-face. Esta guía explica cómo descargar e implementar Google Fonts localmente.
En esta lección se detalla el proceso técnico para implementar fuentes externas dentro de una hoja de estilos CSS. Se aborda desde la selección y descarga de archivos, la distinción entre fuentes estáticas y variables, hasta la configuración correcta de la regla @font-face para garantizar que los navegadores rendericen correctamente la tipografía elegida.
Puntos Clave de la Lección
- Selección y descarga de fuentes: Se explica cómo buscar y seleccionar fuentes en Google Fonts, verificando su licencia y descargando los archivos necesarios para su uso local en el proyecto [00:19].
- Fuentes estáticas vs. variables: Se establece la diferencia técnica: las estáticas requieren una regla por cada peso (ej. light, bold), mientras que las variables usan un solo archivo para múltiples pesos, optimizando el rendimiento [02:47].
- Estructura de carpetas: Se detalla la organización de archivos dentro del entorno de desarrollo, específicamente creando un directorio llamado "fonts" para alojar los recursos tipográficos [05:07].
- Declaración de la regla @font-face: Se muestra cómo definir la familia tipográfica (font-family) y establecer la fuente local mediante la propiedad src, priorizando la carga desde el ordenador del usuario [06:05].
- Compatibilidad entre navegadores: Se enseña a convertir fuentes a formatos WOFF y WOFF2 para asegurar una visualización correcta y multiplataforma, extendiendo la sintaxis de la regla de estilo [14:13].
Productos útiles para este curso
A continuación se presentan herramientas y recursos recomendados para gestionar y optimizar tus proyectos de diseño web y desarrollo frontend. Resumen Final
El uso de la regla @font-face permite dotar a los sitios web de una identidad visual única mediante el uso de fuentes personalizadas. Al descargar los archivos localmente y configurar la propiedad src con múltiples formatos (TTF, WOFF, WOFF2), se asegura una alta compatibilidad y rapidez de carga. La elección entre fuentes variables y estáticas es fundamental para mantener un código limpio y eficiente, permitiendo una gestión mucho más flexible de los pesos tipográficos a través de CSS.
Créditos del Autor
Esta lección ha sido adaptada del contenido original creado por el canal, especializado en programación web y desarrollo con CSS. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.
63. CURSO de CSS - 63 Como agregar FUENTES TTF de GOOGLE FONTS con @font-face (local)
