Pagina Personal de Gustavo Falcón

octubre 16, 2010

@font-face. Tipografía para la Web (Webfont)

Por: Gustavo Falcón

Webfont

No poder hacer uso de la tipografía como elemento decorativo y de comunicación gráfica ha sido siempre una limitación en el diseño de paginas Web. Hasta hace muy poco si queríamos que nuestros diseños se vieran más o menos igual para todos los usuarios había que conformarse con unas cuantas fuentes que ya sabíamos que estaban  instaladas en la mayoría de los ordenadores, otra solución era la de convertir nuestros textos en imagenes que luego podiamos usar de fondo. El trabajo se complicaba cuando había que traducir esas paginas a diferentes idiomas, o necesitábamos que esos textos cambiarán dinámicamente. En el primer caso habia que crear esas imagenes en todos los idiomas, el segundo no tenia solución.

Durante estos años han ido surgiendo ideas muy ingeniosas para resolver el problema, pequeños “trucos” para engañar y obligar a los navegadores a mostrar nuestras fuentes, pero en su mayoría, al día de hoy, todas estas técnicas todavía presentan muchas limitaciones.

La más simple y flexible de todas estas tecnologías, la que ofrece mayor compatibilidad entre navegadores y parece tener un futuro como la solución definitiva al problema, es @font-face.

@font-face

En este articulo vas a entender como funciona @font-face, y te mostraré un sencillo método para implementar esta técnica en tu propia Web.

¿Que es @font-face? La teoría

Básicamente @font-face es una simple regla css incluida en tu pagina Web  que  enlazada directamente al archivo de una tipografía que previamente has subido a tu servidor. Esta regla es interpretada por el navegador que es el encargado de embeber la tipografía.

El metodo más conocido para implementar la regla @font-face se basa en el siguiente código:

/*Regla @font-face*/
@font-face {
 font-family: 'Mi fuente';
 src: url('mifuente.eot');
 src: local('☺'),
 	url('mifuente.woff') format('woff'),
	url('mifuente.ttf') format('truetype'),
	url('mifuente.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
/*Asignando la nueva tipografía a un elemento html*/
h1 {
	font-family: 'Mi fuente', 'Arial Narrow', sans-serif;
	color: #897048;
	background-color: #fff;
	text-shadow: 2px 2px 2px #000;
	font-size: 15px;
}

Vamos a explicarlo. Primero destinamos un nombre a nuestra fuente, es el nombre que usaremos cuando asignemos a cualquier elemento de texto de nuestra pagina la propiedad font-family, en el ejemplo le hemos puesto “mi fuente”, un nombre cualquiera, pero por una cuestión de lógica y para evitar conflictos debería coincidir con el nombre real de la tipografía. Finalmente le decimos al navegador donde esta alojada la fuente que queremos que sea embebida.

Habrás notado que en vez de cargar simplemente un archivo .ttf o un .otf,  estamos llamando además a varios tipos de archivos (woff, eot, svg) en realidad  son archivos de la misma tipografía convertida a diferentes formatos y esto hay que hacerlo así por un inconveniente, el de siempre: La incompatibilidad de los navegadores.

Aunque la regla @font-face esta incluida oficialmente en la especificaciones Css3 de la  W3C y ha sido ya incorporada a todos los navegadores modernos, cada uno de ellos la interpreta a su manera y necesita de un  formato de tipografía diferente:

  • Internet Explorer solo soporta EOT (.eot)
  • Algunas versiones de Firefox soportan OTF (.otf) y otras TTF (.ttf)
  • Crome soporta TTF (.ttf) y SVG (.svg)
  • Safari para el iphone o el ipad soportan SVG (.svg)
  • WOFF (.woff ) es el nuevo formato soportado por Firefox 3.6 y se comenta que en el futuro será el formato estándar para embeber fuentes en la web

Continuamos explicando el resto del código, justo debajo de la regla @font-face aparece una regla css común y corriente que nos hemos inventado para demostrar como una vez declarada  la regla @font-face se puede empezar a aplicar esta a los diferentes elementos de nuestra pagina.  A modo de ejemplo le hemos asignado a todos los titulares del tipo h1 la tipografía “mi fuente” seguida de otras fuentes más comunes que podrían funcionar en su defecto ( esto es por si algo fallara)

En el ejemplo he añadido a propósito la propiedad “text-shadow” que pone sombra debajo del texto, con ello quiero destacar que la combinación de @font-face y otros efectos como sombras, gradientes o transparencias, que han sido incluidos recientemente en las especificaciones Css3, ofrecen una solución y un control de la tipografía hasta ahora nunca visto.

Bueno, si has llegado hasta aquí seguramente estarás pensando en lo laborioso que sería tener que convertir tu tipografía a todos estos formatos. Afortunadamente ya hay soluciones para  resolverlo rapidamente y  lo vamos a ver con un ejemplo práctico, utilizando la herramienta online @font-face Generator

@fon-face en 3 sencillos pasos

@font-face Generator

@font-face Generator es una herramienta online totalmente gratis, que permite, a partir de uno o varias archivos tipográficos en formato .ttf o .otf, obtener, en tres sencillos pasos, el código y los archivos necesarios para que puedas implementar @font-face en tu pagina, con la garantía de que esta se vea correctamente en todos los navegadores.

Nuestro ejemplo

Vamos a crear una pagina donde usaremos dos tipografías open source. Podríamos usar cualquiera de nuestras fuentes siempre que sean libres de derecho o poseamos las licencias correspondientes ( Tipografía digital licencia de uso )

Tipografía Raleway [ Descargar ]
Tipografía Junction [ Descargar ]

Una vez descargadas las tipografías, nos dirigimos a la pagina de @font-face Generator, y realizamos los pasos descritos a continuación:

  1. Agregar los archivos fuentes

    Presionando el botón addFonts añadimos los archivos desde nuestro ordenador, pueden estar en formato .ttf o en .oft (eso da igual)

  2. Aceptar las condiciones

    Marcar este campo, es obligatorio y significa que somos concientes de que nuestra tipografía esta libre de derechos o la hemos adquirido legalmente.

  3. Descargar el paquete

    Una vez aceptadas las condiciones, aparecerá debajo el bótón Download your kit , haciendo clic en el obtendremos los archivos ya convertidos, y una pagina de ejemplo con los códigos necesarios para poder aplicar estas tipografías en nuestra propia pagina Web

Las reglas @font-face que hemos obtenido en nuestro ejemplo son las siguientes:

/*Regla @font-face*/
@font-face {
	font-family: 'RalewayThin';
	src: url('raleway_thin-webfont.eot');
	src: local('☺'), url('raleway_thin-webfont.woff') format('woff'),
	url('raleway_thin-webfont.ttf') format('truetype'),
	url('raleway_thin-webfont.svg#webfont7lM6WtMu') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
@font-face {
	font-family: 'JunctionRegular';
	src: url('junction_02-webfont.eot');
	src: local('☺'), url('junction_02-webfont.woff') format('woff'),
	url('junction_02-webfont.ttf') format('truetype'),
	url('junction_02-webfont.svg#webfont8tPLjOKT') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
/*Creando clases para aplicar estas reglas*/
 
.RalewayThin {
			font-weight: normal;
			font-style: normal;
			line-height:normal;
			font-family: 'RalewayThin', sans-serif;
			font-size-adjust: 0.52;
		}
 
.Junction {
			font-weight: normal;
			font-style: normal;
			line-height:normal;
			font-family: 'JunctionRegular', sans-serif;
			font-size-adjust: 0.55;
		}

Otras opciones para implementar @font-face:

¿No quieres complicarte la vida convirtiendo tipografías? Aquí tienes algunos servicios que harán esta tarea aún más fácil.

FontSquirrel Kit

FontSquirrel

Si no queremos usar nuestras propias fuentes FontSquirrel nos ofrece cientos de tipografías libres de derecho que no será necesario convertir, porque se nos permite descargar el Kit o el paquete con todos los archivos y el código necesario.

Librería de fuentes FontSquirrel


Awesome Fontstacks

Awesome Fontstacks

Esta herramienta es muy útil, nos permite visualizar las fuentes disponibles en FontSquirrel a la vez que sugiere mediante ejemplos de estilos una combinación de fuentes optima para obtener los mejores resultados.

Awesome Fontstacks


Google Font Directorio

Google Font API

Un servicio de Google para implementar @font-face, donde se puede elegir entre un número todavía bastante limitado de fuentes (prometen aumentar su número en los próximos meses), pero de muy buena calidad y la ventaja de que el código que te proporcionan no requiere que la tipografía este alojada en tu propio servidor.

Google Font Directorio
Google Font API
Visor de Fuentes
Fontcomparer


Conclusiones

Antes de ponerte manos a la obra ten en cuenta un aspecto fundamental,  comprueba que la tipografía que quieres usar este lo más completa posible, que reúna los caracteres necesarios para el idioma que vas a mostrar, los acentos o los estilos…

Deberías saber que existen muchos servicios de pago por mesualidades o de pago único que ofrecen una amplia variedad de tipografías de alta calidad. Previo pago, estos servicios se hacen responsables de las licencias de la fuente y te proporcionan el código @font-face que podrás usar en tu pagina,  en todos los casos, la tipografía no estará alojada en tu servidor.

Con la combinación de @font-face y el resto de las reglas CSS3 se pueden lograr diseños verdaderamente hermosos.


13 Comentarios

  1. Leticia dice:

    Es una novedad para mi y una buena solución. En mi caso, por ejemplo, a veces necesitaba una tipografía concreta que se usa en el ambiente educativo (Escolar) y tenía que conformarme con poner el texto en arial o Times New Roman, cuando realmente necesitaba los rasgos de manuscrito que aporta la escolar. El tutorial es perfecto y está explicado paso a paso de manera excelente. ¡Me encanta! ¡Gracias!

  2. Zacarías Calabria dice:

    Gustavo,

    ¡Qué interesante artículo! y qué bien explicado.

    Ya era hora de deshacerse de la tiranía de Verdanas y Ariales ;)

    Un saludo,

    z.

  3. Alejandro dice:

    Hola Gustavo, pues andaba por ahi surfeando y me he encontrado tu sitio destacado en bestcssdesign.com Me sorprendio muchisimo que seas cubano (yo tambien lo soy, de Holguin) pero mas me sorprendio que te dediques a esto sin haber ido a la escuela de diseño en Cuba, lo cual por supuesto no es un impedimento pero tiene tremendo merito. Yo soy graduado de Diseño Industrial en el ISDI pero desde que llegue aqui a USA me he apasionado por el diseño web al igual que tu. Felicidades por tu trabajo y saludos de un compatriota.

    Alejandro

    • Alejandro si que levantas una piedra salen tres cubanos :) . Casualmente yo estudie en una universidad que esta en tu provincia natal, justo en Moa (ISMM) aunque termine los estudios en la Habana. Me alegra conocerte. Ahora ya estamos en contacto. Te he envíado un email comentadote y preguntandote otras cosas. Un abrazo y gracias por tu opinión.

  4. No se si sería acertado decir que la regla Fontface es a la tipografía web, lo que el Css al Html pero en fin es libertad y eso en diseño es simplemente una delicia, enhorabuena, porque gracias a que tu blog está destacado en el Showcase de Graph Paper Press lo he descubierto.
    Un blog limpio y directo; sencillamente cojonudo !

    Un saludo

  5. Ramon dice:

    Muy buena la explicación y muchas gracias por los recursos que nos dejas muy utíles para comenzar a experimentar un poco del WOFF y claro la solución para ver en los diferentes navegadores excelente….

  6. María Inés dice:

    Buenísima la explicación!!!!!!!!! No soy muy original, todos lo han dicho ya, pero por eso no deja de ser cierto! Solo quería hacerte una pregunta, qué significa “src: local(‘☺’)” que has puesto en el script? ¿Por que la “carita”?
    Muchas gracias!!!!

    • María perdona que responda tu comentario tan tarde pero juro que no lo habia visto. lo de carita no tengo ni idea supongo que sea idea del creador de codigo, por lo de @font-face “face” de cara, podría ser :-)

  7. DA5H dice:

    Excelente trabajo bro… Muy buen articulo, bien explicado… salu2

  8. Iván dice:

    Muy buen post. No conocía Awesome Fontstacks y me ha parecido muy útil. Aunque realmente font-face se está haciendo muy popular el problema de renderizado de las fuentes dependiendo del sistema operativo todavía hace que su uso no sea todo lo consistente que pudiésemos desear. Hay que buscar mucho para encontrar una fuente con un suavizado decente en todos los sistemas.


Escribe un comentario:





Todos los contenidos © Copyright 2014 por Acuapixel. Diseño Web, diseño gráfico.
Subscribete a nuestro RSSEntradas y Comentarios

Diseñado por: Gustavo Falcón
Gracias a WordPress y Graph Paper Press