Cómo usar fuentes web externas en CSS
Si desea agregar una fuente en su sitio web que no esté presente en la computadora del usuario de forma predeterminada, entonces puede usar la regla CSS @Font-Face para hacerlo. La regla de @font-face especifica que primero, debe proporcionar un nombre determinado a la fuente personalizada y luego apuntar al archivo de fuentes. En este artículo, establecerá una comprensión de cómo usar fuentes web externas en CSS. Este tutorial cubre los siguientes temas.
- Formatos de fuente
- Cómo agregar fuentes web externas usando CSS
- Formatos de fuentes y su soporte de navegador.
Vamos a empezar.
Formatos de fuente
Antes de sumergirnos en los detalles de cómo agregar fuentes web externas, primero debemos establecer una comprensión básica de los diferentes formatos de fuentes que hemos explicado en detalle a continuación.
Fuentes trueType
TrueType Fonts o TTF es un formato de fuente estándar que fue fundado por Microsoft y Apple a fines de los 80, por lo tanto, es compatible con los sistemas operativos. Es muy adecuado para expandir el soporte para navegadores antiguos, especialmente en teléfonos inteligentes.
Fuentes de OpenType
OpenType Fonts o OTF es un formato de fuente inventado por Microsoft en los mismos patrones que el de TrueType Fonts. Este formato se usa ampliamente en la mayoría de los sistemas informáticos.
Formato de fuentes abiertos web
El formato de fuente Woff se originó en 2009 como un formato que cubre los formatos TTF y OTF. Este formato compacta los archivos y es compatible con todos los navegadores modernos. Tiene dos versiones, la segunda se conoce como Woff 2.0 y compacta los archivos de una mejor manera que la versión anterior.
Fuentes de zarentipo integrado
Las fuentes de OpenType integradas, más comúnmente denominadas EOT, es un formato que es una compresión de OTF desarrollada por Microsoft. Este formato se utiliza como fuentes integradas en sitios web.
Fuentes SVG
Un formato de fuentes SVG permite mostrar SVG en forma de gráficos vectoriales. Esto significa que varios personajes se mostrarán en diferentes colores o animaciones.
Ahora que hemos aprendido sobre los diversos formatos de fuentes, considere los pasos a continuación para comprender el procedimiento completo de agregar fuentes externas a su sitio web.
Cómo agregar fuentes web externas usando CSS
A continuación le proporcionamos una guía paso a paso sobre cómo puede agregar fuentes externas usando CSS.
Paso 1: Descargar fuentes personalizados
El primer paso sería descargar sus fuentes deseadas en el formato de fuentes TrueType (.TTF) o el formato de fuentes OpenType (.a menudo de cualquier repositorio de fuentes. Por ejemplo, aquí estamos descargando fuentes de 'script de baile' de Google Fonts.
Haga clic en la 'descarga de la familia' para descargar fuentes personalizadas.
Paso 2: Extraiga archivos de la carpeta zip
Una vez descargado, extraiga archivos de la carpeta zip.
Las fuentes están en el .formato TTF. Ahora seleccione cualquiera de estas fuentes que pertenezcan a la familia de fuentes de 'guión de baile'.
Nota: Asegúrese de que sus archivos descargados estén presentes en la misma carpeta que el archivo web.
El archivo de fuente está presente en la misma carpeta exacta que el archivo web.
Paso 3: Agregar fuentes en su archivo CSS
A sus fuentes externas en su archivo CSS, use la regla de @font-face. La regla de @font-face especifica que primero, debe proporcionar un nombre determinado a la fuente personalizada y luego apuntar al archivo de fuentes dando la URL al atributo SRC.
Hemos asignado el nombre 'CustomFonts' a la familia de fuentes, luego hemos proporcionado la URL del archivo de fuente al atributo SRC. Por último, estamos asignando a la familia de fuentes a nuestro encabezado y dándole algo de color.
Paso 4: Enlace su archivo CSS al archivo HTML
Y finalmente, agregue su hoja de estilo a su archivo HTML.
Estamos vinculando externamente nuestro archivo CSS con el archivo HTML.
Producción
Se ha agregado correctamente una fuente web personalizada externa.
Formatos de fuentes y su soporte de navegador
La siguiente tabla muestra todos los formatos de fuentes y el soporte relevante del navegador.
| Formato de fuente | Microsoft Edge | Google Chrome | Firefox | Safari | Ópera |
|---|---|---|---|---|---|
| TTF | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| OTF | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| Ruidón | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| Woff2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| Eot | 6.0 | No soportado | No soportado | No soportado | No soportado |
| SVG | No soportado | No soportado | No soportado | 3.2 | No soportado |
Conclusión
Para usar fuentes externas en CSS, descargue las fuentes deseadas de cualquier repositorio de fuentes y agrégalas al archivo CSS utilizando la regla @font-face que especifica un nombre cierto a la fuente personalizada y apunta al archivo de fuentes dando la URL al SRC atributo. Este tutorial está diseñado para explicar sobre el uso de diferentes formatos de fuentes y cómo se pueden usar fuentes web externas en CSS.