URL absoluta CSS @ font-face del dominio externo: fonts no cargadas en firefox

http://fwy.pagodabox.com

http://friends-with-you.myshopify.com/

Tengo mis fonts y css alojadas en un servidor de pagodabox.com, y estoy desarrollando la sección de la tienda en shopify. Quiero utilizar la misma hoja de estilo del sitio alojado de pagodabox para el sitio shopify. Pero mis fonts no se están cargando en Firefox, versión 13.0.1

¿Hay algún problema con FF o con mi syntax? ¡¡¡Gracias!!!

@font-face { font-family:'IcoMoon'; src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot'); src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.svg#IcoMoon') format('svg'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.ttf') format('truetype'); font-weight:normal; font-style:normal; } @font-face { font-family:'square'; src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot'); src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.ttf') format('truetype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.svg#SquareSerifLightRegular') format('svg'); font-weight:normal; font-style:normal; } 

No puede usar @ font-face en Firefox con una fuente alojada en un dominio diferente. Si desea especificar una fuente para @ font-face usando una URL absoluta, o una fuente alojada en un dominio diferente, debe ser servida con Encabezados de control de acceso, específicamente el encabezado Access-Control-Allow-Origin establecido en ‘*’ o los dominios permitidos para solicitar la fuente. Esto también se aplica a las fonts alojadas en un subdominio diferente. Si está utilizando Apache puede intentar poner esto en su .htaccess y reiniciar el servidor

 AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf   Header set Access-Control-Allow-Origin "*"   

Esta es una limitación conocida y en realidad es una medida de seguridad para evitar el abuso a otros servidores.

Si tiene el control del servidor a nivel de servidor en el que se encuentran las fonts, puede ajustar Apache para permitir este tipo de conexiones. Más información sobre eso: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

Pero sepa que si hace esto, esto permitirá que todos los demás sitios utilicen esas fonts en sus sitios y utilicen su ancho de banda.

Si tiene acceso al servidor remoto, puede agregar un script local para establecer los encabezados correctos, como el header('Access-Control-Allow-Origin: *'); y luego volcar el archivo de fuente. Por ejemplo, en PHP, así:

(archivo fnt.php en la misma carpeta de las fonts)

 'application/vnd.ms-fontobject', '.ttf'=>'font/ttf', '.otf'=>'font/otf', '.woff'=>'font/x-woff', '.svg'=>'image/svg+xml', ); $IKnowMime=MimeByExtension(GetExt($s)); $f=preg_replace('/[^a-zA-Z.0-9-_]/','',$_REQUEST['f']); /* header("Cache-Control: private, max-age=10800, pre-check=10800"); header("Pragma: private"); header("Expires: " . date(DATE_RFC822,strtotime(" 2 day"))); */ header('Content-type: '.$IKnowMime ); header("Content-Transfer-Encoding: binary"); header('Content-Length: '.filesize(FONT_FOLDER.$f)); header('Content-Disposition: attachment; filename="'.$f.'";'); header('Access-Control-Allow-Origin: *'); readfile(FONT_FOLDER.$f); function GetExt($File) { $File=explode('.',$File); if(count($File)==1) return ''; return '.'.$File[count($File)-1]; } function MimeByExtension($ex) { global $MIMES; $ex=strtolower($ex); if(isset($MIMES[$ex])) return $MIMES[$ex]; else return FALSE; } ?> 

Entonces puedes usar las fonts de esta manera:

  

especificando el archivo php en lugar del archivo de fuente, y pasando el archivo de fuente como un argumento ?f=fontfile.woff . Si desea mantener el parámetro FONT_FOLDER para que apunte a la carpeta correcta. La preg_replace si por seguridad, lo que impide el acceso fuera de la carpeta de fonts.

También puede admitir algún tipo de autenticación para asegurarse de que solo esté usando esas fonts.

También puede considerar el uso de Access-Control-Allow-Origin que no sea ‘*’ para especificar exactamente quién puede acceder a sus archivos de fonts.

 Access-Control-Allow-Origin: http://www.fromthisserverican.com 

permitirá el acceso desde el servidor http://www.fromthisserverican.com, lo que significa que todas las páginas en http://www.fromthisserverican.com pueden usar las fonts, mientras que las páginas en otros servidores pueden no hacerlo.

Puede permitir que los recursos se carguen desde el subdominio agregando la siguiente línea a su archivo .htaccess

Cargar recursos del subdominio:

 # Allow font, js and css to be loaded from subdomain SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0   Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN   

Cargue recursos de todos los demás dominios:

 # Allow font, js, and css to be loaded from subdomain   Header set Access-Control-Allow-Origin "*"   

Fuente: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

 AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf   Header set Access-Control-Allow-Origin "*"   

Esto me ayudó a solucionar el problema.