Las fuentes web permiten a los diseñadores web usar fuentes que no están instaladas en la computadora del usuario.
Cuando haya encontrado/comprado la fuente que desea usar, simplemente incluya el archivo de fuente en su servidor web, y se descargará automáticamente al usuario cuando sea necesario.
Sus fuentes "propias" se definen dentro de la regla CSS @font-face.
TrueType es un estándar de fuente desarrollado a fines de la década de 1980 por Apple y Microsoft. TrueType es el formato de fuente más común para los sistemas operativos Mac OS y Microsoft Windows.
OpenType es un formato para fuentes de computadora escalables. Fue construido en TrueType y es una marca registrada de Microsoft. Las fuentes OpenType se usan comúnmente hoy en las principales plataformas informáticas.
WOFF es un formato de fuente para usar en páginas web. Fue desarrollado en 2009 y ahora es una recomendación del W3C. WOFF es esencialmente OpenType o TrueType con compresión y metadatos adicionales. El objetivo es admitir la distribución de fuentes de un servidor a un cliente a través de una red con restricciones de ancho de banda.
Fuente TrueType/OpenType que proporciona una mejor compresión que WOFF 1.0.
Las fuentes SVG permiten que SVG se use como glifos al mostrar texto. La especificación SVG 1.1 define un módulo de fuente que permite la creación de fuentes dentro de un documento SVG. También puede aplicar CSS a documentos SVG, y la regla @font-face se puede aplicar al texto en documentos SVG.
Las fuentes EOT son una forma compacta de fuentes OpenType diseñadas por Microsoft para su uso como fuentes incrustadas en páginas web.
Los números en la tabla especifican la primera versión del navegador que es totalmente compatible con el formato de fuente.
| Formato de fuente | |
|
|
|
|
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | No soportado | 36.0 | 35.0* | No soportado | 26.0 |
| SVG | No soportado | 4.0 | No soportado | 3.2 | 9.0 |
| EOT | 6.0 | No soportado | No soportado | No soportado | No soportado |
*IE: El formato de fuente solo funciona cuando se configura como "instalable".
*Firefox: No es compatible de forma predeterminada, pero se puede habilitar (es necesario establecer un indicador en "verdadero" para usar WOFF2).
En la regla @font-face; Primero defina un nombre para la fuente (por ejemplo, myFirstFont) y luego apunte al archivo de fuente.
Consejo: utilice siempre letras minúsculas para la URL de la fuente. Las letras mayúsculas pueden dar resultados inesperados en IE.
Para usar la fuente para un elemento HTML, consulte el nombre de la fuente (myFirstFont) a través de la propiedad font-family:
Debe agregar otra regla @font-face que contenga descriptores para texto en negrita:
El archivo "sansation_bold.woff" es otro archivo de fuente que contiene los caracteres en negrita para la fuente Sansation.
Los navegadores usarán esto siempre que un texto con la familia de fuentes "myFirstFont" se muestre en negrita.
De esta manera, puede tener muchas reglas @font-face para la misma fuente.
La siguiente tabla enumera todos los descriptores de fuente que se pueden definir dentro de la regla @font-face:
| Descriptor | Valores | Descripción |
|---|---|---|
| font-family | name | Necesario. Define un nombre para la fuente. |
| src | URL | Necesario. Define la URL del archivo de fuente. |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Opcional. Define cómo se debe estirar la fuente. El valor predeterminado es "normal". |
| font-style | normal italic oblique |
Opcional. Define cómo se debe diseñar la fuente. El valor predeterminado es "normal". |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Opcional. Define la negrita de la fuente. El valor predeterminado es "normal". |
| unicode-range | unicode-range | Opcional. Define el rango de caracteres UNICODE que admite la fuente. El valor predeterminado es "U+0-10FFFF". |