@font-face: crea webs utilizando cualquier tipografía

Si quieres usar una fuente (o tipografía) en tu página web que no sean las típicas Arial, Verdana, Helvetica, etc. o quieres despreocuparte de si el usuario la tiene o no instalada, puedes usar la etiqueta de css @font-face.

Font-face te permite incrustar cualquier fuente en en css para luego usarla llamandola con font-family

Ejemplo de fichero CSS uasndo @font-face:


@font-face {
	font-family: 'fontname';
	src: url('fontname.eot');
	src: local('☺'), url(data:font/woff;charset=utf-8;
	    base64,d09GRgABAA ...   UKw==) format('truetype'), 
	    url('fontname.svgz') format('svg'), 
	    url('fontname.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.test {
	font-family: fontname;
}

Una genial idea es la de los creadores de http://www.fontsquirrel.com
Fontsquirrel, a parte de poseer una maravillosa biblioteca de fuentes “comercial-use free”, tiene un generador y conversor online de fuentes que nos creará un kit con todo lo necesario para subir al server y usar las que le digamos. Es decir, que será Fontsquirrel quien nos creará todo el código CSS del @font-face.

Cada uno que escoja las que mejor le convengan. Y prestando especial atención a la sección “Subsetting” por que desde ahí podremos decir para que lengua en especial queremos la fuente.