[CSS] 웹폰트

웹폰트

웹폰트는 사용자가 웹페이지에서 요청한 순간 CSS에 기술된 필요 폰트가 서버에서 클라이언트로 전송된다. 좀 더 구체적으로 말하면 매번 다운로드 되는 것은 아니고 클라이언트 로컬에 해당 폰트가 존재하지 않을 경우 전송된다.

속도 : 로컬 폰트 > CDN > 서버 폰트

1.  CDN(Conent Delivery Network) 링크 방식

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

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

2.  서버 폰트 로딩 방식

-> CDN 링크를 통해 여러 개의 폰트를 사용한다면 로딩이 오래 걸린다. 또한 CDN링크를 제공하지 않는 폰트는 사용할 방법이 없다. 이러한 단점을 보완한 방법이 서버 폰트 로딩 방식이다.

	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; }

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

font-family: 'Lora', 'KoPub Batang', 'Times New Roman', serif;

출처 : https://poiemaweb.com/css3-webfont