웹폰트를 사용하기 위한 포멧 정보

웹 작업 중 아래와 같은 에러 메시지를 발견해서 급하게 정리해본다.

CSS3111: @font-face에 알 수 없는 오류가 발생했습니다.

이 에러 문구의 원인은 아직 명확히 찾아내지 못했다.

---

CSS로 웹폰트를 사용하기 위해 선언해야 할 @font-face의 유형들 CSS에 작성하는 순서대로 아래와 같다.

1. eot
2. woff2
3. woff
4. ttf
5. svg

@font-face {
  font-family: 'FontName';
  src: url('webfont.eot'); /* IE9+ Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super modern browsers */
       url('webfont.woff') format('woff'), /* Modern browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#FontName') format('svg'); /* Legacy iOS */
}

위 다섯개 포멧 중 eot 는 IE9 이하 브라우저에 호환을 위한 포맷이다. 모던 브라우저만 지원하는 경우에는 사용하지 않아도 무방하다.

ttf 포멧은 사파리와 안드로이드, iOS 대응을 위해 필요한 포맷이다. 반응형을 고려한다면 ttf 포맷은 꼭 사용하자.

참고 자료

• CSS Web Fonts W3 Schools
• MDN: @font-face