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;