soy Kseso y esto EsCSS

Optimiza @font-face con google fonts: más livianas, más rápida la carga

Optimiza @font-face con google fonts: más livianas, más rápida la carga

·Por Kseso ✎ 4

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

Crédito img: AndysmithSi 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.

Sin embargo, puedes reducirlo a 36kb cargando sólo el juego latin o a 80kb si es el extendido:

Open sans subset

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:

efectos al texto con google fonts

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.

efectos al texto con google fonts

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

avatar del Editor del blog

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 Don Kseso Kseso