Es costoso ser original a la hora de diseñar una página web. Muchas veces te encuentras con una barrera tecnológica que no te deja liberar a tu imaginación. Los estándares de HTML5 nos llegan en cuenta gotas, y no todos los navegadores van al mismo ritmo. Sin contar el nuevo paradigma de los smartphones. Solo te queda asumir que no es el momento de poner en práctica tu idea o ingeniártelas con técnicas más tradicionales: combatir con el código (JS, JQuery, plugins...), y rezar a los dioses paganos para que funcione todo bien en los navegadores. Sin contar a Internet Explorer.

En este tutorial hablaremos de una forma de insertar nuestra fuente TTF en nuestro diseño. Haciendo que sea compatible con todos los navegares más populares, dándonos la oportunidad de hacer una página más atractiva.

La forma más fácil de incluir una fuente, utilizada por la gran mayoría de webmasters, es utilizando un servicio externo, como Google fonts . Es cómodo y fácil. Además de que cargarás menos a tu servidor. Con tan solo un par de líneas de código podrás tener una fuente de su lista funcionando. ¿Por qué entonces tener tus fuentes en local? Si cae ese servicio, tu diseño también. E incluso, en el peor de los casos, podría hacer que tu web fuera inaccesible ya que podría descolocar algún botón. Por otra parte, no estas limitado al catálogo que te ofrece Google, sino que puedes utilizar cualquier fuente que puedas crear o descargarte.

Autogenerar archivos

Lo primero que necesitamos en convertir nuestra fuente a un formato válido para todos los navegadores. Ya existe una página que nos lo adaptará y nos generará el código automáticamente.

Entramos en el siguiente enlace.

http://www.font2web.com/

Nos llevará aquí.

FuentesWeb1

Utilizaré para este ejemplo la fuente jennifer.ttf. La seleccionamos desde la web y pulsamos en Convert & Download.
Nos devolverá un archivo ZIP que descomprimiremos. Dentro habrá 4 archivos. El contenido será similar al siguiente.

FuentesWeb2

 

Solo nos interesa la carpeta fonts y el estilo fonts.css. Los otros los podemos borrarlos.

Código HTML

Vamos a crear un archivo html con el nombre, por ejemplo, de fuente.html ; lo colocaremos al mismo nivel de los archivos anteriores. Dentro pegaremos el siguiente código.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="fonts.css" type="text/css" charset="utf-8" />
<style type="text/css">
.claseFuente {
font-family:'Conv_jennifer',Sans-Serif;
}

</style>
</head>
<body>
<div class="claseFuente">
Texto con fuente propia.
</div>
</body>
</html>

Es el código mínimo para que funcione. Básicamente lo que hace es enlazar el estilo fonts.css (la primera línea en negrita). Después se hace una clase con un font-family; indicando el nombre de la fuente propia y una fuente en el caso que no se encontrara (segunda línea en negrita).

Si todo ha ido bien deberíamos ver como la fuente ha cambiado el texto.