2014-02-13 3 views
1

나는 정적 파일에 대해 각광의 CDN을 사용하고 있습니다.Firefox에서 크로스 도메인으로로드하는 글꼴을 가져 오는 방법

다운로드 할 수없는 글꼴 : 다운로드 실패 (글꼴 모음 : "nimbus-bold"스타일 : 보통 가중치 : 일반 늘림 : 일반 src 인덱스 : 1) : 잘못된 URI 또는 ​​교차 사이트 액세스 허용되지 소스 : http://cdn-store.example.com/fonts/nimbussanspot-bold-webfont.woff

CSS :

@font-face { 
font-family: 'nimbus-bold'; 
src: url('/fonts/nimbussanspot-bold-webfont.eot'); 
src: url('/fonts/nimbussanspot-bold-webfont.eot%3F%23iefix') format("embedded-opentype"); 
src: url('/fonts/nimbussanspot-bold-webfont.woff') format("woff"); 
src: url('/fonts/nimbussanspot-bold-webfont.ttf') format("truetype"); 
src: url('/fonts/nimbussanspot-bold-webfont.svg%23nimbus_sans_p_otbold') format("svg"); 
font-weight: normal; 
font-style: normal; 
} 

I 시도한 다음,하지만 도움이되지 않았다

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

-bash-4.1$ curl -I http://cdn-store.example.com/fonts/nimbussanspot-bold-webfont.woff 
HTTP/1.1 200 OK 
Date: Thu, 13 Feb 2014 16:58:05 GMT 
Server: Apache/2.2.15 (Oracle) 
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT 
Accept-Ranges: bytes 
Vary: Accept-Encoding,User-Agent 
Access-Control-Allow-Origin: * 
Content-Type: text/plain 
Content-Length: 24040 
Connection: keep-alive 

-bash-4.1$ curl -I http://store.example.com/fonts/nimbussanspot-bold-webfont.woff 
HTTP/1.1 200 OK 
Date: Thu, 13 Feb 2014 17:04:10 GMT 
Server: Apache/2.2.15 (Oracle) 
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT 
ETag: "146124-5de8-4f24b944b4eff" 
Accept-Ranges: bytes 
Content-Length: 24040 
Vary: Accept-Encoding,User-Agent 
Access-Control-Allow-Origin: * 
Connection: close 
Content-Type: text/plain 

편집 : 0 나는 다음과 같은 결과를 얻을 수 '으로 AddType'지시문그러나 글꼴이

$ curl -I http://store.example.com/fonts/nimbussanspot-bold-webfont.woff 
HTTP/1.1 200 OK 
Date: Fri, 14 Feb 2014 15:09:02 GMT 
Server: Apache/2.2.15 (Oracle) 
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT 
ETag: "146124-5de8-4f24b944b4eff" 
Accept-Ranges: bytes 
Content-Length: 24040 
Vary: Accept-Encoding,User-Agent 
Access-Control-Allow-Origin: * 
Connection: close 
Content-Type: application/x-font-woff 

$ curl -I http://cdn-store.example.com/fonts/nimbussanspot-bold-webfont.woff 
HTTP/1.1 200 OK 
Server: Apache/2.2.15 (Oracle) 
Accept-Ranges: bytes 
Vary: Accept-Encoding,User-Agent 
Access-Control-Allow-Origin: * 
Content-Type: application/x-font-woff 
Age: 55 
Date: Fri, 14 Feb 2014 15:08:59 GMT 
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT 
Content-Length: 24040 
Connection: keep-alive 

답변

2

귀하의 webfont 파일 text/plain 콘텐츠 형식 대신 application/x-font-woff 등의 적절한 하나에서 제공하는로드되지 않습니다.

<Location /webfont> 
    Header set Access-Control-Allow-Origin "*" 
    AddType application/vnd.ms-fontobject .eot 
    AddType application/x-font-ttf .ttf 
    AddType application/x-font-woff .woff 
</Location> 
+0

컬 출력 내용 - 형식 : 문제없이 응용 프로그램/X-글꼴 TTF 폰트로드합니다. 그러나 콘솔의 '사이트 간 액세스가 허용되지 않음'오류 메시지가 계속 표시됩니다. 나는 그것을 무시해야합니까? –

+0

이 경고 메시지는 페이지에서로드하려고하는 다른 애셋에서 온 것일 수도 있습니다. 그렇지 않으면 글꼴이 올바르게 표시되지 않습니다. –

+0

내가 잘못 읽은 글꼴이로드되지 않습니다. 다른 해결책을 제안 해 주시겠습니까? –

1

를 서버에 추가해야합니다 : Access-Control-Allow-Origin를 글꼴 도움이된다면 아파치 설정 파일에서이 같은

시도 뭔가를 참조하십시오. .htaccess 추가에서
:

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