¿Alguna vez has querido añadir alguna fuente «no estándar» a tu web?

Por suerte desde hace bastantes años es algo muy sencillo de hacer utilizando @font-face en CSS, pero el problema es que dejamos que el navegador sea quien decida como y cuando cargarla, esto lleva a ciertos problemas de los que hablaré más adelante.

Actualmente para utilizar una fuente tenemos que usar en nuestro CSS las siguientes líneas:
/* Definimos nuestra nueva fuente */
@font-face {
font-family: 'MiNuevaFuente';
src: url('mifuente-Normal.woff2') format("woff2"),
url('mifuente-Normal.woff') format("woff");
}
@font-face {
font-family: 'MiNuevaFuente-Italica';
src: url('mifuente-Italica.woff2') format("woff2"),
url(mifuente-Italica.woff) format("woff");
font-style: italic;
}
@font-face {
font-family: 'MiNuevaFuente-Negrita';
src: url('mifuente-Negrita.ttf') format("woff2"),
url(mifuente-Italica.woff) format("woff");
font-weight: bold;
}
/* Utilizamos la fuente en algún elemento de la pagina, si no la podemos cargar, usaríamos sans-serif */
body {
font-family: 'MiNuevaFuente', sans-serif;
}

Ojo: Existen más formatos, ¿Por qué no los añado?

Actualmente el soporte de Woff y Woff2 (que tiene un tamaño un 30% menor) es tan amplio que no es necesario añadir más formatos. Los siguientes navegadores serían los que no podrían usar tu bonita tipografía en este caso:

• IE 8 y anteriores
• Firefox 3.5
• Chrome 4
• Safari 3 through 5
• Opera 10.1
• Mobile Safari (iOS) 3.2 through 4.3
• Android 2.2 through 4.3

¿Qué problemas implica el comportamiento normal de font-face?

El mayor problema, el llamado FOIT (Flash Of Invisible Text), es debido a que la mayoría de los navegadores no muestran texto alguno mientras se está descargando el archivo de fuente, y en el caso de algunos basados en Webkit pueden esperar y seguir esperando aunque hayan pasado minutos. El comportamiento habitual en la actualidad es el de esperar 3 segundos sin mostrar nada antes de decidir
que la fuente no carga y mostrar la fuente por defecto.

Lo ideal en el caso de las fuentes, especialmente ahora con tantos dispositivos móviles, es que ocurriese el llamado FOUT (Flash Of Unstyled Text) que implicaría que se mostrase el texto cuanto antes fuese posible pero usando una fuente del sistema, y cuando nuestra fuente este cargada sustituya a la fuente usada por defecto. Esto nos permite que nuestros usuarios puedan navegar lo más rápido posible por nuestra web, lo cual nos ayudará a retener usuarios al evitar que se vayan aburridos de ver una bonita web sin texto.

En este tutorial os vamos a enseñar a hacer que el FOUT dure lo mínimo posible y pase a ser FOFT(Flash of Faux Text), donde se mostrarán los textos con la fuente que queremos pero los caracteres especiales, la negrita y la cursiva no se mostraran correctamente hasta que dichos archivos no carguen.

También es importante que el CSS que cargue la fuente no bloquee el renderizado de la página. Esto que puede parecer trivial, suele hacerse mal en la mayoría de las webs ralentizando la velocidad de carga global.

Paso 1: Asegurarnos que tenemos los archivos de la fuente

Esto puede parecer un poco tonto, pero si vamos a introducir una fuente poco conocida y tenemos el archivo otf de una fuente, antes tenemos que procesarlo. Aunque tengamos el archivo .woff debéis procesarlo para obtener los mejores resultados.

Os aconsejo el convertidor de Font Squirrell ya que es muy sencillo de usar y tiene muchísimas opciones para optimizar tus archivos de fuentes.

Es importante que paseis la fuente dos veces por este convertidor, una vez normal y otra vez usando el modo experto y seleccionando la opción de Font Subsetting que nos permite seleccionar los caracteres más importantes que vamos a utilizar. Con esto vamos a crear un archivo muy pequeño con lo más básico que cargará antes de cargar el archivo de fuente completo, de esta forma nuestros visitantes no tendrán que esperar y no notaran cambios muy relevantes en la tipografía.

Para esta versión light os aconsejo señalar las siguientes opciones en Font Subsetting: Lowercase, Uppercase.

Paso 2: Cargar las fuentes de forma que el navegador muestre el texto

Como os he contado anteriormente, los navegadores no muestran el texto que utilice una fuente mientras está cargando. Por ello tenemos que engañarlos para que crean que no la vamos a utilizarla en nuestro texto pero aún así carguen la fuente, para ello definimos por defecto una fuente del sistema, y creamos una clase CSS con nuestra fuente.

@font-face {
font-family: 'MiNuevaFuente-Subset';
src: url('mifuente-subset.woff2') format("woff2"),
url(mifuente-subset.woff) format("woff");
}
body {
/* Elegimos nuestra fuente del sistema */
font-family: Georgia, serif;
}
.fonts-loaded-CSS-Class {
/* Y añadimos nuestra fuente cuando haya cargado */
font-family: 'MiNuevaFuente', Georgia, serif;
}

Si pruebas a cargar esto, verás que se carga siempre la fuente sin estilo, no te asustes aún nos queda decirle al navegador cuando tiene que aplicar nuestra bonita tipografía a toda la página.

Paso 3: ¿Navegador has descargado ya el archivo de la fuente?

Para ello tenemos que añadir 2 archivos JavaScript (Aunque lo ideal sería que lo pusieseis inline después del CSS, uno de ellos es la libreria FontFaceObserver y el otro es uno que creemos nosotros, personalizando el siguiente código con los nombres de nuestra fuente y con las classes CSS donde queremos que se aplique nuestra fuente


;(function( doc ) {
// IE9+
if( !( 'geolocation' in navigator ) ||
sessionStorage.fontStageOne && sessionStorage.fontStageTwo ) {
return;
}
var docEl = doc.documentElement;
var observer = new FontFaceObserver( "MiNuevaFuente-Subset", {
weight: 400
});
observer.check().then(function () {
docEl.className += "fonts-loaded-CSS-Class";
sessionStorage.fontStageOne = true;
Promise.all([
(new FontFaceObserver( "MiNuevaFuente", {
weight: 400
})).check(),
(new FontFaceObserver( "MiNuevaFuente-Negrita", {
weight: 700
})).check(),
(new FontFaceObserver( "MiNuevaFuente-Italica", {
style: "italic"
})).check(),
]).then(function () {
docEl.className += "fonts-loaded-CSS-Class";
sessionStorage.fontStageTwo = true;
});
});
})( document );