Embebiendo fuentes y no morir en el intento

Recientemente estoy haciendo una pagina web, y me encontre con el problema de usar la fuente con la cual se diseña. Esta fuente es una fuente que se instala cuando instalas algun programa de la suite de Adobe. Si el ordenador donde se muestra la pagina web tiene instalado alguno de estos programas y la web se veia bien, pero, si el ordenador no tenia instalado ninguno de esos programas, cambiaba la visualizacion.

Seguro que todo esto a los que nos dedicamos ha hacer paginas web nos ha pasado mas de una vez, y muchas veces hemos terminado por unas una fuente arial, verdana o cualquier otra fuente “web-safe” con las que el resultado saliera mas o menos parecido.

Hoy en dia tenemos ya soluciones para poder usar fuentes no “web-safe” en nuestra web, y que ademas se vea bien en cualquier navegador (IE,FX,CH,SF), y en cualquier plataforma (Mac,Linux,Win).

Una de estas soluciones es la que nos da google gracias al Google Font Directory. Usarlo es tan sencillo como seleccionar la fuente que nos guste en la lista hacer click en “Get The Code” copiar la linea link

en el head encima de link de nuestra hoja de estilos, y luego aplicar la fuente en nuestra hoja de estilos con el nombre de la fuente. Sencillo no?

Si las fuentes que nos da google no nos convencen, podemos optar  usar Typekit. El funcionamiento de esta web es bastante simple, si te registras con una cuenta gratuita y te dan un codigo el cual tienes que pegar en la cabezera de tu pagina web. Luego seleccionas un maximo de  2 fuentes de las que tienen basicas, en una web, una vez que has seleccionado , haces click launch kit, y se abre una ventana en la cual puedes asociar la fuente a las etiquetas css que quieras, por ejemplo si quieres usar una fuente en toda la web, marcarias la fuente y despues en el campo que te da para poner las etiquetas pones “body” . Una vez que has puesto las etiquetas que quieres usar, haces click en apply y si vas luego a tu pagina web veras que se han aplicado las fuentes a las partes que tu has dicho. Veras tambien, por lo menos con una cuenta gratuita, que en tu web se ve un pequeño icono abajo en la derecha de typekit.

Otra solución, es usar el font-face generator de Font Squirrel. Aqui haciendo clic en “Add Fonts” se nos abre una ventana que nos permite elegir la fuente que queremos usar buscandola en una carpeta de nuestro ordenador, en Windows generalmente era en C:/Windows/Fonts, en Mac en /Library/Fonts, seleccionamos la fuente marcamos por defecto la opción easy, y luego tenemos que decir, es obligatorio, que tenemos derecho para poder usar esa fuente, luego hacemos click en “download your kit” y se nos descarga un archivo con la fuente en los formatos interpretables por todos los navegadores, un fichero de css con el código para incluirlo en nuestro fichero de css y un fichero de demos para que veamos como se ven, y con esto ya tenemos la fuente de nuestro diseño en nuestra pagina, y visualizandose bien en todos los navegadores, includos dispositivos como iphone e ipad.

En el tema de las fuentes, hay una pagina web la cual puede convertirse en imprescindible para comprobar el resultado final del texto en nuestra web, y esta es http://www.typetester.org/.

En esta pagina tenemos tres columnas con texto, y podemos elegir en cada columna la fuente que queramos para ver como queda nuestro texto, cuando tengamos el que nos guste, le damos al boton de generar css y nos muestra el css necesario para que la fuente salga como queremos. Sobre esta web, seguramente hablaremos mas adelante.

Advertisements
This entry was posted by sbarrat.

One thought on “Embebiendo fuentes y no morir en el intento

  1. Pingback: Articulo Indexado en la Blogosfera de Sysmaya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s