Fuentes web CSS

Tabla de contenido

La regla CSS @font-face

Las fuentes web permiten a los diseñadores web utilizar fuentes que no están instaladas en la computadora del usuario.

Cuando haya encontrado/comprado la fuente que desea usar, simplemente incluya la fuente archivo en su servidor web, y se descargará automáticamente para el usuario cuando sea necesario.

Sus fuentes "propias" se definen dentro de la regla CSS @font-face.

Diferentes formatos de fuente

Fuentes TrueType (TTF)

TrueType es un estándar de fuentes desarrollado a finales de la década de 1980 por Apple y Microsoft. TrueType es el formato de fuente más común tanto para Mac OS como para Microsoft. Sistemas operativos Windows.

Fuentes OpenType (OTF)

OpenType es un formato para fuentes informáticas escalables. Fue construido en TrueType, y es una marca registrada de Microsoft. Las fuentes OpenType se utilizan comúnmente hoy en día en las principales plataformas informáticas.

El formato de fuente abierto web (WOFF)

WOFF es un formato de fuente para uso en páginas web. Fue desarrollado en 2009 y está ahora una recomendación del W3C. WOFF es esencialmente OpenType o TrueType con compresión y metadatos adicionales. El objetivo es apoyar la distribución de fuentes. desde un servidor a un cliente a través de una red con limitaciones de ancho de banda.

El formato de fuente abierto web (WOFF 2.0)

Fuente TrueType/OpenType que proporciona una mejor compresión que WOFF 1.0.

Fuentes/formas SVG

Las fuentes SVG permiten utilizar SVG como glifos al mostrar texto. El SVG 1.1 La especificación define un módulo de fuente que permite la creación de fuentes dentro de un Documento SVG. También puedes aplicar CSS a documentos SVG y la regla @font-face se puede aplicar al texto en documentos SVG.

Fuentes OpenType integradas (EOT)

Las fuentes EOT son una forma compacta de fuentes OpenType diseñadas por Microsoft para su uso como fuentes incrustadas en páginas web.

Compatibilidad del navegador con formatos de fuente

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con formato de fuente.

Font format
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	14.0	36.0	39.0	10.0	26.0
SVG	Not supported	Not supported	Not supported	3.2	Not supported
EOT	6.0	Not supported	Not supported	Not supported	Not supported

*IE: El formato de fuente sólo funciona cuando está configurado como "instalable".

Usando la fuente que deseas

En la regla @font-face; Primero defina un nombre para la fuente (por ejemplo, myFirstFont) y luego señale el archivo de fuente.

Consejo: Utilice siempre letras minúsculas para la URL de fuente. Las letras mayúsculas pueden dar resultados inesperados en IE.

Para utilizar la fuente para un elemento HTML, consulte el nombre de la fuente (myFirstFont) a través de la propiedad font-family:

Ejemplo

@font-face
{
   
font-family: myFirstFont;
   
src: url(sansation_light.woff);
}

div
{
   
font-family: myFirstFont;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>

</body>
</html>

Usar texto en negrita

Debes agregar otra regla @font-face que contenga descriptores para texto en negrita:

Ejemplo

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
   
font-weight: bold;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

@font-face {
   font-family: myFirstFont;
   src: url(sansation_bold.woff);
   font-weight: bold;
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>

</body>
</html>

El archivo "sansation_bold.woff" es otro archivo de fuente que contiene los caracteres en negrita de la fuente Sansation.

Los navegadores usarán esto siempre que un fragmento de texto con la familia de fuentes "myFirstFont" deba mostrarse en negrita.

De esta manera puedes tener muchas reglas @font-face para la misma fuente.

Descriptores de fuentes CSS

La siguiente tabla enumera todos los descriptores de fuentes que se pueden definir dentro de la regla @font-face:

Descriptor:

font-family

Valores:

name

Descripción:

Requerido. Define un nombre para la fuente.

Descriptor:

src

Valores:

URL

Descripción:

Requerido. Define la URL del archivo de fuente.

Descriptor:

font-stretch

Valores:

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

Descripción:

Opcional. Define cómo se debe estirar la fuente. El valor predeterminado es "normal"

Descriptor:

font-style

Valores:

normal
italic
oblique

Descripción:

Opcional. Define cómo se debe diseñar la fuente. El valor predeterminado es "normal"

Descriptor:

font-weight

Valores:

normal
bold
100
200
300
400
500
600
700
800
900

Descripción:

Opcional. Define la negrita de la fuente. El valor predeterminado es "normal"

Descriptor:

unicode-range

Valores:

unicode-range

Descripción:

Opcional. Define el rango de caracteres UNICODE que admite la fuente. El valor predeterminado es "U+0-10FFFF"