Chrome에서 @font-face에 대한 잘못된 MIME 유형

Chrome에서 @font-face 선언을 사용하여 맞춤 글꼴을 구현하려고 할 때 , 개발자는 "리소스가 글꼴로 해석되었지만 MIME 유형 애플리케이션/옥텟 스트림으로 전송되었습니다."라는 오류 메시지를 접할 수 있습니다. 이 문제는 글꼴 파일의 MIME 유형과 선언에 지정된 예상 유형 간의 불일치로 인해 발생합니다.

이 불일치를 해결하려면 다양한 브라우저 요구 사항을 충족하는 포괄적인 @font-face 선언을 사용할 수 있습니다. . 다음 브라우저 간 선언은 Chrome 및 Firefox와의 호환성을 보장합니다.

@font-face {
  font-family: 'Font Name';
  src: url('FontName.eot');
  src: local('☺'),
         url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype');
}

.eot 파일은 Internet Explorer용으로 지정되는 반면, 다른 브라우저는 .woff 또는 .ttf 형식을 사용합니다. 소스 글꼴에서 이러한 다양한 형식을 생성하려면 Font Squirrel의 글꼴 생성기 활용을 고려하세요.

또한 .htaccess 파일은 글꼴 파일에 대한 관련 MIME 유형을 지정하도록 구성되어야 합니다.

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

이러한 권장 사항을 따르면 Chrome을 포함한 다양한 브라우저에서 맞춤 글꼴이 올바르게 표시되도록 할 수 있습니다.