css - una - Fuente descargable en Firefox: URI incorrecto o acceso de sitios cruzados no permitido

inspeccionar elemento google chrome

Question

Soy webmaster en http://www.beperk.com (le doy la URL para que pueda verificar el problema) y tengo muchos problemas para usar @ font-face en CSS.

Quiero usar los foundicons de zurb dot com, así que los alojé en Amazon S3.

Configuré el depósito para permitir el acceso entre dominios tal como se especifica aquí: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

Y todo comenzó a funcionar sin problemas en webkit, tridente y gecko ... principalmente: cuando se explora la web con firefox (se prueban las versiones 17, 18 y 19), todos los íconos fallan aleatoriamente con este error:

Timestamp: 22/02/13 13:18:01
Error: downloadable font: download failed (font-family: "GeneralFoundicons" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed

Y digo al azar, ya que después de una recarga completa de la página (con control / comando + R) cada icono aparece normalmente para fallar de nuevo después de algunas visitas.

¿Alguien puede encontrar el problema?

Answer 1

En tu servidor necesitarás agregar:

Access-Control-Allow-Origin

Al encabezado de los archivos de fuentes, por ejemplo, si está usando Apache, puede agregar esto al .htaccess:

<FilesMatch "/.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Answer 2

Resolví el problema en Firefox (problema de acceso a recursos locales) usando uri: src: uri("../fuentes/EurostileLTStd.otf"); en lugar de src: uri("../fuentes/EurostileLTStd.otf"); .

Answer 3

Si alguien está utilizando recursos locales y enfrenta este problema en Firefox. Puede ir a about:config y cambiar la preferencia security.fileuri.strict_origin_policy a false .

ver: https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs

Answer 4

intente utilizar fuentes codificadas en base64 implementadas como:

@font-face {
 font-family:"font-name";
 src:url(data:font/opentype;base64,[paste-64-code-here]);
 font-style:normal;
 font-weight:400;
}

ver: http://sosweetcreative.com/2613/font-face-and-base64-data-uri

funcionó perfectamente