3 formas sencillas de usar fuentes personalizadas en diseño web

Algunos visitantes que usais Firefox o Safari habeis notado que las tipografías de títulos de macoteca no son las típicas y algunos hasta nos habeis preguntado por mail, así que para quien le sirva os explico como usar vuestras propias tipografías al hacer páginas web, ya que efectivamente es una de las grandes “limitaciones” en este tipo de diseño.

Cuando se hacen páginas web se depende de las fuentes instaladas en el ordenador del visitante para mostrar nuestros textos, así que generalmente se establecen familias de fuentes típicas de Windows, Mac OSX y Linux basadas en las llamadas corefonts o en fuentes seguras para la web: Arial, Times, Helvetica, Georgia, Verdana, Trebuchet MS, Lucida, Tahoma o la vilipendiada Comic Sans como las más extendidas. Aquí tenéis un esquema de fuentes similares más o menos “usables” (combinandolas) en una web porque las tienen instaladas como mínimo el 35% de usuarios de Internet:

La forma de definir las fuentes con css es sencilla. Basta añadir a la hoja de estilos o al head algo tipo:

<style>

body {font-family:Helvetica,Arial,sans-serif} /* En orden de prioridad */

h2.una-clase {font:12px/16px Helvetica,Arial,sans-serif bold} /* resumiendo con tamaño/interlineado weight */

</style>

El problema es que si el usuario no tiene una fuente “Helvetica” preinstalada en su sistema operativo por ejemplo, verá una Arial, y así sucesivamente.

Método 1: insertar tipografías en una página mediante imágenes

Generalmente lo que se hace es limitar las tipografías especiales de una página a unos pocos titulares o elementos de la página y mostrarlos simplemente mediante imágenes que hemos generado en programas como Photoshop, Gimp o Pixelmator.

El formato extendido más legible con colores planos o limitados es el .gif, si además necesitamos transparencia el ideal es el .png, pero tened en cuenta que el explorer 6 no lo soporta sin parches como el pngfix y muchos otros (transparencias con explorer 6 en anieto2k). El jpg para textos debe optimizarse con cuidado.

Una vez tenemos las imágenes de los títulos es cuestión de colocarlos donde corresponda en vez del texto:

1. De la peor manera posible: titulares como imagen en el HTML

<h3><img alt=”texto” title=”texto” src=”imagen-del-texto.gif” width=”300″ height=40px /></h3>

Esta forma, aunque muy extendida, no es adecuada porque en realidad no funciona como imágen y además es la menos accesible incluso usando titles y descripción.

2. Colocando la imagen como fondo en un titular

Algo más correcto porque permite mantener el texto original en el html y que buscadores y personas con navegadores especiales “lean” estos títulos más fácilmente.

En el HTML ponemos nuestro título y un class para llamar al estilo. Yo añado un prefijo txt+lo-que-dice-titular para identificarlos facilmente después.

<h3 class=”txt-noticias-destacadas”>noticias destacadas</h3>

En los estilos ocultamos el texto que hemos puesto en el HTML y mostramos la imagen del títular

h3.txt-noticias-destacadas{

background:url(noticias-destacadas.gif) no-repeat; /*la imagen */

height:46px;line-height:46px;width:350px; /*altura y ancho del título con alto para ie */

overflow:hidden; /*eliminamos sorpresas si no cabe */

text-indent:-9999px /* ocultamos txt que pusimos en el HTML */

3. Tipografías como imágenes de fondo usando sprites css

Si vamos a usar en una misma página 5 títulos diferentes como imagen es mejor cargar una única imagen con todos los títulos y posicionarlos según nos interese. Con ésto hacemos una única petición al servidor, reducimos tamaño y además todos los títulos se muestran a la vez.

El proceso es similar al anterior. Primero generamos nuestros títulos en un programa gráfico. Con las guías vamos midiendo el top de cada título y los alineamos todos a un lado para mantener esta medida. Yo los separo un poco del 0 (los dejo a 10px) porque si alguna vez necesitamos evitar o ampliar un pequeño margen es más sencillo “mover” el títular que estructuras o elementos, o que andar añadiendo líneas de css:

Aquí vemos que tenemos una misma imagen con 3 títulos:

• Miden 30px de alto y 175px de ancho como máximo (usaremos la medida máxima)
• Alineados +10px a la izquierda
• El primero está a 0px, el segundo a 35px y el tercero a 70px

Ahora para colocar cada título por la página lo pondríamos de la siguiente manera:

<h3 class=”titulares-1 txt-noticias-especiales”>noticias especiales</h3>

<h3 class=”titulares-1 txt-lo-mas-buscado”>lo más buscado</h3>

<h3 class=”titulares-1 txt-otro-titulo”>otro título</h3>

Ponemos un class común, titulares-1 (por si tenemos varios conjuntos) en el que definiremos las propiedades comunes, y otro class con el nombre del título dónde posicionaremos cada uno.

.titulares-1 {background:transparent url(/txt/tit-index.gif) no-repeat;height:30px;line-height:30px;overflow:hidden;text-indent:-9999px}

.titulares-1.txt-noticias-especiales {background-position:-10px 0}

.titulares-1.txt-lo-mas-buscado {background-position:-10px -35px}

.titulares-1.txt-otro-titulo {background-position:-10px -70px}

Con ésto, podremos usando una única imagen que no suele ocupar más de 10kb colocar varios títulos con la tipografía que queramos y con la certeza de que el texto se presentará exactamente como queremos.

Método 2: usar cualquier fuente en una web usando SiFR

La herramienta más potente para mostrar nuestras propias fuentes en una web es SiFR. Gracias a esta herramienta podemos insertar mediante flash cualquier tipografía que se nos ocurra y mostrarla de manera accesible en nuestras páginas. El texto, a ojos del visitante y de los motores de búsqueda, funciona como texto seleccionable y legible.

Instrucciones para usar SiRf

El uso más sencillo es mediante jQuery y un generador de swf. Éste es el proceso:

• Descargas Jquery
• Descargas este plugin: jQuery SiFR o visitas su web para más info: thewikies
• Conviertes la tipografía que te guste a swf con Flash o con: Sifrgenerator, que lo hace sólo simplemente subiendo la fuente que quieras usar.

Bien, ahora tienes que instalar los componentes. Añade ésto a tu página para cargar jquery, el pluggin y los recursos que vayamos a usar. En éste caso aplicamos la fuente a todos los h3:

<script type=”text/javascript” src=”dir-donde-subas/jquery.min.js”></script>

<script type=”text/javascript” src=”dir-donde-subas/jquery.flash.min.js”></script>

<script type=”text/javascript” src=”dir-donde-subas/jquery.sifr.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$.sifr({ path: “ruta-a-swf-y-fuentes/”, save: true });

$(“h3″).sifr({ font: “GraublauWeb Bk BT” });

});

</script>

Con ésto los titulares h3 de tu web se mostrarán con la tipografía elegida usando Flash. El efecto es muy bueno y muy recomendable en algunos casos pero ten en cuenta que seguimos dependiendo del usuario porque debe tener instalado el plugin de flash (aunque sea muy común, en móviles por ejemplo no lo es). Además, lo estuvimos probando en producción en un portal de gran tamaño y el rendimiento y la carga se veían bastante “perjudicadas” con este tipo de titulares.

Usar cualquier fuente en diseño web con font-face

Firefox implementó la regla @font-face hace algún tiempo pero también funciona ya con Safari y es previsible que en breve lo vayan añadiendo Opera, Chrome y otros navegadores avanzados.

1. Subes la tipografía que vayas a usar al servidor, por ejemplo a un directorio al que llames “fuentes”. Recomiendo usar Openfont por aquello de los derechos de autor, aquí podeis descargar muchas: Openfontlibrary

2. Añades la regla a los estilos de tu página con las fuentes correspondientes:

@font-face {font-family: GraublauWeb;src: urlfuentes/Chalet.ttf) format(“truetype”)}
@font-face {font-family: GraublauWeb;src: url(http://www.macoteca.com/fuentes/GraublauWeb.otf) format(“opentype”)}
@font-face {font-family: GraublauWeb;src: urlfuentes/GraublauWebBold.otf) format(“opentype”);font-weight: bold}

3. Ahora simplemente tienes que definir a qué elementos quieres aplicar esas fuentes. Como no todos los navegadores lo soportan no olvides indicar alternativas a estos usuarios.

h2 {font-size: 22px;font-family: Chalet,Helvetica,Arial,sans-serif}
h3.destacado {font-size: 22px;font-family: GraublauWeb,Helvetica,Arial,sans-serif;font-weight:700}
h3 {font-size: 22px;font-family: GraublauWeb,Helvetica,Arial,sans-serif}