viernes, 8 de marzo de 2013

Navegación HTTPS y las fuentes de una web

Quiero expresar una situación que me ha sucedido mientras hacíamos la web http://complezoo.es/ y que nos trajo de cabeza durante unos días. Es habitual en la programación web que la apariencia de la página vista desde diferentes navegadores (y diferentes versiones de los mismos) tenga como resultado pequeños descuadres que hay que ir depurando. Pero el caso que nos sucedió y en el que no  habíamos reparado en el momento de su desarrollo es que sucede con la carga dinámica de fuentes cuando navegas por https.
En nuestra página inicial teníamos el siguiente código para la adquisición de una fuente:

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Anton">
@font-face {
font-family: 'Anton';
font-style: normal;
font-weight: 400;
src: local('Anton'), url(http://themes.googleusercontent.com/static/fonts/anton/v3/tilmJBBU81h1G7ZsdY3Hmw.woff) format('woff');
}
</link>


Al navegar desde firefox 19.0, Safari e I9 a https://complezoo.es/  todo funcionaba correctamente, pero cual es nuestra sorpresa que desde chrome y en versiones anteriores de internet explorer, la web perdía esta fuente. Investigando vimos que hay navegadores que bloquean el contenido http cuando se navega por una web por https (el caso de chrome), otros te preguntan si quieres cargar el contenido http (como internet explorer) y por último están los que no te preguntan y lo cargan directamente como firefox. 

La solución a esto pasó por descargarnos la fuente en el servidor e incluirla en el css como local y de esta manera no tenía que irla a buscar a ningún lado.

Como nota adicional Chrome en su última versión carga el contenido http cuando navegas por https y no pregunta ni lo bloquea.

No hay comentarios:

Publicar un comentario