Archivo etiqueta maldito Internet explorer

Cargar tipografías web en Internet Explorer

Por Fran - css, Diseño web - 22 junio, 2011

Internet Explorer continúa sin cumplir los estándares, y esto trae de cabeza a los diseñadores web. Cuando quieres cargar una de las tipografías de Google en tu web o cualquier otra fuente compatible, utilizas el código para insertarla que te facilita Google y descubres que el maldito Internet Explorer no la muestra. Arreglar esto supone un trabajo extra para el diseñador.

¿Qué debemos hacer para que Internet Explorer muestre una fuente?

  1. Descargar la fuente
  2. Generar un kit en FontSquirrel
  3. Modificar nuestra hoja de estilo CSS

1. Descargar la fuente

Tenemos que usar una parte del código que Google nos facilita para insertar una de sus fuentes en nuestra web cuando hacemos clic en “Use this font”. En el caso de la tipografía Lobster:

<link href='http://fonts.googleapis.com/css?family=Lobster+Two&v1' rel='stylesheet' type='text/css'>

Tipografias Google para la web

Debemos copiar la dirección completa que hay entre comillas simples del atributo href y pegarla en nuestro navegador. Cuando cargue esta dirección veremos el siguiente código:

@font-face {
  font-family: 'Lobster Two';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster Two'), local('LobsterTwo'), url('http://themes.googleusercontent.com/font?kit=Law3VVulBOoxyKPkrNsAaLrIa-7acMAeDBVuclsi6Gc') format('woff');
}

De aquí tendremos que repetir la misma operación. Copiamos la dirección que hay entre las comillas de url
http://themes.googleusercontent.com/font?kit=Law3VVulBOoxyKPkrNsAaLrIa-7acMAeDBVuclsi6Gc

De nuevo en nuestro navegador, pegamos la dirección, y podremos descargar la fuente (Lobster en el ejemplo). La guardamos en nuestro equipo.

2. Generar un kit en FontSquirrel

El siguiente paso es utilizar la fuente que hemos descargado para generar un kit en el generador de kit de FontSquirrel

Subimos la fuente que descargamos en el paso 1 (Add fonts). Marcamos el checkbox ‘Yes, the fonts……’ y hacemos clic en Download your kit. Obtendremos un archivo comprimido.

Generador kit tipografia FontSquirrel

3. Modificar nuestra hoja de estilo CSS

Cuando descomprimimos el kit que acabamos de descargar, obtenemos una carpeta con varias tipografías (formatos: eot,svg,ttf,woff …) y una hoja de estilo stylesheet.css. El código de la hoja de estilo, tendremos que añadirlo a la nuestra:

@font-face {
    font-family: 'Lobster';
    src: url('lobster-webfont.eot');
    src: url('lobster-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobster-webfont.woff') format('woff'),
         url('lobster-webfont.ttf') format('truetype'),
         url('lobster-webfont.svg#Lobster') format('svg');
    font-weight: normal;
    font-style: normal;
}

Y por último, debemos subir a nuestro servidor nuestra hoja de estilo modificada y los archivos de las tipografías. Es muy importante que prestemos atención a la ruta hacia los archivos de fuentes, si queremos guardarlos en una ubicación que no sea la misma carpeta en la que está nuestra hoja de estilo, deberemos modificar el código CSS para que las pueda localizar correctamente.

Esto es todo el trabajo extra que nos obliga a hacer Internet Explorer cuando queremos mostrar una tipografía especial en nuestras webs. ¡Con lo fácil que es usar el código que nos da Google!

¿A vosotros os da muchos quebraderos de cabeza Internet Explorer?

, , ,

No hay Comentarios