Fuentes Personalizadas (@font-face)

Normalmente, la selección de la tipografías a utilizar en una página web, se restringía a las fuentes estándar de sistema como Arial, Verdana, Times, Courrier, Tahoma, Trebuchet.
Esto era porque estas fuentes están  prácticamente en todas las computadoras.

Pero hoy por medio de CSS3, puedes utilizar cualquier fuente tipográfica dentro de tu sitio web, no solo las estandard. Aquí te enseño como hacerlo…

Si nosotros, por medio de CSS le especificábamos una fuente diferente a las estándar, y el usuario que visualizaba la página, no tenía la fuente instalada, el navegador la reemplazaba por alguna de las fuentes antes mencionadas.

Gracias a una nueva característica de CSS3, ahora podemos incluir cualquier fuente, ampliando generosamente las posibilidades de diseño de nuestro layout web.

Esta solución llegó de la mano de la regla font-face y lo que nos permite sencillamente es definir otra fuente que queramos usar, con la única condición de que la misma esté instalada en el servidor que alojará el sitio, o mejor dicho, que esté dentro de los archivos del sitio mismo.

Antiguamente admitía solo formatos de fuentes tipo .eot, pero con el paso del tiempo se ampliaron la posibilidades se soporte, comenzando con Safari 3,1. En la actualidad admite otros tipos de formatos tipográficos como son .ttf y .otf y funciona también con los navegadores Opera, Chrome y Firefox.

Lo que hace básicamente ela regla font-face es definir nuevas familias tipográficas dentro de nuestra hoja de estilos CSS.

La sintaxis CSS es muy simple, aquí un ejemplo:

@font-face {
 font-family: 'Alkidenz';
 font-style: normal;
 font-weight: normal;
 src: url('AkzidenzGrotesk-Cond.otf');
 }
H1{
 font-family: 'Alkidenz';
 }

Primero creamos una nueva familia llamada “Alkidenz” dentro de la propiedad “Font-family”.
Luego le damos estilo y peso normales (font-style, font-weight)
Y por ultimo con la propiedad “src: url();” definimos el nombre del archivo de nuestra fuente, el cual en este caso está en la misma carpeta que el archivo HTML y CSS.

Luego definimos que la etiqueta H1, usará la familia de fuente que acabamos de crear “Alkidenz”.

SOLUCION PARA INTERNET EXPLORER

Para que @font-face funcione en Internet Explorer debemos utilizar fuentes del tipo .eot.
Entonces debemos hacer uso de los condicionales del tipo IF, que ejecutan un código específico si detecta que estamos usando IE.
En ese caso, le indicaremos que use una fuente del tipo .eot.

NOTA: Para convertir fuentes .ttf a .eot, por ejemplo, podemos usar Font Squirrel Generator.

En este caso nuestro código CSS quedaría asi:

<style type="text/css">
 h1{
 font-family: 'Alkidenz';
 }
/* TODOS LOS NAVEGADORES MODERNOS*/
@font-face {
 font-family: 'Alkidenz';
 font-style: normal;
 font-weight: normal;
 src: url('AkzidenzGrotesk-Cond.otf');
 }
 </style>
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'Alkidenz';
src: url('akzidenzgrotesk-cond-webfont.eot');
}
</style>
<![endif]-->

Aquí los ejemplos:

Saludos!
Cristian
PSD a HTML Paso a Paso