Si te dedicas a hacer paginas web o ha hacer plantilla para algún CMS como pueden ser Joomla, WordPress o Drupal seguro que mas de una vez has querido o directamente te han exigido utilizar una fuente de letra en concreto para ciertos lugares de dicho trabajo pero claro,la cantidad de fuentes admitidas por defecto por HTML y CSS es bastante corta y no se suele ajustar a las necesidades y por tanto la solución pasaría por crear un puñado de imágenes con dichos títulos o secciones y con los problemas de mantenimiento que tendría en ese aspecto.
Hoy te traemos la solución a tus problemas y es cargar desde nuestro archivo CSS la fuente que nosotros queramos. Para ello vamos a hacer uso de la propiedad font-face. Antes de nada deberemos de tener la fuente que queramos utilizar a mano y a ser posible en formato .ttf y .eot (para algunas versiones de Internet Explorer). La forma fácil de pasarlo a este formato si lo tenéis en otro distinto es utilizar un convertidor online como por ejemplo: El convertidor- Convertidor de fuentes.
Teniendo la fuente por tanto ya convertida pasemos a la acción poniendo como ejemplo que nuestra fuente se llama Tecnodiseno.ttf . Nuestro primer paso será utilizar la propiedad font-face para después pasar a asignarla a algún elemento. Por tanto en nuestro documento css escribiremos lo siguiente:
@font-face {
font-family: "Tecnodiseno";
<code>src: url(fonts/Tecnodiseno.eot); /* IE */</code>
src: url(fonts/Tecnodiseno.ttf) format("truetype");
}
Con esto ya estaría cargada nuestra fuente y por tanto solo quedaría cargar la misma por ejemplo para los enlaces con el siguiente código:
a
{
font-family: "Tecnodiseno", sans-serif;
}
Este recurso ha sido probado en Firefox, Opera,Safari, Chrome e IE en sus ultimas versiones y funcionando perfectamente. Si deseas tener mas información para que funcione en otras versiones solo tienes que dejarnos un comentario y te ayudaremos en todo lo posible.
