Seguramente has visitado muchos sitios y has visto fuentes fantásticas, tipografía que no habías visto en otro sitio a menos que fueran en imágenes, lo que seguramente no sabias es que este tipo de fuentes están adheridas de forma externa a los sitios web, y nosotros vamos a enseñarte a hacerlo en pocos pasos.

Como diseñador debes saber que hay pocos tipos de fuentes que la mayoría de los browsers pueden leer sin dificultad, si no las sabes, estas son las 5 principales:

• Arial
• Times
• Helvética
• Verdana
• Trebuchet

Estas fuentes son usadas comúnmente por lo anterior mencionado, pero hay nuevas formas que te permiten adherir nuevas fuentes, y con esto se abren nuevas posibilidades para trabajar con los diseños. Una de las formas con las que se comenzó agregar tipografías externas fue subirlas a una carpeta del website y por medio de una llamada de Font-face por medio de CSS se podía acceder a las fuentes deseadas, esta es la forma que hoy vamos a checar.

Para esto vamos a ir al sitio fontsquirrel en la parte de fontface, aquí tu podrás ver toda la serie de fuentes que pueden ser descargadas del sitio para ser agregadas en tu website.

1. Lo que vamos a hacer es descargar cualquier kit que se nos haga interesante, yo descargare VTC Letter Pro.

2. Cuando tengamos descargado el kit vamos a subirlo por FTP, web o SVN al sitio que deseemos probar la fuente. Si estas desarrollando en modo local, puedes subir los archivos a la carpeta de tu tema.

3. Ya que tenemos arriba la fuente lo que vamos a hacer es abrir el archivo de CSS con el que estemos trabajando, en caso de que estés trabajando con el estilo dentro del header de cada hoja, debes meter los códigos dentro de la etiqueta < Style >

4. Cuando tengamos ya la fuente arriba y el estilo abierto, vamos a agregar el siguiente código para que el diseño reconozca la fuente

@font-face {
     font-family: 'VTC Letterer Pro';
     src: url('TU-URL/VTC Letterer Pro-webfont.eot?') format('embedded-opentype');
	}
	
@font-face {
    font-family: 'VTC Letterer Pro';
    url(data:font/truetype;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('truetype'),
    url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('woff'),
    url('VTC Letterer Pro-webfont.svg#svgFontName') format('svg');
}

5. Ya que hayamos agregado la fuente y el sistema nos la reconozca, lo siguiente que vamos a hacer es la parte fácil, cuando llamemos una clase, ya solo deberemos poner el nombre de la fuente que agregamos para que se nos muestre; por ejemplo si queremos que en los tags h3 aparezca la tipografía vamos a hacerlo de esta manera

h3 {

Font-family: VTC Letterer Pro;

}

Como verás, agregar fuentes externas por medio de este sistema es muy fácil y con un poco de práctica, llega a ser muy rápido, ahora lo único que queda es que lo comiences a utilizar en tus siguientes desarrollos.