Configurar tipo de letra en CSS en nuestra Web.

Al realizar programación Web, una parte importante de un diseño atractivo suele ser los tipos de letras que establecemos en ella.

Siempre que estos tipos de letras sean standard no tendremos problemas de incompatibilidad. Pero, ¿qué hay de aquellos tipos de letras menos conocidos e igualmente usados?
Lo más normal es usar el atributo de CSS llamado font-family que establece el tipo de letra que vamos a usar para un determinado elemento. ¿Cómo funciona este atributo?

Para explicar su funcionamiento usaremos el siguiente código:

#titulo{
        font-family: Kunstler Script, Comic Sans, Arial, Times New Roman;
}

Este código CSS cargará en el elemento denominado título el tipo de letra Kunstler Script en primer lugar. El navegador del cliente buscará en el equipo el tipo de letra cargado. Si lo tiene instalado lo cargará pero si no lo tiene cargará el siguiente especificado (en nuestro caso Comic Sans) y repetiría el proceso de comprobar si está instalado en el equipo del cliente.

Entonces, ¿qué podemos hacer para establecer un tipo de letra no standard que independientemente de si está instalado en el equipo del cliente o no lo cargue en la web?

Para hacer esto podemos crear una familia de fuente propia especificando donde se encuentra el archivo de fuente.


@font-face {
font-family:"fuente_web";
src: url("http://www.miweb.com/KUNSTLER.TTF");
}

#titulo{
        font-family: "fuente_web";
}

Con este código hemos establecido un nuevo tipo de font-family denominado "fuente_web", indicándole cual es el archivo de fuente que va a usar y donde se encuentra (en el fichero raíz de la web y el archivo KUNSTLER.TTF).

Así, en caso de que el equipo no tenga instalado el tipo de letra que queremos usar lo cargará desde la web y no desde el equipo; por lo que lo mostrará sin problemas.

Saludos curiosos.