Fuentes optimizadas para web

Desde que apareció @font-face en CSS el aspecto de las páginas web cambio. Ahora ya no tenemos que usar solo las aburridas fuentes que por defecto traen los navegadores, ahora podemos usar un amplio conjunto de fuentes y seleccionar el conjunto de fuentes que van de acuerdo al estilo que le queremos dar a nuestra web.

Google ofrece un servicio llamado Google Fonts donde podemos seleccionar entre un amplio catalogo de fuentes disponibles y optimizadas para web.

fuentes

Lo que tenemos que hacer es seleccionar las fuentes que vamos a utilizar y dar clic en el boton Add to Collection. Cada vez que realicemos esta acción las fuentes se irán agregando a nuestra colección.

fuentes2

Una vez que tenemos todas las fuentes que vamos a utilizar damos clic en la opción Use, que se encuentra en la parte derecha de la colección de fuentes. Esta acción nos llevará a otra pantalla donde nos muestra un resumen de las fuentes seleccionadas. Algunas fuentes están diseñadas en mas de un ancho, si este es el caso será necesario seleccionar cuales estilos son los que nos interesan. Por default todas las fuentes traen el ancho normal (400).

Como un dato extra Google Fonts nos brinda información sobre el impacto que tendrá en nuestro sitio el uso de las fuentes. Recordemos que las fuentes son un recurso mas de la web y como tal implica al menos una solicitud al servidor.

fuente3

Una vez que checamos que todo está bien procedemos a utilizar las nuevas fuentes. Existen 2 alternativas, la primera es descargar las fuentes para incluirlas directamente en nuestros proyectos. Se descargará un archivo .zip que incluye una carpeta por fuente y dentro de cada una de estas carpetas se encuentran los archivos .ttf.

La segunda forma es utilizar directamente el servicio de Google Fonts y así evitarnos hacer la descarga y aprovechar los beneficios de la carga en paralelo de los navegadores al descargar las fuentes desde fonts.googleapis.com. De esta segunda forma existen a su vez 3 formas de utilizarlas, la primera es agregando una hoja de estilos.

<link href=’http://fonts.googleapis.com/css?family=Lobster|Tangerine|Dancing+Script|Crafty+Girls’ rel=’stylesheet’ type=’text/css’>

La segunda es utilizando @import

@import url(http://fonts.googleapis.com/css?family=Lobster|Tangerine|Dancing+Script|Crafty+Girls);

La tercera forma es utilizando JS

<script type=”text/javascript”>
  WebFontConfig = {
    google: { families: [ ‘Lobster::latin’, ‘Tangerine::latin’, ‘Dancing+Script::latin’, ‘Crafty+Girls::latin’ ] }
  };
  (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>

Cada una de estas forma genera una llamada al API de Google que se encarga de generar el código necesario para poder utilizar las fuentes. Para las fuentes que seleccionamos para este artículo el código generado fue el siguiente.

@font-face {
  font-family: 'Crafty Girls';
  font-style: normal;
  font-weight: 400;
  src: local('Crafty Girls'), local('CraftyGirls'), url(http://themes.googleusercontent.com/static/fonts/craftygirls/v3/0Sv8UWFFdhQmesHL32H8o3hCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: local('Dancing Script'), local('DancingScript'), url(http://themes.googleusercontent.com/static/fonts/dancingscript/v4/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff) format('woff');
}
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), url(http://themes.googleusercontent.com/static/fonts/lobster/v6/MWVf-Rwh4GLQVBEwbyI61Q.woff) format('woff');
}
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v4/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Una vez que agreguemos cualquiera de las formas descritas anteriormente a nuestro proyecto estamos listos para usar las fuentes. Solo es necesario agregar la propiedad font-family en CSS a los elementos que usaran la fuente.

font-family: ‘Lobster’, cursive;
font-family: ‘Tangerine’, cursive;
font-family: ‘Dancing Script’, cursive;
font-family: ‘Crafty Girls’, cursive;

Web icon fonts

Cada vez es mas común el uso de iconos en páginas web. La forma tradicional de trabajar estos iconos era usando pequeñas imagenes. Algunos problemas de trabajarlo de esta forma es que si tu web la trabajas para dispositivos con una mayor resolución (por ejemplo pantallas de retina) tus iconos se podian ver pixeleados, otro problema es que cada imagen es una solicitud al servidor, lo que provoca muchas peticiones web, esto en parte se podia solucionar usando sprites de imagenes.

Una alternativa de solución para este problema es usar icon web fonts, es decir manejar los iconos como si fueran texto (cada icono es un caracter del conjunto de caracteres que componen la fuente). Los beneficios que nos da usar esta técnica es que los iconos ahora son vectoriales 😀 podemos cambiar su tamaño usando css (css:font-size) y su color (css:color) y todo esto sin perder calidad y hablando sobre peticiones al servidor solo se realiza una al invocar la fuente que contiene el conjunto de iconos.

Hay muchos sitios que ofrecen este tipo de fuentes, yo estoy utilizando fontawesome que proporciona un conjunto de iconos bastante amplio y es fácil de utilizar en conjunto con bootstrap. Ademas nos proporciona un cdn. Fontawesome proporciona ejemplos muy claros sobre como utilizarlo.

Esta técnica se basa en el “shadow dom” y utiliza un rango de caracteres reservado para propositos especiales.