FrontendCSS

[Chrome] Webfont Cross Domain

, ,

웹폰트 크로스도메인 문제 해결

https://www.example.com 의 웹폰트(CSS)를 https://example.com 으로 웹 브라우저에 접속할 때 아래와 같이 웹폰트를 로드하지 못하는 에러가 발생 될 수 있습니다.

1
2
3
4
5
Font from origin 'https://www.example.com' has been blocked
from loading by Cross-Origin Resource Sharing policy:
The 'Access-Control-Allow-Origin' header contains the
invalid value '*.'. Origin 'https://example.com' is
therefore not allowed access.

이유는 크로스도메인 문제로 아래와 같이 www.example.com 루트에 .htaccess 파일을 만들어서 넣어주면 해결 됩니다.

1
2
3
4
5
<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
          Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

참조

공유하기