Usa tus propias fuentes con CSS

Desde siempre nos han enseñado que el HTML se basa en la procesación del trabajo por parte del navegador y los recursos de la máquina cliente. Por tanto, se trasmite texto plano y se le daba forma con las fuentes instaladas en el ordenador del navegante. Lo máximo que podíamos conseguir era definir unas familias tipográficas según nuestra preferencia y, si estaban instaladas, ser usadas por el navegador a la hora de mostrar la información en pantalla. La alternativa era, si queríamos expresamente utilizar una fuente determinada, utilizar imágenes en lugar de texto o bien usarlas en animaciones Flash.

Pero esto se acabó. Utilizando la propiedad @font-face podemos incorporar y utilizar la fuente que queramos mediante reglas CSS. Esta propiedad existía hace tiempo, pero no es hasta ahora que podemos considerarla prácticamente implementada por todos los navegadores. Yo, de hecho, la estoy incorporando a mi nuevo website personal que ya está en modo beta. Para el tipo de fuente, puede usarse en formato OpenType (.otf) o bien, en formato Truetype (.ttf).

Cómo utilizar @font-face

@font-face {
font-family: "ComunidadAbeto";
src: url(http://url-donde-se-encuentra-la-fuente/comunidadabeto.ttf) format("truetype");
}
h1 { font-family: "ComunidadAbeto", sans-serif }
@font-face {
font-family: "ComunidadAbeto";
src: url(http://www.midominio.com/fuente/kimberle.ttf) format("truetype");
}

De esta forma tendríamos que implementar @font-face dentro de nuestro fichero .CSS para utilizarlo. Obviamente, deberemos tener la fuente que queremos emplear dentro de la nube y detallar su posición exacta. Igualmente, daremos una alternativa por si no estubiera disponible.

Si deseemos aplicar @font-face en Internet Explorer 6, sin usar formato “.otf” (ya que éste es el único que soporta), deberíamos bien convertir nuestra TrueType a este formato o bien debemos aplicar comentarios condicionales, además del que tengamos para los navegadores modernos. O directamente pasar de ello y no dar soporte para este prehistórico navegador.