[css] font 설정

스포카산스네오를 예로 들어 설명하겠다.

 

1. 적용하고자 하는 폰트 css 파일을 만든다.

SpoqaHanSansNeo.css

@charset "utf-8";
/*
 * 스포카한산스네오
 */
@font-face{
  font-family:'SpoqaHanSansNeo';
  font-weight: 300;
	src:url(SpoqaHanSansNeo-Regular.eot);
	src:url(SpoqaHanSansNeo-Regular.eot?#iefix) format('embedded-opentype'),
	url(SpoqaHanSansNeo-Regular.woff) format('woff'),
	url(SpoqaHanSansNeo-Regular.ttf) format('truetype');
}
@font-face{
  font-family:'SpoqaHanSansNeo';
  font-weight: 900;
	src:url(SpoqaHanSansNeo-Bold.eot);
	src:url(SpoqaHanSansNeo-Bold.eot?#iefix) format('embedded-opentype'),
	url(SpoqaHanSansNeo-Bold.woff) format('woff'),
	url(SpoqaHanSansNeo-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 500;
  src: url(SpoqaHanSansNeo-Medium.eot);
  src: url(SpoqaHanSansNeo-Medium.eot?#iefix) format('embedded-opentype'),
    url(SpoqaHanSansNeo-Medium.woff) format('woff'),
    url(SpoqaHanSansNeo-Medium.ttf) format('truetype');
}
@font-face{
  font-family:'SpoqaHanSansNeo';
  font-weight: 200;
	src:url(SpoqaHanSansNeo-Light.eot);
	src:url(SpoqaHanSansNeo-Light.eot?#iefix) format('embedded-opentype'),
	url(SpoqaHanSansNeo-Light.woff) format('woff'),
	url(SpoqaHanSansNeo-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 100;
  src: url(SpoqaHanSansNeo-Thin.eot);
  src: url(SpoqaHanSansNeo-Thin.eot?#iefix) format('embedded-opentype'),
    url(SpoqaHanSansNeo-Thin.woff) format('woff'),
    url(SpoqaHanSansNeo-Thin.ttf) format('truetype');
}

 

2. 원하는 폰트 css 파일을 해당 css에 import 시킨다.

@import url('/web_font/SpoqaHanSansNeo.css');

 

3. 최종으로 적용하고자하는 요소에 추가한다.

.SpoqaHanSansNeo {
  font-family: SpoqaHanSansNeo;
}

 

4. 굵기 조정은 해당 폰트.css에 선언한 그대로 사용한다.