A lo largo de la mayor parte de la historia de Internet, los desarrolladores web se enfrentaron al problema de no poder utilizar ciertas tipografías en sus diseños. Específicamente, las únicas fuentes que podían mostrarse en un navegador eran las que el usuario tenía instaladas en su computadora. Por eso, la mayoría de los sitios web utilizaban «tipografías seguras» como Tahoma, Times New Roman, Arial o Verdana, presentes en la mayoría de los equipos. Si se quería mostrar otras tipografías, se recurría a soluciones poco prácticas, como incluir el texto en archivos de imagen u objetos Flash. Naturalmente, este texto no era visible ante los buscadores y no se adaptaba tan bien al ancho de la pantalla.

La solución definitiva a este problema llegó de la mano de CSS3, el último estándar de hojas de estilo en cascada. La regla @font-face permite utilizar fuentes no instaladas en la computadora del usuario, sino en un servidor web. De esta manera, la posibilidad de mostrar o no la fuente requerida pasa a depender más del desarrollador que del usuario.

¿Cómo utilizar esta regla? El primer paso es asignarle a la fuente un identificador y especificar la ubicación del archivo de tipografía:

@font-face {
font-family:'Mi fuente’; src: url('../Fuentes/mifuente.ttf’);
}

Cuando queramos utilizarla, la invocamos a través de su identificador:

.sidebar p {
font-family: "Mi fuente";
}

Los archivos de tipografías pueden presentar formatos como TTF, OTF, WOFF, EOT y SVG. En general, los navegadores no soportan todos estos formatos. Además, el estándar CSS3 todavía no está plenamente adoptado. Por eso, es bueno utilizar segundas opciones de fuentes por si la primera no puede mostrarse:

.sidebar p {
font-family: "Mi fuente", Arial, Helvetica, sans-serif;
}

La fuente que elijamos puede modificarse a través de propiedades opcionales:

• font-stretch: define el nivel de estiramiento o compresión horizontal de cada carácter
• font-style: define cómo estilizar el texto.
• font-weight: establece el espesor de los caracteres.
• unicode-range: establece el rango de caracteres Unicode soportado por la fuente.

Gracias a @font-face, nuestros sitios web pueden verse increíblemente enriquecidos por la apertura a todo un nuevo universo de tipografías.