CSS - 웹폰트 스타일 지정

@font-face 를 이용하면 웹 서버에 존재하는 폰트를 이용해 독자적인 글꼴을 표현할 수 있습니다.

일반적인 글꼴은 로컬에 설치된 글꼴을 기본으로 사용합니다. 제작자의 의도와는 다르게 글이 표현된다는 뜻이겠지요.

하지만 @font-face 를 이용하면 제작자의 의도대로 화면에 보여줄 수 있게 되지요.

웹폰트를 이용하려면 다음 속성을 정의해야 합니다.

속 성	설 명
font-family	웹 글꼴을 선언.
src	웹글꼴 파일 경로를 설정. url: 웹글꼴 파일이 위치하는 URL format: 글꼴 포맷 형식. (선택사항)

가장 많이 사용하는 글꼴 포맷 형식 몇 가지를 소개합니다.

글꼴 설명	파일 확장자	글꼴포맷
Web open Font Format	.woff	woff
TureType	.ttf	truetype
OpenType	.ttf .otf	opentype
Embedded OpenType	.eot	embedded-opentype
SVG Font	.svg .svgz	svg

형식은 다음과 같습니다.

@font-face {
  font-family: 글꼴 이름;
  src: url(파일경로) format(글꼴포맷) ,[url(경로) ... ];
  [font-weight: 폰트 굵기];
  [font-style: 폰트 스타일];
}
div {
  font-family: 글꼴 이름;
} 

@font-face {
  font-family: NanumWeb;
  src: url("font/font.ttf") format("opentype");
}
div {
  font-family: NanumWeb;
} 

/* 웹폰트는 콤마로 여러 개 지정 가능. */
/*
   첫 번째 글꼴이 없으면 두 번째 글꼴을
   두 번째 글꼴이 없으면 세 번째 글꼴을 찾는 순서 입니다.
*/
@font-face {
  font-family: NanumWeb;
  src: url("font/font1.svg") format('svg'),
       url("font/font2.woff") format("woff"),
       url("font/font3.woff") format("woff");
}
div {
  font-family: NanumWeb;
}