CSS 웹폰트

2020-11-30

웹브라우저는 로컬 소프트웨어이므로 로컬 환경의 리소스만 사용 가능하다. 로컬 환경에 존재하는 폰트는 사용할 수 없다. 사용자가 어떤 디바이스, 어떤 OS를 사용하여 웹페이지에 접근하는지 알 수 없다. 웹페이지와 같이 폰트도 서버에서 클라이언트로 다운로드되어 실행될 수 있다면 문제는 해결 가능하다. 이러한 문제를 해결할 수 있는 방법이 웹폰트이다. (클라이언트에 해당 폰트가 존재하지 않을 경우 전송되는 방식)

CDN(Content Delivery Network) 링크 방식

가장 간단한 방법은 CDN 링크를 사용하는 것이다. 구글에서 제공하는 웹폰트가 대표적이다.

1
2
3

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

* { font-family: 'Nanum Gothic', sans-serif; }

서버 폰트 로딩 방식

CDN 링크를 사용하는 방법은 간편하지만 로컬 폰트를 사용하는 것에 비해 로딩 속도가 느리다. 폰트를 여러 개 사용하면 할 수록 로딩에 더욱 시간이 걸리며 CDN 링크를 제공하지 않는 폰트는 사용할 방법이 없다. 이러한 단점을 보완한 방법이 서버 폰트 로딩 방법이다. 폰트 파일을 서버에 두고 요청이 오면 클라이언트로 전송하는 방식이다.

※ 영문과 한글을 혼용하는 경우 먼저 영문 폰트, 그 다음 한글 폰트를 지정하여야 한다. 한글 폰트부터 지정하면 영문에도 한글 폰트가 적용된다.

@font-face {
  font-family: myFontName;
  src: url("myFont.woff");
}

* { font-family: myFontName, sans-serif; }

	EOT	WOFF	SVG	OTF/TTF
IE 6~8	O	X	X	X
IE 9+	O	O	X	X
Firefox	X	O	X	O
Safari	X	O	O	O
Chrome	X	O	O	O
Opera	X	O	O	O

일반적으로 사용되는 검증된 웹폰트 사용방법

@font-face {
  font-family:"Nanum Gothic";
  src:url("NanumGothic.eot");
  /* IE 9 호환성 보기 모드 대응 */
  src:local("☺"),
  /* local font 사용 방지. 생략 가능 */
      url("NanumGothic.eot?#iefix") format('embedded-opentype'),
      /* IE 6~8 */
      url("NanumGothic.woff") format('woff');
      /* 표준 브라우저 */
}

* { font-family: "Nanum Gothic", sans-serif; }

REFERENCE
https://poiemaweb.com/css3-webfont