Optimiza @font-face con google fonts: más livianas, más rápida la carga 26.9.14
Un breve post para que hagas más livianos los archivos tipográficos y por lo tanto agilices la carga de la página si usas el servicio de Google fonts. Complementario a la guía @Font-face y sus problemas. Uso y solución de problemas.
Optimiza @font-face con google fonts: más livianas, más rápida la carga
Un breve post para que hagas más livianos los archivos tipográficos y por lo tanto agilices la carga de la página si usas el servicio de Google fonts.
En el artículo "@Font-face y sus problemas. Guía de uso y solucción de problemas" dedico un pequeño apartado dedicado a las "Buenas prácticas" en su uso.
Lo que sigue es una ampliación a ese apartado, que creo resultará útil a quienes, como yo, utilizamos google fonts.
Si usas Google fonts, aligera
Si utilizas este servicio de google, puedes ir un paso más allá a la hora de optimizar la tipografía elegida.
Ten presente que cada archivo incluye los juegos de caracteres necesarios para dar soporte a un montón de idiomas de lo más dispar (character subset): latín, cirílico, japonés... en sus versiones "normal" y extendida.
La popular Open Sans da soporte a más de 20 idiomas con un peso de 217kb.
Para lograr aligerar el peso del archivo y por lo tanto el tiempo de carga, sólo necesitas indicar el juego de caracteres que deseas cargar. Tal que así:
<!-- El enlace facilitado por Google -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<!-- Sólo los carácteres latinos -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet" />
<!-- El juego de caracteres latín extendido -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext" rel="stylesheet" />
Fíjate que lo único que hay que hacer en el enlace facilitado por Google es añadir a continuación del nombre de la fuente la cadena de texto &subset=latin o el juego que necesites.
Haz lo mismo si la forma escogida para importar las tipografías en vez de <link... es mediante @import url(...)
Un paso más allá
Puedes ser aún más radical en el caso de que sólo quieras utilizar una tipografía para un texto breve. Así:
<!-- sólo cargará los caracteres "K" "s" "e" "o" "C" en la tipografía indicada -->
<link href="http://fonts.googleapis.com/css?family=nunito&text=KsesoCss" rel="stylesheet" />
En este caso no es necesario indicar el parámetro subset
El método más eficiente nuevo
¿Cuál elegir?
Si buscar efectividad, traducido en rapidez de carga en la página por un mínimo de peticiones al servidor y por lo tanto menor tráfico, ninguna de las formas anteriores es la más recomendada.
Todas dejan algo que desear, todas presentan algún tipo de penalización, todas atentan significativamente contra la optimización de la página.
La opción que mejor satisface esas premisas es incluir directamente en la hoja de estilos la regla @font-face con la llamada al archivo tipográfico sólo en formato woff.
@font-face{
font-family:'Droid Serif';
font-style:normal;
font-weight:400;
src:local('Droid Serif'),local('DroidSerif'),url(http://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
Las rutas o valor de la propiedad "src" se obtienen con ayuda del inspector de código de Firefox. Chrome tiene preferencias por woff2. Bastante menos soportada por navegadores que woff.
Todo lo contrario: métele carga
Pero si prefieres hacer lo contrario, y aumentar la carga y dependencia de este servicio, Google también te lo pone fácil. Todo sea por tener una página "to´chula y molona".
Efectos a los textos (β)
Mediante la llamada a la fuente Google también facilita el poder hacerlo con una serie de efectos. Por ejemplo, si no controlas o no te apetece usar la sencilla y potente text-shadow puedes pedirle a google que lo haga por ti.
http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Como ves en el código se ha añadido el parámetro &effect=shadow-multiple.
A continuación, para aplicarlo a un elemento en concreto lo que tienes que hacer es utilizar dicho parámetro y su valor como nombre de la clase a declarar en el elemento, sustituyendo el signo = por un guión medio - tal que así:
<h1 class="font-effect-shadow-multiple">
KsesoCss y Google fonts: efectos de texto
</h1>
El resultado sería:
Se pueden "solicitar" más de un efecto, sólo es necesario añadirlos separados por una barra vertical ( | ) al parámetro &effect=shadow-multiple|3d-float.
La lista completa de efectos disponibles es la de abajo. Pero recuerda, para qué quieres que otros hagan por ti lo que tú puedes hacer con una simple regla de css.
Créditos y reconocimientos
Lo vi en igvita.com en el artículo "Web Fonts Performance: Making Pretty, Fast" obra de Ilya Grigorik
Pero toda esta información la tienes disponible [ing] en el propio servicio de Google fonts.
Artículo publicado originalmente el 20-12-2012 y actualizado el 26-09-2014
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
Muy interesante @Kseso tenia mis dudas sobre la carga de tiempo.
ResponderEliminarPD: Cuando cargamos la fuente con @import no va en ie7... ya se, ya se es viejo jaja pero algunos clientes lo piden si o si... :)
Pero... pero Alex
ResponderEliminar¿Tampoco afectó lo del fin del mundo al 7 y sus pedigüeños?
Ainsss!!! ¡Qué lástimas! xDD
Gracias por el apunte.
Gracias por el aporte, tenia sospechas sobre los tiempos de cerca en las webs, al menos así podemos reducirlos si usamos google fonts
ResponderEliminarGinés:
ResponderEliminarSí, claro que supone una carga (peticiones y tráfico).
De hecho el mismo servicio tiene un "reloj" que lo muestra de forma gráfica. Y cuantas más fuentes vas seleccionando más sube la aguja indicadora.
Un saludo y gracias por pasarte por aquí.