@ font-face 글꼴은 자체 도메인에서만 작동합니다.

@ font-face 글꼴은 자체 도메인에서만 작동합니다.

---

다른 설정없이 내 CSS의 저장소에있는 모든 글꼴을 호출 할 수 있도록 웹 사이트에서 사용할 글꼴 저장소 유형을 만들려고합니다. 이를 위해 각 글꼴에 대한 다양한 파일 형식을 포함하는 저장소의 각 글꼴에 대한 폴더를 배치하는 하위 도메인을 만들었습니다. 또한 하위 도메인의 루트에 font-face.css라는 css 파일을 배치하고 @font-face각 글꼴에 대한 선언으로 채웠습니다 . 글꼴은 어디서나 사용할 수 있도록 절대 링크로 연결되어 있습니다.

내 문제는 글꼴이 표시되지 않는 다른 사이트에서 해당 하위 도메인의 글꼴 만 사용할 수 있다는 것입니다. 방화범을 사용하여 font-face.css 파일이 성공적으로 연결되고로드되었음을 확인했습니다. 그렇다면 글꼴이 올바르게로드되지 않는 이유는 무엇입니까? 글꼴 파일에 대한 보호가 있습니까? 이 작업을 수행 할 수있는 모든 글꼴을 사용하고 있으므로 왜 이런 일이 발생하는지 알 수 없습니다. 아파치 문제 일 수도 있지만 링크하면 글꼴을 제대로 다운로드 할 수 있습니다.

아, 그리고 명확히하기 위해, 저는 이것을 설정함으로써 어떠한 저작권도 침해하지 않습니다. 제가 사용하고있는 모든 글꼴은 이런 종류의 것을 허용하도록 허가되었습니다. 그러나이 글꼴 저장소에 액세스 할 수있는 방법을 설정하고 싶지만 다른 프로젝트입니다.

---

Firefox (Firebug에 대한 언급에서)는 도메인 간, 심지어 하위 도메인까지 웹 글꼴 임베딩이 나쁜 생각이라고 생각하기 때문입니다.

.htaccess글꼴이 제공되는 하위 도메인의 최상위 파일에 이를 추가하여 하위 도메인에서 글꼴을로드하도록 설득 할 수 있습니다 ( HTML5 Boilerplate 에서 동일한 파일의 코드를 수정하도록 업데이트 됨 ).

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

이에 대한 응답으로 :

그러나이 글꼴 저장소에 액세스 할 수있는 방법을 설정하고 싶지만 다른 프로젝트입니다.

에 대한 W3C 사양Access-Control-Allow-Origin 은 와일드 카드 "*"또는 특정 도메인 이상을 말하지 않습니다 . 지금까지 헤더 유효성 검사를 제안하는 이 SO 답변 을 찾았 Origin지만 Firefox 전용 헤더라고 생각합니다. 다른 브라우저에 대해 잘 모르겠습니다 ( .htaccess도메인 간 웹 글꼴이 작동하기 위해 위 의 트릭이 필요하지도 않습니다 ).

---

Firefox에서이 문제를 해결하는 또 다른 방법은 base64 인코딩을 사용하여 글꼴을 CSS 파일에 직접 포함하는 것입니다. 위에서 언급 한 구성 중 일부에 액세스 할 수없는 경우 특히 유용합니다.

fontsquirrel.com 에서 필요한 코드를 생성 할 수 있습니다 . font-face Kit Generator에서 전문가 모드를 선택하고 아래로 스크롤 한 다음 CSS 옵션에서 Base64 인코딩을 선택합니다. 다운로드 한 Font-Kit은 플러그 앤 플레이 할 준비가됩니다.

이것은 또한 하나의 http 요청이 덜 필요하기 때문에 페이지로드 시간을 줄이는 부가적인 이점이 있습니다.

---

모든 도메인의 리소스를 허용하지 않고 사이트의 하위 도메인에서만 허용하려면 다음과 같이해야합니다.

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
    </FilesMatch>
</IfModule>

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

---

"전문가"모드에서 http://www.fontsquirrel.com/fontface/generator 를 사용 하고 base64를 옵션으로 선택하면 스타일 시트에서 사용하는 데 필요한 base64 인코딩 데이터와 함께 stylesheet.css가 반환되었습니다. IE8을 제외하고 테스트 한 모든 브라우저에서 작동하는 것 같습니다.

이 문제는 글꼴을 호스팅해야하는 살사 청원과 같은 타사 도구에 테마를 적용 할 때 가장 많이 발생합니다.

모든 도움에 감사드립니다!

참조 URL : https://stackoverflow.com/questions/2892691/font-face-fonts-only-work-on-their-own-domain