Webfonts en IIS

Desde que comenzó el boom por HTML5, podemos ver muchos sitios que aplican los elementos principales de CSS3, como lo es el sombreado de texto y cuadros, los bordes redondeados, y principalmente, el uso de webfonts.

Existen cuatro formatos para fuentes web principales, soportados por distintos navegadores, y por lo general, lamentablemente, cada navegador soporta sólo uno de estos formatos. Estos son:

  • woff. Formato de fuente abierto.
  • ttf. Prácticamente un estándar en fuentes. Usado por Windows, pero no por Internet Explorer.
  • svg. El mismo formato para diseño vectorial, usando elementos para definición de fuentes.
  • eot. Formato propietario de Microsoft (no podía faltar). Único soportado por Internet Explorer, desde la versión 4, y tal vez para siempre.

Otros formatos, como otf, también son (o en su momento fueron) soportados como webfonts, pero actualmente los cuatro mencionados son los "oficiales".

Con todo esto, como diseñadores web también nos da por comenzar a utilizar las fuentes web en nuestros sitios y aplicaciones. Descargamos algún paquete de sitios como FontSquirrel, las agregamos a nuestro sitio montado en IIS, lo abrimos con IE, y vemos nuestra nueva fuente! lo abrimos con Firefox y todo perfecto! lo abrimos con Opera y… eh… qué pasó? lo abrimos con Safari o Chrome y eehh…. qué está pasando?? La fuente que estamos utilizando es reemplazada por Arial, o Times New Roman o alguna de esas fuentes que en un principio quisimos cambiar. ¿Por qué?

IIS tiene registradas los tipos MIME (tipos de archivos) que va a permitir que el visitante del sitio descargue. Esto por cuestiones de seguridad. Si ponemos la ruta directa a un archivo cuya extensión no esté registrada en el IIS, se nos mostrará un error de “dirección inválida”.

Las extensiones .eot y .ttf, que son tipos de archivos usados por Microsoft, sí están registradas dentro de IIS, pero los tipos .woff y .svg no, y debemos agregarlas.

IIS 6

En el sitio web (o en una aplicación de éste), le damos clic derecho y en Propiedades. De ahí, en la pestaña “Encabezados HTTP”, al final, hay una sección de “Tipos MIME”, ahí agregamos las extensiones.

IIS 7

Seleccionamos el sitio o aplicación desde el árbol de conexiones. Al final de las opciones disponibles para el sitio/aplicación (en la sección principal), seleccionamos “Tipos MIME”. A diferencia de IIS6, aquí veremos todos los tipos de archivos permitidos por el servidor. Y podemos agregar uno nuevo desde la opción Agregar en “Acciones” o en el menú contextual (clic derecho).

En cualquiera de las versiones, lo que tenemos que agregar son estos datos:

Extensión Tipo MIME
.woff application/x-woff
.svg image/svg+xml

Es todo. Ya con esto, nuestro servidor permitirá que el usuario descargue esos tipos de archivos.

Anuncios

Autor: Israel Muñoz

Soy desarrollador de software, principalmente dedicado a desarrollo de aplicaciones web. Especializado en .NET full-stack, además de tecnologías front-end HTML, CSS y JavaScript. A ratos, profesor de materias de informática. Me gusta mucho todo lo que tiene que ver con las tecnologías nuevas para desarrollo web, y el diseño de sitios y aplicaciones.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s