Categorías: Diseño Web Recursos Tipografías

Fuentes Web, soluciones y como utilizarlas

Cada día son mas las paginas que utilizan HTML5 y CSS3, y también los navegadores cada vez ofrecen mayor compatibilidad con estos estándares web, una de las características que estos estándares integran es el soporte para fuentes web desde el servidor via CSS utilizando @font-face y no desde el cliente (la maquina del usuario).

Antes en diseño web los diseñadores nos teníamos que limitar a utilizar fuentes comunes que podían ser visualizadas desde cualquier navegador y sistema operativo, las más comunes eran: Arial, Times New Roman, Impact, Serif, Andale Mono, Trebuchet MS y Verdana.

En la actualidad las necesidades en diseño web, son distintas y los diseñadores buscamos poder utilizar tipografías mas estilizadas que tengan un mayor impacto visual en los visitantes, para lograr esto han aparecido en los últimos años algunas herramientas, de las cuales vamos a hablarles un poco y como utilizarlas.

sIFR

Los diseñadores siempre peleamos la posibilidad de usar otro tipo de fuentes mas estilizadas en nuestros diseños sin tener que usar imagenes, al principio la primera alternativa que salió fue sIFR que te permitia utilizar otras fuentes diferentes a las básicas mediante Flash, esta te permitia embeber un objeto flash el cual imprimia tu texto con la fuente que previamente le habías configurado en el código.

Pero el primer problema como siempre con Flash era que aumentaba el consumo de recursos del servidor y en ocasiones la compatibilidad del navegador provocaba que el texto saliera en blanco, y por ultimo sIFR ha quedado rezagado ya que Flash no es compatible con los navegadores para móviles y la gran mayoría de estos le han dado la espalda al soporte para Flash, de este modo sIFR se ha convertido en una alternativa pero que no es “todo terreno”.

Pero como todo, el desarrollo y la integración de los estándares en los navegadores cada vez fue mayor, y también surgió un problema el 90% de los usuarios que teníamos una enorme biblioteca de fuentes las teníamos en formatos legibles para nuestro sistema operativo especifico, y en web los navegadores entre su guerra había optado por ofrecer soporte para distintos formatos: EOT, WOFF, SVG, etc.

Como utilizar sIFR 3.0

Descargar la ultima versión de sIFR (Actualmente es 3.436 estable) (Link)
Sube lor archivos que descomprimiste del archivo que descargaste y agrega el siguiente código HTML, entre las etiquetas <head>

<link rel="stylesheet" href="sifr.css" type="text/css">

<script src="sifr.js" type="text/javascript"></script>

<script src="sifr-config.js" type="text/javascript"></script>

<script type="text/javascript">

var cochin = { src: 'cochin.swf' }; //Debes subir el archivo cochin.swf que

hace referencia a tu fuente, la cual debiste embeber en el SWF utilizando Flash.

sIFR.activate(cochin); // From revision 209 and onwards

sIFR.replace(cochin, { selector: 'h1' });

</script>

Por ultimo en tu archivo CSS debes incluir esto para asignar tu fuente a las etiquetas deseadas.

.sIFR-active h1 { visibility: hidden; font-family: Verdana; line-height: 1em; font-size: 18px; }

Convertir fuentes TTF a EOT

Entonces aparecieron las aplicaciones para convertir fuentes TTF (las mas comunes) a estos formatos, pero eran muy complicadas o costosas, entonces los usuarios exigimos algo de acuerdo a nuestras necesidades, porque claro no todos los diseñadores gráficos o web somos programadores o expertos frente a una computadora.

Tras las exigencias aparecio Font Squirrel con un convertidor de fuentes, el cual permite convertir fuentes TTF a EOT y los otros formatos ofreciendo la posibilidad de utilizar nuestras fuentes en nuestra pagina web utilizando @font-face de tal modo que todos los usuarios vean el mismo estilo tipografico en nuestro diseño y que puedan interactuar con el texto copiando y seleccionando los fragmentos deseados, pero (mas peros) ahi no acaba también tiene sus carencias el sistema de Font Squirrel y no quiere decir que sean errores o este sea malo, de hecho no son carencias es respeto a las licencias, el convertidor para fuentes web no permite convertir cualquier fuente, por ejemplo si intentas convertir Helvetica para Web el sistema no te va a dejar porque esta tiene licencias comerciales que no permiten dicho proceso. Para entonces CSS3 ya se empezaba a esparcir cada vez mas por la web, entonces en Font Squirrel empezaron a generar un repositorio de fuentes web gratis que podemos descargar para utilizarlas en nuestro equipo o podemos descargar los formatos necesarios para utilizarlas en nuestra pagina web, este movimiento fue algo genial para muchos diseñadores.

Como utilizar fuentes descargas de Font Squirrel utilizando @font-face

Ir a Font Squirrel y descargar la fuente que deseas o convertir tu fuente (generador).
Ahora sube la fuente que descargaste o creaste a tu servidor
Y en el archivo CSS debes incluir un código similar a este, recuerda reemplazar “myfont-webfont” por el nombre de archivo de la fuente que subiste.

@font-face {
 font-family: 'MyFontFamily_Squirrel';
 src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
      url('myfont-webfont.woff') format('woff'),
      url('myfont-webfont.ttf')  format('truetype'),
      url('myfont-webfont.svg#svgFontName') format('svg');
 }

Por ultimo para utilizar tu fuente en las etiquetas que desees utilizaras el valor que asignaste en el parametro font-family dentro del código mencionado anteriormente, ejemplo:

h1 { font-family: ‘MyFontFamily_Squirrel’, Arial, serif; font-weight: 400; }

Más información de como utilizar @font-face en: font spring

Este metodo tiene la limitante de compatibilidad con los navegadores web, sin embargo la gran mayoría de los navegadores modernos ya ofrecen soporte para @font-face, he aquí la lista: Safari 5.03+, IE 6-9+, Firefox 3.6-4+, Chrome 8+, iOS 3.2-4.2+, Android 2.2-2.3+, Opera 11+

Google Web Fonts

Y llego el grande, Google lanzo Google Web Fonts que en teoría ofrece el mismo servicio que Font Squirrel pero no, Google fue un poco mas halla, si para implementar las fuentes que descargabas necesitabas agregar 10 lineas en tu archivo CSS, google simplifico esto, y en su servicio ofreció la posibilidad de insertar fuentes web en tu pagina unicamente insertando un fragmento de código HTML, sin duda Google llego y ofreció mejores características, entre ellas: Simplifico la forma de uso y puso sus servidores para que no tengamos que descargar las fuentes y subirlas a nuestro servidor, de esta manera reducio el tiempo de carga de nuestras paginas.

El servicio de Google elimino la necesidad de descargar y subir archivos al servidor, también la necesidad de utilizar @font-face.

También Google ofrece la posibilidad de descargar las fuentes para utilizarlas en nuestro equipo, actualmente el directorio de fuentes gratis en Google Web Fonts incluye un total de 436 tipografías y la verdad son muy buenas, a diferencia del directorio de Font Squirrel muchas de las fuentes publicadas en Google Web Fonts son exclusivas del directorio.

Como utilizar Google Web Fonts

Debes entrar a Google Web Fonts
Selecciona la tipografía que deseas utilizar en tu pagina.

Quick Use: Si solo utilizaras una fuente
Add to Collection: Si utilizaras mas de una.
En la opción QuickUse se abrira otra pagina baja y encontraras un código similar a este:

<link href=’http://fonts.googleapis.com/css?family=Mrs+Saint+Delafield’ rel=’stylesheet’ type=’text/css’>

Copia y pega tal cual entre las etiquetas <head> </head> de tu pagina, de este modo tu pagina le pedira a Google las fuentes que seleccionaste.
Ahora en tu CSS para aplicar las fuentes seleccionadas a tus etiquetas, en las propiedades CSS de font-family unicamente tendrías que añadir el nombre de tu fuente, por ejemplo:

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

Listo de este modo tu sitio ya estaría mostrando las fuentes que seleccionaste, a estas fuentes puedes cambiarles el color, tamaño o agregarles efectos CSS tal como si lo hicieras con una fuente normal.

Otras soluciones que ofrecen fuentes web gratis y con costo

OpenType

Las tipografías usualmente poseen las características básicas, como Mayúsculas, Minúsculas, numerales, símbolos de puntuación y acentuación, sin embargo las tipografías profesionales tienen aun más características que permiten que las tipografías tengan mas estilo, algunas de las características extras son:

Common ligatures	“liga”
Discretionary ligatures	“dlig”
Small caps	“smcp”
Lining numerals	“lnum”
Old-style numerals	“onum”
Swash alternates (index number)	“swsh” n
Styleset (01–20)	“ss01–20”

CSS3 tiene soporte para utilizar estas caracteristicas sin embargo no asi todos los navegadores, los navegadores que ofrecen soporte a estas características son Firefox, Internet Explorer 10 y Google Ghrome para Windows, la siguiente imagen muestra un ejemplo utilizando la tipografía Magneta.

Como afecta OpenType en los programas de diseño? Bueno las siguientes tablas te dan una idea de en que programas puedes hacer uso de estándar para tipografías.

Mac OS
Application	OpenType Support
Microsoft Word®	Basic
Adobe InDesign®	Basic, Multilingual, Advanced
Adobe Photoshop®	Basic, Multilingual, Advanced
Adobe Illustrator®	Basic, Multilingual (.ttf only)
Quark XPress®	Basic
Macromedia Freehand®	Basic
Corel Draw®	Basic, Multilingual

Microsoft Windows
*Application*	*OpenType Support*
Microsoft Word	Basic, Multilingual (.ttf only)
Adobe InDesign	Basic, Multilingual, Advanced
Adobe Photoshop	Basic, Multilingual, Advanced
Adobe Illustrator	Basic, Multilingual (.ttf only)
Quark XPress	Basic
Macromedia Freehand	Basic
Corel Draw	Basic, Multilingual

Como utilizar OpenType en Web

Es muy sencillo en este caso no tenemos que instalar nada, solo agregar algunas lineas a nuestro código CSS, lo unico que necesitamos es que los navegadores del lado del cliente ofrezcan soporte para estas características y claro que las fuentes posean alguna de las características mencionadas arriba, les dejo el snippet:

h1 {

-moz-font-feature-settings: "liga=1, dlig=1";

-ms-font-feature-settings: "liga", "dlig";

-webkit-font-feature-settings: "liga", "dlig";

-o-font-feature-settings: "liga", "dlig";

font-feature-settings: "liga", "dlig";

Más Información sobre Open Type:

Espero que este articulo sea de utilidad para ustedes, hemos intentado cubrir la mayoría de los aspectos y principales fuentes para el uso tipografías en Web y como utilizarlas, así como OpenType un estándar que se empieza a utilizar con CSS3 que permitira agregarles aun mas estilo a las tipografías que usemos.

Corre la voz con tus amigos/contactos: