IE11에서 CSS3114 에러

웹사이트 프론트 작업중인데 IE11에서 에러가 발생하였다.

원인까지는 정확히 모르겠지만 Google Fonts 사이트에서 import해오는 font는 문제가 없고

직접 프로젝트에 ttf나 otf로 넣어서 제공하는 폰트에서 문제가 발생하는 것 같다.

해결방법은

@font-face {
  font-family: 'NanumBarunGothic';
  src: url('./NanumBarunGothicUltraLight.ttf');
  font-weight: 100;
}

원래 이렇게 되어있다면 src: url() 뒤에 ,format('embedded-opentype')을 추가해주면 된다.

@font-face {
  font-family: 'NanumBarunGothic';
  src: url('./NanumBarunGothicUltraLight.ttf'), format('embedded-opentype');
  font-weight: 100;
}

후기

하지만 어차피 IE에선 eot(embedded-opentype) 외에는 동작하지 않았다.

IE6 ~ IE11에선 eot만 되는 것 같다.

추가적으로 woff(Web Open Font Format)가 제일 좋은 폰트 타입이다.

Reference

@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이)