Thader Consultores

Martes, 06 de Marzo de 2012 14:35

Fuentes no estándar en todos los navegadores

por  David Lozano
  • Imprimir
  • E-mail
  • Comentar

Todos estamos acostumbrados a las tipografías o fuentes típicas en páginas web. Arial, Helvetica, son estándares, que reconoce cualquier navegador. Pero cuando diseñas un sitio web, muchas veces quieres que el texto, o al menos los títulos, se vean distintos, aportando un grado de diseño que mejore el resultado final.

Las soluciones para agregar fuentes distintas son variadas, desde insertar una imagen (no muy recomendable porque hace que la página pese más y hace que los buscadores no puedan “leer” el texto), usar herramientas como Cufón o usar @font-face en la hoja de estilos CSS. Esta última solución es la que explicaremos aquí, ya que parece la más estándar, sencilla y robusta.

@font-face sólo requiere unas cuantas líneas de código CSS, sin usar herramientas externas ni nada más. Lo primero que se necesita es tener el archivo de la fuente, en este caso tendremos la fuente Quicksand.otf, que descargamos y subimos a nuestro servidor. El código para poder usarla es:

@font-face {
    font-family: Quicksand;
    src: url('fonts/Quicksand.otf');
} 

Este código le da un identificador a la fuente para poder ser usada en el resto de nuestro CSS. Esa es la primera línea, la segunda establece la URL donde está el archivo con la fuente, en este caso en nuestro servidor en la carpeta fonts. A partir de aquí puedes usar la fuente donde se quiera como se haría normalmente:

font-family: Quicksand, Georgia, “Times New Roman”, serif;

Recordad que el navegador usará la primera fuente, y si esta no se puede usar por cualquier motivo, lo intentará con las siguientes.

Esto debería ser todo lo necesario para poder usar cualquier tipo de fuentes en nuestra web, pero no es así. Todos los navegadores modernos entienden el comando @font-face, pero el problema es que no todos los navegadores trabajan con los mismos tipos de archivos de fuentes. Unos, como Firefox, entienden el formato .otf, mientras que Internet Explorer entiende .eot. Además, cada navegador o sistema operativo puede mostrar las fuentes de forma un poco distinta unos de otros. Ante esta disparidad hay que configurar nuestro CSS con @font-face con una serie de parámetros en mente:

@font-face {
    font-family: 'Quicksand';
    src: url('Quicksand.eot'); /* IE9 Compat Modes */
    src: url('Quicksand.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Quicksand.woff') format('woff'), /* Modern Browsers */
         url('Quicksand.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Quicksand.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Esto lo que hace básicamente es hacer que IE comprenda la primera línea y no siga cargando formatos. Para los demás navegadores, cada uno entenderá el suyo y no cargará la fuente correspondiente. Para una mejor explicación de esta “receta” podéis leer el post original en Fontspring.

Podéis conseguir fuentes gratuitas para usos comerciales en Font Squirrel, donde también tienen un utilísimo generador de los distintos formatos de fuetnes para @font-face a partir de un archivo.

Temas relacionados (por etiqueta)

Dejar comentario

Asegúrate de haber leído nuestra Política de privacidad antes de publicar cualquier comentario.

Los campos marcados con (*) son obligatorios.

Publicaciones del blog

No te pierdas las últimas publicaciones en el blog:

Thader Consultores

Thader Consultores