Google Web Fonts: La libertad del tipo

Uno de los problemas a los que se enfrenta el diseñador de páginas web cuando está comenzando a desarrollar el aprendizaje de la materia, es la inconsistencia de las tipografías a emplear. Al principio estás deseando hacer cambios a todo, y es una necesidad el modificar las opciones por defecto al diseñar tus webs. Sustituyes el color blanco del fondo por negro o rojo, cambias el color predeterminado de la fuente de negro a dorado o verde, y cambias la tipografía por defecto por esa tan chula que te acabas de bajar de Creamundo o de DaFont. Pero mientras tus cambios son visibles para todo el mundo sin problemas (más allá de los límites del buen gusto), la gente no ve tu super-mega-tipografía, sino que continua viendo la TimesNewRoman predeterminada. ¿Por qué?.

Esto es así porque en los documentos HTML la información de la tipografía no se incrusta en el propio documento, como sucede en los documentos de Word, por ejemplo, sino que simplemente indicas la fuente con la que vas a trabajar, y el navegador va a buscarla al repositorio local de fuentes (en C:/Windows/fonts, por ejemplo). Si la que le has indicado no está, utiliza la tipografía por defecto. Si tu descargas e instalas la fuente Copperbeach, y la utilizas en tus webs, cuando tú visualizas las páginas lo verás como deseas, ya que la tipografía está disponible en tu sistema, pero cuando alguien más accede a tus páginas en Internet, las ven de un modo diferente a lo que tu quieres.

Para evitar este problema, pero tener libertad a la hora de escoger una tipografía para un título o un encabezado, la gente solía emplear truquillos como escribir el texto como imagen en Photoshop, y colocar un .gif o un .jpg con el rótulo a nuestro gusto. También podían utilizar la opción de texto flas de Dreamweaver, por ejemplo, o cualquier otra triquiñuela similar. El inconveniente de esto, es que cualquier cosa que no fuese texto real, bien fuese imagen o flash o similar, era bastante contraproducente a efectos de SEO, ya que el buscador no era capar de leer nuestro títulares para comprobar la relevancia de las palabras clave de nuestro sitio.

Servicios como Google Web Fonts pondrán fin a este problema, dándonos libertad para huir de las tipografías estándar, sin tener que ver mermada nuestra política de SEO on-page.

Google Web Fonts es un servicio gratuíto de Google, que nos permite utilizar su repositorio de fuentes remoto sustituyendo al repositorio local. Puedo escoger una tipografía de las que Google me ofrece en su web, e indicarle al navegador mediante un código que no busque fas fuentes en C:/Windows/fonts, sino que lo haga en internet, en la URL que yo le indique. El servicio de Google no es el único, ya que hay otros similares, como Typekit, de Adobe. Pero como yo son un Googlefanboy, vamos a utilizar este.

Lo primero que vemos al entrar en la web de Google, es la escasez de fuentes. No es lo mismo trabajar con unas escasas 300 fuentes, que con las miles que podemos encontrar en los sitios de descarga anteriormente mencionados. Sin embargo son más que suficientes, no os preocupéis. De hecho, ni siquiera encuentro una justificación real para no usar las fuentes de sistema, así que ya véis. Yo tengo Verdana, Arial y Tahoma, y me sobran dos.

En la parte de la izquierda tenemos un buscador, en el que puedes buscar ajustando una serie de filtros, como si quieren fuentes serifadas o sin serifa, más o menos gruesa, más o menos cursiva, etc. Cuanto más selectivo seas con los filtros, menos fuentes iran quedando que los cumplan, hasta dar con las que te interesan. Todas las fuentes que hay en Google Web Font son gratuiítas, y las podemos utilizar sin ningún tipo de problema legal.

Una vez escogida la los parámetros de las fuentes que nos interesan, en la parte superior podemos escribir el texto que queremos ver con la tipografía seleccionada, para que veamos una previsualización personalizada.

Una vez visto el texto en diversas fuentes, escogeremos la que más nos guste y nos dispondremos a utilizarla. Aparte de la previsualización del texto, y el nombre de la fuente, tenemos tres opciones; uso rápido, abrir ventana nueva y añadir a la colección. Añadir a la colección nos permite ir agregando varias fuentes a una selección, donde accederemos de modo rápido a las fuentes que más utilizamos. Es nuestro repositorio habitual, pero ahora en la nube.

Abrir ventana nueva lanzará un pop-up con el juego de caracteres de la tipografía, para que veamos si cumple los requisitos que necesitamos (Si tiene tildes y eñes, por ejemplo). Finalmente, con el uso rápido, pasaremos a la sección donde, en pocos pasos, podremos utilizar rápidamente la fuente en nuestra web.

En el paso uno nos informa de la fuente escogida, y nos permite escoger si tiene variantes (grosor, cursiva, etc). Además, nos informa del impacto que tendrá esta tipografía en el tiempo de carga de nuestra página.

Posteriormente, me proporciona un código para incluir en mi página, dentro del HEAD, en el que indicamos dónde ha de buscar el navegador para encontrar la fuente, en lugar de en el repositorio local. Ahi podéis ver la URL apuntando al servicio de Google, concretamente a la tipografía seleccionada.

Finalmente nos indica como editar la hoja de estilo de nuestra página, para que hagamos la llamada a la tipografía al aplicarla a un texto.

Bien, pues siguiendo estos pasos, he creado un nuevo documento en Dreamweaver, y he escrito un texto para poder utilizar la tipografía escogida.

Añado la URL donde está la tipografía dentro del HEAD, como me indican en la web de Google, para que el navegador sepa donde buscar la fuente.

Creo un nuevo estilo CSS, al que llamo estiloGWT, y añado la línea que me indica Google con el nombre de la tipografía. Aplico luego el estilo a la línea de texto que quiero modificar, para visualizar la nueva tipografía.

Finalmente, en la vista de diseño de Dreamweaver no veo los cambios realizados, y he de previsualizar en el navegador (en mi caso Firefox), para que realmente se vean los cambios (en este caso el WYSIWYG no es muy WYSIWYG que se diga). En Firefox se ve perfecto, con la nueva tipografía escogida, a pesar de que no tengo esta fuente en mi repositorio local. Prueba conseguida.

Así que ya sabéis. Si queréis romper con la esclavitud de la Arial, y tener la flexibilidad de utilizar fuentes no-estándar en vuestras webs, Google Web Fonts es vuestro sitio. ¡Gracias Google!

Anuncios

4 pensamientos en “Google Web Fonts: La libertad del tipo

  1. Pues depende de la tipografía, de las veces que lo uses, y para qué cantidad de texto, supongo. Cuando lo estás haciendo en el paso 1 te indica el impacto que tendría en el tiempo de carga de tu página.

  2. Pingback: Google Web Fonts: La libertad del tipo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s