Parte III - Optimizando carga de fuentes con JavaScript
Al seleccionar una fuente, Google sugiere cargarla de varias formas. La primera es colocando una línea de código por cada fuente, ésta linea puede incluir una o más variaciones que se agregan a la URL que nos proporcionan.
Para el siguiente ejemplo estamos importando Open Sans en Normal 400 y Normal 400 Italic, se debe hacer dentro de la etiqueta head.
<!-- Todo: arreglar -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>El problema de esta técnica es que el dispositivo desde el que se está viendo el sitio web tiene que solicitar y descargar la fuente antes de poder mostrar la página, esto introduce retraso ya que muchas personas esperan que los sitios web en esta época carguen en segundos.
Google también incluye una forma de cargarlo usando CSS que tampoco es recomendada, la forma ideal es la tercera, usando JavaScript para la carga asíncrona.
Para optimizar y acelerar la carga de fuentes necesitamos enviar una solicitud asíncrona que solicita las fuentes y continúa cargando el resto del sitio web, una vez que son recibidas reemplaza las fuentes originales (momentáneas) por las nuevas.
Esto introduce un pequeño flash y cambia de forma momentánea el estilo del sitio, lo cual puede no ser visualmente atractivo y en ocasiones desconcertante pero su mayor ventaja es que el sitio carga mucho más rápido y el contenido está listo para leerse casi al instante.
Este sitio web (jmz7v.com) carga las fuentes Merriweather y Hind usando el siguiente código:
<!-- Google Fonts [ASYNC] -->
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Hind:300,400,500', 'Merriweather:300,400,300italic'] } };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>Podemos poner atención a la línea que nos interesa, la que incluye las fuentes.
Incluye el nombre de la fuente, dos puntos y el peso deseado, separados por comas para múltiples pesos. Si no estás seguro de cómo cargarlo puedes copiar y pegar la parte de código que te da Google dentro de la pestaña inicial.
Retomando el ejemplo original, Open Sans en Normal 400 y Normal 400 Italic.
google: { families: ['Open+Sans:400italic,400'] } };Observamos que families es un arreglo, separando con comas podemos agregar todas las fuentes que necesitos pero recuerda que mientras más agreguemos más tardará nuestro sitio web en cargar y eso es lo contrario de lo que queremos lograr con esta técnica.
Si tienes alguna duda puedes mandarme un tweet a @jmz7v o preguntarme por email, trataré de responderte o en su defecto publicaré un post con la solución al problema para que otras personas lo puedan aprovechar también.
Este artículo es parte de la serie de optimización de páginas web:
Publicado por Julio Montaño el 10/Ago/2015.