[Tips] Ocupar CSS3 Font-Face con Webmatrix (IIS7 Express)
Los browsers permiten el uso de una determinada lista de fuentes, las que deben estar instaladas en el cliente, cualquier otra fuente que estemos ocupando debería estar también instalada en el cliente, de otro modo, se reemplazará por la fuente por defecto. Muchas veces ocupamos imágenes como letras, pero esto es terrible para los contenidos.
Existe una forma sencilla de poder utilizar cualquier fuente para nuestras páginas web, solo basta con que se referencie la ubicación del archivo de fuentes, un ejemplo puede ser:
<style type="text/css">
@font-face
{
font-family: 'chalalo';
src: url('/Dearest-webfont.woff');
font-weight: normal;
font-style: normal;
}
.demo {
font:20pt chalalo,sans-serif;
color:blue;
background-color:#ebdada;
}
</style>
Definimos una clase con la fuente que especifica el tamaño y el nombre que definimos anteriormente en la declaración @font-face. Luego definimos un elemento con ese estilo:
<body>
<p class="demo">Esto se verá con una nueva letra</p>
</body>
Y el resultado:
Cabe destacar que IE9 es totalmente compatible con los archivos de fuente woff, pero para asegurar compatibilidad con otros navegadores (y navegadores más antiguos)
@font-face {
font-family: 'chalalo';
src: url('fuentes/Dearest-webfont.eot');
src: url('fuentes/Dearest-webfont.eot?#iefix') format('embedded-opentype'),
url('fuentes/Dearest-webfont.woff') format('woff'),
url('fuentes/Dearest-webfont.ttf') format('truetype'),
url('fuentes/Dearest-webfont.svg#DearestRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Teniendo en la carpeta fuentes todos los archivos de fuentes soportados por los distintos navegadores:
Ahora, cuando lo probamos con Webmatrix utilizando IIS 7 Express es posible que veamos el siguiente error:
Como vez un error 404 que no encuentra el archivo woff, sin embargo este SI SE ENCUENTRA EN LA RUTA!, entonces no se muestra correctamente la fuente (se reemplaza por la predeterminada)
La solución es muy simple, y se debe a que no está definido el mimeType dentro del archivo de configuración de IIS7 Express, recordemos que existe una configuración por cada usuario, así que voy al archivo:
C:\Users\<usuario>\Documents\IISExpress\config\applicationhost.config
Y luego agregamos el mimeMap:
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
Y Listo!, funciona 
.
Bueno, eso no más, el tip para que no te rompas la cabeza buscando por que no funcionan lo woff cuando lo pruebas con Webmatrix.
Saludos!
@chalalo