Adobe Edge Web Fonts a fondo. Guía de uso y comparativa con Google fonts 6.1.13
Análisis del servicio gratuito de fuentes web de Adobe a fondo. Similar a Google fonts con la tecnología Typekit.
Adobe Edge Web Fonts a fondo. Guía de uso y comparativa con Google fonts
Adobe® Edge Web Fonts es un servicio que proporciona acceso a tipografías para la web. O lo que es lo mismo, otra forma de usar tipografías sin necesidad de alojar los archivos ni crear las reglas @font-face de Css. Es una herramientas de Adobe. El servicio es gratuito y en su funcionamiento similar a Google fonts.
No es de extrañar, pues ambas empresas se han asociado y colaboran con su experiencia y conocimientos para la mejora de ambas herramientas: Edge fonts y Google fonts.
Otro detalle que tienes que tener presente es que en este servicio de Adobe participa Typekit (powered by)
Cómo utilizar Adobe® Edge Web Fonts
Es tan fácil como te muestro en la imagen de la derecha, sólo tienes que ir al enlace y:
-1- seleccionar la tipografía (con vista previa editable -2-).
-3- copiar el script y
-4- declararla en el selector Css correspondiente.
Su uso al detalle
Para disponer de las tipografías elegidas sólo tienes que incluir en el head un script. En él se incluye la info necesaria: la familia font-family, el subset y las variaciones font-style y font-weight elegidas.
La sintaxis sería así. En negrita las opciones
<script src="http://use.edgefonts.net/<familia>[:variaciones,][:subset].js</script>
- familia La tipografía elegida. Aquí la relación de tipografías disponibles y en esta página visualizadas con su tipografía.
- [;:variaciones] Para indicar el weight y el style. cada valor se compone de un número del 1 al 9 (f-weight:100 a f-weight:900) y la letra inicial de los posibles estilos. Si no se indica nada caga los cuatro básicos: regular, italic, bold, y bold italic.
Así n4: es f-estyle: normal y weight: 400. i7: italic 700 - El subset por defecto y si no se indica nada es el charset latin-1. El otro valor admitido es all
Ejemplos de scripts de inclusión
# 1 familia con las opciones por defecto (resultado: n4,i4,n7,i7)
# subset por defecto
use.edgefonts.net/averia-libre.js
# 1 familia en 2 estilos. 'Averia Libre Light' (n3) y
# 'Light Italic' (i3) con el "default" subset.
use.edgefonts.net/averia-libre:n3,i3.js
# 1 familia, en 1 style, con "all" subset.
use.edgefonts.net/averia-libre:n3:all.js
# 2 familias. 'Averia Libre Regular' (n4) con "default" subset
# y 'Bree Serif Regular' (n4) con "all" subset.
use.edgefonts.net/averia-libre:n4;bree-serif:n4:all.js
# 2 familias con las opciones por defecto.
use.edgefonts.net/averia-libre;bree-serif.js
Fíjate en la sintaxis. Las opciones van precedidas de los dos puntos y separadas por comas :n3,i3:all; y entre familia y familia hay un punto y coma averia-libre:n4;bree-serif:n4:all.
Adobe te permite tres protocolos en la llamada al script:
Sin URL: //use.edgefonts.net/averia-libre.js y recomendado para la mayoría de los casos.
HTTP URL: http://use.edgefonts.net/averia-libre.js
URL segura: https://use.edgefonts.net/averia-libre.js
Declarando familias a los elementos
Este paso es tan sencillo como incluir en el css la declaración font-family: XXX;. y el peso y estilo de la tipografía como siempre.
Usando Adobe® Edge Web Fonts
<!doctype html>
<html>
<head>
<script src="http://use.edgefonts.net/droid-sans.js"></script>
<style>
h1 {
font-family: droid-sans, serif;
font-style: normal;
font-weight: 400;
}
</style>
</head>
<body>
<h1>Adobe Edge Web Fonts a fondo por KsesoCss blog</h1>
</body>
</html>
Los servicio por el inspector
Hasta aquí cómo usar el servicio de Adobe® Edge Web Fonts. Pero si conoces un poco el blog ya sabes que me gusta ir un poco más allá. Así que vamos a echarle un vistazo a través del inspector de Chrome.
Creamos una pequeña página para usar dos tipografías: Acme para el h1 y Droid Serif para cuatro párrafos. Y para tener un punto de comparación, hacemos lo mismo pero importando las fuentes desde google fonts vía script como el servicio de Adobe.
Y para comparar ya aprovecho y vemos la diferencias de usar el método con scripts de ambos frente a la vía en puro Css. Esto es con <link href='http:...' rel='stylesheet' type='text/css'>
Adobe Edge Web Fonts: peticiones, transferencias y tiempos
La captura de la página que usa el servicio Adobe Edge Web Fonts. Haz click para verla en grande. Los datos resumidos de peticiones, tiempos de carga y peso según el inspector de Chrome:
6 requests, 50.36KB transferred, 3.07s (onload: 3.05s, DOMContentLoaded: 1.59s)
Google Font Api: peticiones, transferencias y tiempos
Y lo mismo para la misma página utilizando el servicio de Google, usando el método por javascript para hacer la llamada a las tipografías:
5 requests, 47.13KB transferred, 1.78s (onload: 1.43s, DOMContentLoaded: 43ms)
Google Font Api en puro Css
Pero la diferencia realmente está al optar por hacer una llamada a las tipografías con puro Css en Google fonts. Adobe no ofrece esta alternativa.
La imagen de la derecha (pincha para ampliarla) no deja lugar a dudas. Gana en los tres aspectos: peticiones, peso y tiempos de carga:
4 requests, 40.49KB transferred, 647ms (onload: 256ms, DOMContentLoaded: 39ms)
Comparativa de los tres métodos
La petición de más al usar javascript en el servicio de Adobe se corresponde a una imagen de 1px por 1px. No paré a ver su finalidad o razón. Tampoco influye demasiado en el peso, pero sí en los tiempos.
La diferencia entre el peso de los scripts y archivos de fuentes tampoco es mucha: 50.36KB frente a 47.13KB. -3.23KB a favor del servicio de Google.
Donde sí hay una diferencia significativa es en los tiempos: Google se toma 1.78s frente a los 3.07s que demoró Adobe.
Pero como has visto, al hacer uso de Css y prescindir de javascript para utilizar las tipografías se produce una mejora en todos los aspectos:
- Vía Css se necesita 1 petición menos. 4 en total contando el propio html.
- 40.49KB transferidos. -6,64KB y -9,87 respectivamente. Un 21% de ahorro frente a Adobe Edge fonts.
- Y donde da el campanazo es en los tiempos: Unos míseros 647ms frente a los 1.78s y 3.07s anteriores.
2.75 veces más Google Fonts vía javascript y
4.75 veces más Adobe Edge vía javascript.
Nota: En pruebas realizadas con posterioridad, en momentos del día diferentes, los tiempos variaron algo en ambas herramientas usando el método con javascript. En Google fonts fueron de ms. En Adobe Edge fueron más dispares. Alcanzando los +4s en algún caso y en 1 ocasión los 2.7s. Estando casi siempre por encima de los 3s.
El secreto está en el head
Estas diferencias se explican si expandimos el head de cada documento una vez procesado por el navegador.
En Adobe Edge fonts:
En Google fonts:
Te resalto en fondo azul y texto blanco la inclusión que hacen en la etiqueta del head de un montón de clases. Casualmente las mismas 3 en los dos casos. Como te decía al inicio, son partners en este servicio. Si el head ya tiene alguna clase asignada la respeta.
Eso junto a los escript creados, aparte del que hay que colocar para usar el servicio.
Por contra, fíjate en la limpieza al decantarte por el método Css puro:
La razón de incluir dichas clases en el html es para minimizar el efecto FOUT o FOIT (flash of unstyled/invisble text). Esto es, se aplican las declaraciones que incluyen las tipografías @font-face una vez cargados sus archivos:
body {
font-family: serif;
}
.wf-doidserif-n4 body {
font-family: doid serif, serif;
}
De cómo se ven
Las diferencias entre uno y otro también quedan reflejadas en cómo se muestran las tipografías seleccionadas. Como ves en la imagen de abajo, pese a compartir el mismo marcado html, contenido y css el resultado es diferente:
* {margin: 0; padding: 0; border: 0 none;}
html, body {height: 100%; width: auto; font-size: 1rem;}
body {padding: 2rem 6rem;}
h1 {font-family: 'Acme', sans-serif; font-size: 1rem; font-style: normal; font-weight: 400;}
p {font-family: 'Droid Serif', serif; font-size: 1rem; font-style: normal; font-weight: 400;}
Observaciones y disclaimer
Las fuentes escogidas para probar el servicio de Adobe y la comparativa con el de Google lo fueron al azar y sin ningún propósito o método. Sólo el estar disponibles en ambos y ser de las primeras.
Posíblemente en la prueba, análisis y conclusiones haya cometido más de un error. Estoy aprendiendo a utilizar los inspectores de los navegadores. Tampoco se si en caso de haber utilizado otra herramienta, como el inspector de Opera, los resultados cambiarían.
Nada más lejos de mi intención que pretender que te decantes por uno u otro. Ni por el método con Css frente al de javascript. Son alternativas que tienes a tu disposición y debes ser tú quien decida si este o aquel.
Así que mis disculpas por los posibles errores que haya cometido en este artículo. Si encuentras alguno, te agradezco que me lo hagas saber en un comentario. También tu opinión y experiencia si has utilizado estas herramientas.
Enlaces de interés
- Adobe® Edge Web Fonts
- Documentación completa
- Introducción a Adobe Edge Web Fonts
- Navegadores y SO soportados
- Visor de las tipografías.
- Otro visor más
- Y un tercero más de propina
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Yo hasta ahora he utilizado google fonts(casi siempre) y el método CSS en alguna ocasión, pero viendo los tiempos de carga creo que me decantaré por utilizar este último... no sin antes comparar :)
ResponderEliminarDani Esa era la doble finalidad del artículo.
ResponderEliminarDarlo a conocer y hacer la elección en función de las particularidades de cada cual.
De todas formas, la experiencia de Adobe en este campo no es poca. Ahí está Typekit.