Cross-Origin에서 웹 글꼴을 사용할 때 주의해야 할 사항

여러분, 웹 폰트 사용하고 있습니까?

Qiita에서도 유명한 아이콘 폰트가 사용되고 있네요. FontAwesome입니다.

지금은 Stable이라든지 Beta의 Chrome에서 Qiita를 봐도 아무 문제도 없을 것입니다. (이번 주변에서는.)

그러나, 우리의 Chrome(38)에서는 이렇게 되어 버립니다.

훌륭하게 두부입니다.

Why?

이제 Dev 도구를 열고 오류 로그를 살펴 보겠습니다.


이렇게. Qiita의 FontAwesome은 cdn.qiita.com이라는 CDN을 통해 전달되고 있었군요. 하지만 Chrome38 이후의 Blink에서는 폰트에 대해서도 Origin 체크가 있는 것 같다…

그건 그렇고

이것은 Chrome37까지로 이미 예고되고 있었군요. (수중에 있었던 것이 Chromium37 이었으므로 그 이전의 것은 확인할 수 없었습니다만.)

요약

CDN을 통해 글꼴을 전달할 때 크로스 오리진을 허용하는 것을 잊지 마십시오!

덧붙여 7/22 Qiita의 대응

🌸 대책을 실시했는데 확인해 보시지 않겠습니까? — └|∵|┐ (@yuku_t) 2014, 7월 22

우선 수정된 것 같기 때문에 확인해 보는 것에…


그래, 두부가 사라졌어! 평소처럼 Qiita!