Optimizar fuentes web en la carga de una Web. ¿Sé debe usar Web Fonts?

Juan Cascón Baños

hace 9 años

Categorías: Internet

Etiquetas: diseño, programación, SEO, web, WPO

La adopción de fuentes Web continúa acelerándose en Internet. El 37% de los mejores 300K sitios están utilizando fuentes web o (web fonts) desde 2014. Un ejemplo de uso de Webfonts son The Guardian o la BBC, lo que se traduce en un 2x + aumento en los últimos doce meses. Pero hay otros sitios muy importantes que usan las fuentes del sistema (system fonts) como el Washington Post, ABC, El Mundo o El País ya que son fuentes que al estar en sistema carga muy rápido. La tipografía ya está instalada en el OS del dispositivo. Optimizar fuentes web en la carga de una Web. ¿Sé debe usar Web Fonts?

Las tipografías de sistema presentan una amplia difusión, pero eso también las hace menos únicas. Al utilizar una tipografía custom o retail ofrecemos una experiencia de mayor exclusividad. La tipografía es fundamental para un buen diseño, para la inclusión de marca, la legibilidad y la accesibilidad.

Por supuesto, esto no debería ser tan sorprendente que la mayoría de nosotros. La tipografía siempre ha sido una parte importante de un buen diseño, la marca, y las fuentes de legibilidad ofrece beneficios adicionales el texto es seleccionable, búsqueda, hacer zoom, y de alta DPI amigable. Se consigue un texto preciso y coherente que se renderiza independientemente del tamaño de la pantalla y de la resolución. Las fuentes web consiguen un diseño, una experiencia de usuario y un rendimiento satisfactorios.Al utilizar una tipografía web fonts ofrecemos una experiencia de mayor exclusividad. Si además se trata de la tipografía corporativa estaremos reforzando la identidad de nuestra marca.

Pero todo no es bonito y tiene un coste. Hay que tener en cuenta posibles limitaciones tecnológicas y buscar soluciones para ellas. Las principales son: No todos los navegadores son compatibles, tiempo de descarga, consumo de datos y calidad en el renderizado al utilizar dispositivos y navegadores antiguos. Además las peticiones de fuente son recursos externos que gastan tiempo de render del navegador al pintar la página y se debe garantizar el texto de repliegue es visible durante la carga, evitando el flash de texto invisible o Foit.

En esta guía os ayudamos a hacer un poco de I+D para tomar decisiones. Ya que no hay una respuesta clara a la pregunta.

Optimizar fuentes web en la carga de una Web. ¿Sé debe usar Web Fonts?

La respuesta es depende. Si quieres identidad de la marca si. Pero no debes permitir cargar mas de dos o cómo muchisimo tres fuentes custom en su página por razones de rendimiento. Ya que van en contra del WPO de la página y tiene limitaciones tecnológicas y efectos colaterales. Eso si deben estar muy optimizadas.

La optimización de fuentes web es una parte fundamental de la estrategia de rendimiento global. Cada fuente es un recurso adicional y algunas fuentes pueden bloquear la renderización del texto que provoca el efecto flash de texto invisible o Foit.

El uso de @ font-face para cargar fuentes web personalizados es una gran característica de los navegadoras modernos para dar a nuestros sitios una estética única. Además ya existen web font de iconos de redes sociales, casas, flechas, … que te puede evitar tener que cargar Sprites de imágenes en la web. Al ser vectoriales el zoom no mostrará los píxeles que pasan con las imágenes.

Cuando se utiliza fuentes personalizadas en la web cargandola con la técnicas estándar @ font-face y una url, pueden reducir la velocidad velocidad de carga y obstaculizar rendimiento tanto real como percibida por el usuario. Hay algunos métodos que aplicados con cuidado, intentan minimizar le efecto FOIT equilibra correctamente usabilidad, rendimiento y estilo, Eso si perderemos algunas compatibilidades.

En la siguiente imagen. Vemos como hace la carga de una página Web un navegador.

Una vez que aprendemos eso vemos que tenemos un problema con la web font de tiempos que nos tira el trabajo de WPO (Web performace Optimization).

El navegador solicita el documento HTML
El navegador empieza a analizar la respuesta HTML y a construir el DOM
El navegador detecta CSS, JS y otros recursos, y procesa las solicitudes
El navegador construye el árbol CSSOM una vez ha recibido todo el contenido de CSS y lo combina con el árbol DOM para construir el árbol de visualización
Las solicitudes de fuentes se procesan cuando el árbol de visualización indica qué variantes de fuentes se necesitan para renderizar el texto especificado en la página
El navegador implementa la distribución y pinta el contenido en la pantalla
Si la fuente aún no está disponible, puede ser que el navegador no renderice ningún píxel de texto

El problema con @ font-face.

El CSS @ font-face declaración es el método estándar para referenciar fuentes personalizadas en la web:

/ * Definir una fuente web personalizada * /
@ Font-face {
font-family: 'MyWebFont';
url formato ('webfont.woff2') ('woff2'),
url formato ('webfont.woff') ('woff'),
url formato ('webfont.ttf') ('True Type'),
}
/ * Usaresa fuente en una página * /
body {
font-family: 'MyWebFont', sans-serif;
}

Fácil, pero por desgracia el manejo por defecto la mayoría de los navegadores de los de @font-face es problemático. Cuando hace referencia a una fuente web externo utilizando @font-face, la mayoría de los navegadores hará que cualquier texto que utiliza esa fuente completamente invisible mientras que la fuente externa está cargando.

IE hace inmediatamente el texto con la fuente de reserva y volver a la hace una vez que la descarga de fuentes se ha completado.
Firefox tiene representación de fuentes para un máximo de 3 segundos, después de que utiliza una fuente de reserva, y una vez que la descarga de fuentes ha terminado re-hace que el texto una vez más con la fuente descargada.
Chrome y Safari representación de fuentes suspenso hasta que la descarga de la fuente es completa. Esto hace que nos podamos quedar un una Web en blanco.

La carga lenta de la tipografía comporta una implicación oculta importante que se debe de valorar, ya que puede retrasar la renderización del texto: el navegador debe construir el árbol de visualización, que depende de los árboles DOM y CSSOM, antes de saber qué recursos de fuente necesitará para renderizar el texto.

Por lo tanto, las solicitudes de fuentes se posponen a otros recursos importantes y puede ser que el navegador no pueda renderizar texto hasta recuperar el recurso.

La renderización de fuentes también gasta tiempo en el navegador del usuario. Si tiene un smartphone o móvil antiguo puede tarda un poco más de tiempo. Si la fuente aún no está disponible, puede ser que el navegador no renderice ningún píxel de texto. Efecto FOIT. Cuando la fuente esté disponible, el navegador pintará los píxeles de texto.

En el intervalo entre la primera pintura del contenido de la página, que se puede hacer justo después de la creación del árbol de visualización, y la solicitud del recurso de fuente es donde se crea el problema de texto en blanco en el que el navegador puede renderizar el diseño de la página y omitir el texto. El comportamiento real es distinto en función del navegador:

Chrome , Safari retiene la renderización de texto hasta que finaliza la descarga de la fuente.
Firefox retienen la renderización de la fuente hasta 3 segundos y, a continuación, utilizan una fuente alternativa. una vez finalizada la descarga de la fuente, vuelven a renderizar el texto otra vez con la fuente descargada.
IE renderiza inmediatamente con la fuente alternativa si la fuente solicitada aún no está disponible y vuelve a renderizar al finalizar la descarga de la fuente.

Hay buenos argumentos a favor y en contra de las diferentes estrategias de renderización. Hay gente que les molesta la doble renderización, mientras que otras prefieren ver los resultados de forma inmediata y no les importa el reflujo de la página una vez terminada la descarga de fuentes. Esto provoca movimientos en la pantalla, ya que la fuente de sistema usada de reserva tendrá diferentes tamos e interlineados de la fuente original.

Algunos navegadores esperarán una cantidad predeterminada de tiempo (generalmente tres segundos) para la fuente para cargar antes de que se dan por vencidos y muestran el texto utilizando el repliegue font-family. Pero al igual que un perrito fiel, los navegadores WebKit (Safari, navegador por defecto de Android, Blackberry) esperarán por siempre (bueno, a menudo 30 segundos o más) para la fuente de volver. Esto significa que sus fuentes personalizadas representan un potencial punto de falla para un sitio utilizable.

Eso si las fuentes personalizadas se almacenan en caché y mostrar rápidamente, pero la velocidad percibida para la primera vista de la página es crítico para retener al usuario. Debe pesar la marca para mantenerla.

La solicitud CSS que contiene la font-face no debe bloquear la página render. En lugar de hacer referencia a sus fuentes a través de la url en una hoja de estilos externa, trate de cargar sus fuentes y el contenido de la fuente de forma asíncrona.Más adelante os explicaremos cómo lo hacen en The Guardian.
Peticiones de fuente deben establecerse para garantizar el texto de repliegue es visible durante la carga, evitando el flash de texto invisible o Foit.

¿Qué pasa con la velocidad de renderizado, el WPO? Siempre hemos escuchado de los guris del WPO que las fuentes web vienen con una penalización de rendimiento. Las fuentes son un recurso crítico adicional en la página, así que sí, que pueden afectar la velocidad de renderizado de nuestras páginas. Dicho esto, simplemente porque la página está utilizando fuentes web no significa que tenga ser lenta. Pero como nadie da duros a pesetas. A más archivos y mas peso da siempre más tiempo.

Hay cuatro puntos principales que determinan el impacto en el rendimiento de las fuentes web sobre la página:

El número total de las fuentes y de la fuente-ponderaciones utilizadas en la página. No recomendable mas de dos o tres.
El tamaño en bytes total de las fuentes utilizadas en la página. Se debe optimizar la fuente,
La latencia de la transferencia de los recursos de fuente.
El momento en que se inician las descargas de fuentes.

El diseñador de la página debe minimizar su uso. Si se utilizan las más fuentes, las más peticiones se harán y se incurrirá más bytes. El general mejores prácticas UX es mantener el número de fuentes usadas al mínimo, que también se alinea con nuestros objetivos de rendimiento. Paso uno: utilizar fuentes web, pero auditar periódicamente el uso de su fuente y tratar de mantenerlo a raya. La otra parte es que es web font debe estar optimizada en su peso, lo hará el diseñador o usas Google fonts que están optimizadas y por otro lado os explicaremos como mejorar la carga de la fuente.

Una Web Font está formada por una serie de glifos, es decir, por formas vectoriales que describen una letra o un símbolo. Por lo tanto, el tamaño de un archivo de fuente concreto está determinado por dos variables sencillas: la complejidad de las rutas vectoriales de cada glifo y la cantidad de glifos de una fuente concreta. Por ejemplo, Open Sans, que es una de las fuentes web más populares, está formada por 897 glifos, que incluyen caracteres latinos, griegos y cirílicos. Hay que evitr los caracteres de idiomas que no uses. El diseñador debe simplificar las formas vectoriales y comprimir la fuente para que no pese mucho.

Al seleccionar una fuente, hay que tener en cuenta qué conjuntos de caracteres admite. Si tienes que traducir el contenido de una página a diferentes idiomas, debes utilizar una fuente que ofrezca el mismo aspecto y la misma experiencia a la mayor parte de los usuarios.

Se utilizan cuatro formatos de contenedor de fuentes en la Web: EOT, TTF, WOFF y WOFF2. Por desgracia, a pesar de estas múltiples posibilidades, no existe un formato universal único que funcione en todos los navegadores, tanto en los antiguos como en los nuevos: EOT solo funciona con IE, TTF es parcialmente compatible con IE, WOFF tiene una mayor compatibilidad pero no está disponible en algunos navegadores más antiguos y la compatibilidad de WOFF 2.0 todavía se está implementando en muchos navegadores y sólo lo admiten lo más modernos. Vaya panorama. El cargar una fuente implica cargar varios archivos para que se vean en la mayoría de lo navegadores. Ya veremos comómo corregirlo con una carga condifional detectando el navegador dl usuario por javascript para

¿Cuánto tiempo realmente toma el visitante a descargar el recurso de fuente web en su sitio? La mejor manera de responder a esta pregunta es instrumento de su sitio a través de la API de sincronización de recursos, lo que nos permite conseguir el DNS, TCP, y los datos de tiempo de transferencia para cada fuente – como un bono, Google Fonts habilitado recientemente Timing Recursos He aquí un ejemplo fragmento reportar latencias de fuente a Google Analytics para tus informes:

// Comprobar si el navegador del visitante apoya Recursos Timing
if ( typeof window . performance == 'object' ) {
if ( typeof window . performance . getEntriesByName == 'function' ) {

function logData ( name , r ) {
var dns = Math . round ( r . domainLookupEnd - r . domainLookupStart ),
tcp = Math . round ( r . connectEnd - r . connectStart ),
total = Math . round ( r . responseEnd - r . startTime );
_gaq . push (
[ '_trackTiming' , name , 'dns' , dns ],
[ '_trackTiming' , name , 'tcp' , tcp ],
[ '_trackTiming' , name , 'total' , total ]
);
}

var _gaq = _gaq || [];
var resources = window . performance . getEntriesByType ( "resource" );
for ( var i in resources ) {
if ( resources [ i ]. name . indexOf ( "themes.googleusercontent.com" ) != - 1 ) {
logData ( "webfont-font" , resources [ i ])
}
if ( resources [ i ]. name . indexOf ( "fonts.googleapis.com" ) != - 1 ) {
logData ( "webfont-css" , resources [ i ])
}
}
}
}

A pesar de nuestros mejores intentos para optimizar la entrega de recursos de fuentes, a veces el usuario puede simplemente tener una mala conexión debido a un enlace congestionado, mala recepción, o una variedad de otros factores. En este caso, los recursos críticos – incluyendo las descargas de tipo de letra – pueden bloquear la representación de la página, que sólo hace que el asunto empeore. Para hacer frente a esto, y específicamente para web fonts, diferentes navegadores han tomado diferentes formas de usarlas:

el navegador no puede iniciar la solicitud de fuente hasta que tiene tanto el DOM y el CSSOM y es capaz de resolver las fuentes que se requieren para la página actual.

Fuentes web ofrecen muchos beneficios: mejora la legibilidad, accesibilidad (búsquedas, seleccionable, con zoom), la marca, y cuando se hace bien, hermosos resultados . No es una cuestión de si se deben utilizar fuentes web, pero la forma de optimizar su uso. Para tal fin, una lista de comprobación rápida actuación:

Auditar el uso de la fuente y mantenerla siempre dentro de una lógica. Hacer recursos de fuentes estén optimizados – ver Google Web Fonts trucos. Se debe reducir las curva de lo Glifos.
Optimizar la latencia de transferencia para cada fuente.
Optimizar eliminar JS innecesarios antes o despeus de las Web font o usarlo para carga la fuente asincronamente.
Pasa algún tiempo jugando con la Font de carga Eventos API para entender como funciona las Web fonts.
El hecho de que la página está utilizando una fuente, no significa que lo hará más lento si está bien hecho y con moderación. Un sitio bien optimizado puede ofrecer una experiencia mejor y más rápido por ejemplo usando una fuente de iconos para evitar muchas imágenes,

Las fuentes de Google son libres y de código abierto, lo que permite el almacenamiento en caché de cross-site muy eficaz. Además puedes ahorrar ancho de banda en tu servidora. De hecho, las 40 fuentes top de Google son compartidos por más de 100.000 dominios. En otras palabras, el uso de una fuente de Internet populares te puedes asegurar que muchos usuarios la tendran como cache en su navegador Por ejemplo la letra Sans es muy usada y legible. Cuanto más amplia sea la adopción, mayor será la probabilidad de acierto de caché y mejor será el rendimiento. Pero que pasa si por mi marca quiero una propia. No desesperes hay formas de mejorar su carga.

Aprovechando la caché CSS y el caché de la propia fuente te permitirá un despliegue rápido y fácil. Consegiras una experiencia de navegación rápida, muy cercana a una fuente de sistema. Si la combinas con un CDN global, formatos de archivos optimizado y una memoria caché compartida y global grandes mejoraras el rendimiento. Además es el momento de saber:

¿Cómo utilizamos fuentes web de manera responsable, o, evitando un @font-face-palm?

Defeating the Flash of Invisible Text (FOIT) es evitable usando una función Javascript loadCSS.

The Flash of Unstyled Text (FOUT) es una forma de pintar la fuente progresivamente cuando la tienes descargada y que se vea lo antes posible.

https://github.com/filamentgroup/loadCSS

Un ejemplo Defeating the Flash of Invisible Text (FOIT) con loadCSS.

// Cut the mustard, choose your own method here—querySelector is an easy one.
if( "querySelector" in win.document ) {

// test for font-face version to load via Data URI'd CSS
var fontFile = "/url/to/woff.css",
ua = window.navigator.userAgent;

// Android's default browser needs TTF instead of WOFF
if( ua.indexOf( "Android 4." ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ) {
fontFile = "/url/to/ttf.css";
}

// load fonts
if( fontFile ) {
loadCSS( fontFile );
}
}

Además un truco muy interesante para ahorrar un traza HTTP es carga la fuente en el CSS en base 64 en vez de con una url.

Ejemplo /url/to/woff.css and /url/to/ttf.css


@font-face {
font-family: My Font Family Name;
/* Important: Data URI here to prevent FOIT */
src: url("data:application/x-font-woff;charset=utf-8;base64,...") format("woff");
font-weight: normal;
font-style: normal;
}

online generators, or by using OpenSSL on the command line (openssl base64 -in filename.woff). http://dopiaza.org/tools/datauri/index.php

@font-face {
font-family: Open Sans;
src: url("data:application/x-font-woff;charset=utf-8;base64,...") format("woff");
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: Open Sans;
src: url("data:application/x-font-woff;charset=utf-8;base64,...") format("woff");
font-weight: 700; /* Bold */
font-style: normal;
}

Si le añadimos la deteción de navegador Cargaremos el tipo de archivo necesario


// NOTE!! The WOFF2 feature test and loadCSS utility are omitted for brevity

var ua = window.navigator.userAgent;

// Use WOFF2 if supported
if( supportsWoff2 ) {
loadCSS( "/url/to/data-woff2.css" );
} else if( ua.indexOf( "Android 4." ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ) {
// Android's Default Browser needs TTF instead of WOFF
loadCSS( "/url/to/data-ttf.css" );
} else {
// Default to WOFF
loadCSS( "/url/to/data-woff.css" );
}

La solicitud CSS que contiene la definición font-face no debe bloquear el renderizado de la página. En lugar de hacer referencia a sus fuentes a través en una hoja de estilos externa con uma url, trate de cargar sus fuentes y el contenido de la fuente de forma asíncrona.Ahora le mostraremos cómo se hace. Las peticiones de letras deben establecerse para garantizar el texto de repliegue es visible durante la carga, evitando el flash de texto invisible o Foit.

Os dejamos un javascript muy cercano a la perfección

Por último y esto ya es para nota podemos guarda la tipografía no sólo en la cache sino usar el Local Storage de un navegador moderno. El Guardian y la BBC lo utilizan. Esto ya si que es una paranoia de WPO y del SEO. Es meter la Web font en un Json para aprovechar que el navegador lo carga antes y dejarlo almacenado en el navegador del usrio para no tener que hacer más peticiones. Esto si que es la matricula de honor para optimizar la carga de una tipografía Web propietaria.


/**
* Should be in the head to prevent FOUT on subsequent page views.
* http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage
* http://codepen.io/CrocoDillon/pen/dkcbs?editors=001
* Inspired by: https://github.com/guardian/frontend/blob/dea76ec06878986a417b9fc0f87e11965f504d27/common/app/assets/javascripts/modules/ui/fonts.js
*/
(function(window, document) {
//'use strict';

var isModernBrowser = (
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window
),
md5 = 'e90ba95faca6e63b5516ed839f4514ec',
key = 'fonts',
cache;

if (!isModernBrowser) {
// Sorry, browser is too old!
return;
}

function insertFont(value) {
var style = document.createElement('style');
style.innerHTML = value;
document.head.appendChild(style);
}

// pre-render
try {
cache = window.localStorage.getItem(key);
if (cache) {
cache = JSON.parse(cache);
if (cache.md5 == md5) {
insertFont(cache.value);
} else {
// Busting cache when md5 doesn't match
window.localStorage.removeItem(key);
cache = null;
}
}
} catch (e) {
// Most likely LocalStorage disabled, so hopeless...
return;
}

// post-render
if (!cache) {
window.addEventListener('load', function() {
var request = new XMLHttpRequest();
//request.open('GET', 'fonts.84c3ab80b24f641613bb66c1e432c352.woff.json', true);
request.open('GET', 'http://crocodillon.com/temp/webfont.json', true);
request.onload = function() {
if (this.status == 200) {
try {
window.localStorage.setItem(key, this.response);
insertFont(this.response);
} catch (e) {
// LocalStorage is probably full
}
}
};
request.send();
});
}
})(window, document);

Os dejamos la implementación de The Guardian. El Técnico y diseñador deben esta en una cínica de salud mental después de esto 🙂


/*jshint loopfunc: true */
define([
'bonzo',
'qwery',
'raven',
'common/utils/ajax',
'common/utils/mediator',
'common/utils/storage'
], function (
bonzo,
qwery,
raven,
ajax,
mediator,
storage
) {

function Fonts(styleNodes, fileFormat) {

var storagePrefix = 'gu.fonts.';

this.ajax = ajax; // expose publicly so we can inspect it in unit tests

this.view = {
showFont: function(style, json) {
style.innerHTML = json.css;
}
};

this.loadFromServer = function (url, callback) {

// If no URL, then load from standard static assets path.
url = url || '';
// NOTE - clearing old fonts, can be removed after a certain amount of time
storage.local.clearByPrefix('gu.fonts.Web');
for (var i = 0, j = styleNodes.length; i < j; ++i) { clearOldFonts(styleNodes[i]); var style = styleNodes[i]; if (fontIsRequired(style)) { var that = this; this.ajax({ url: url + style.getAttribute('data-cache-file-' + fileFormat), type: 'jsonp', jsonpCallbackName: 'guFont', success: (function (style) { return function (json) { if (!json) { raven.captureMessage('Failed to load fonts'); return; } if (typeof callback === 'function') { callback(style, json); } var nameAndCacheKey = getNameAndCacheKey(style); that.clearFont(nameAndCacheKey[1]); storage.local.set(storagePrefix + nameAndCacheKey[1] + '.' + nameAndCacheKey[0], json.css); mediator.emit('modules:fonts:loaded', [json.name]); }; }(style)) }); } else { mediator.emit('modules:fonts:notloaded', []); } } }; this.loadFromServerAndApply = function (url) { var that = this; this.loadFromServer(url, function (style, json) { that.view.showFont(style, json); }); }; this.clearFont = function(name) { storage.local.clearByPrefix(storagePrefix + name); }; this.clearAllFontsFromStorage = function() { storage.local.clearByPrefix(storagePrefix); }; function getNameAndCacheKey(style) { var nameAndCacheKey = style.getAttribute('data-cache-file-woff').match(/fonts\/([^/]*?)\/?([^/]*)\.woff.json$/); nameAndCacheKey.shift(); return nameAndCacheKey; } function fontIsRequired(style) { // A final check for storage (is it full, disabled, any other error). // Because it would be horrible if people downloaded fonts and then couldn't cache them. if (storage.local.isAvailable()) { var nameAndCacheKey = getNameAndCacheKey(style); var cachedValue = storage.local.get(storagePrefix + nameAndCacheKey[1] + '.' + nameAndCacheKey[0]); var widthMatches = true; var minWidth = style.getAttribute('data-min-width'); if (minWidth && parseInt(minWidth, 10) >= window.innerWidth) {
widthMatches = false;
}

return cachedValue === null && widthMatches;
} else {
return false;
}
}

/**
* NOTE: temp method, to fix bug with removal of old fonts - can be removed if font files update
*/
function clearOldFonts(style) {
var key = getNameAndCacheKey(style),
fontPrefix = 'gu.fonts.' + key[1],
fontName = fontPrefix + '.' + key[0];
for (var i = storage.local.length() - 1; i > -1; --i) {
var name = storage.local.getKey(i);
if (name.indexOf(fontPrefix) === 0 && name.indexOf(fontName) !== 0) {
storage.local.remove(name);
}
}
}

}

return Fonts;

});

Conclusión hemos perdido el miedo a las Web fonts con moderación.

Fuentes:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=es
https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/
http://www.filamentgroup.com/lab/font-loading.html
https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/#optimizing
http://jaicab.com/2015/03/03/introducing-localfont-a-localstorage-solution/
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
http://www.webpagetest.org/
http://jaicab.com/localFont/
http://jaicab.com/2015/03/03/introducing-localfont-a-localstorage-solution/
https://github.com/bdadam/OptimizedWebfontLoading/blob/master/src/js/fontloader.js
http://bdadam.com/blog/better-webfont-loading-with-localstorage-and-woff2.html
http://master.origin.font-loading.fgtest.com/data-uris-cookie.html
https://github.com/guardian/frontend/blob/dea76ec06878986a417b9fc0f87e11965f504d27/common/app/assets/javascripts/modules/ui/fonts.js
https://www.google.com/fonts/

. Leer artículo completo en Frikipandi Optimizar fuentes web en la carga de una Web. ¿Sé debe usar Web Fonts?.

Optimizar fuentes web en la carga de una Web. ¿Sé debe usar Web Fonts?

Entradas recientes para Optimizar fuentes web en la carga de una Web. ¿Sé debe usar Web Fonts?