font-face 를 이용해 나눔고딕을 사용해보기

css 2015. 3. 31. 02:52

728x90
반응형
네이버 무료 폰트인 나눔고딕 입니다.
font-face 를 통해 고딕 폰트를 적용할수 있고 또는
구글웹폰트 를 이용하여 사용하고자 하는 폰트를 적용 할 수 있습니다.(구글 웹폰트는 브라우저별로 폰트가 대응하게 짜여져 있다네요. 그리고 사용하기도 엄청 간단하고..)

이 글은 font-face 를 사용하여 폰트를 적용하는 방법입니다.
파일들을 잘 보다보면 꽤 많은 파일이 존재하는걸 확인할 수 있습니다.
이 이유는 브라우저 마다 지원하는 폰트의 확장자가 틀리기 때문이죠.

먼저 font-face 안의 속성을 보면
- font-family : 적용하고자 하는 폰트의 이름을 설정합니다.
- font-style : 폰트의 기울기 등의 이탤릭? 또는 노말과 같은 스타일을 설정합니다.
- font-weight : 폰트의 굵기를 설정합니다.
- src : 폰트가 어느 위치에서 가지고 오는지..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*나눔 고딕 글꼴*/
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/NanumGothic/NanumGothic-Regular.eot');
  src: url('../fonts/NanumGothic/NanumGothic-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumGothic/NanumGothic-Regular.woff2') format('woff2'),
       url('../fonts/NanumGothic/NanumGothic-Regular.woff') format('woff'),
       url('../fonts/NanumGothic/NanumGothic-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/NanumGothic/NanumGothic-Bold.eot');
  src: url('../fonts/NanumGothic/NanumGothic-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumGothic/NanumGothic-Bold.woff2') format('woff2'),
       url('../fonts/NanumGothic/NanumGothic-Bold.woff') format('woff'),
       url('../fonts/NanumGothic/NanumGothic-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/NanumGothic/NanumGothic-ExtraBold.eot');
  src: url('../fonts/NanumGothic/NanumGothic-ExtraBold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumGothic/NanumGothic-ExtraBold.woff2') format('woff2'),
       url('../fonts/NanumGothic/NanumGothic-ExtraBold.woff') format('woff'),
       url('../fonts/NanumGothic/NanumGothic-ExtraBold.ttf') format('truetype');
}
 
body, table, div, p {font-family:'Nanum Gothic';}
cs


여튼 이런식으로 경로들과 물음표(?) 로 눈속임 등을 하여 지원하지 않는 브라우저에서 다운을 할지 말지도 설정해 주네요.


font-face 에 대해 더 자세한 정보를 담은 블로그

http://beautifulcss.com/archives/431

나눔고딕폰트.zip


반응형

'css' 카테고리의 다른 글

CSS 즉시 반영 (CSS Reflesh)  (1) 2017.05.10
[사스(Sass)] 2. Sass 사용법  (10) 2016.08.29
[사스(Sass)] 1. Sass 란 무엇인지 + 설치  (6) 2016.08.25
스크롤은 되지만 스크롤바는 안보이게...  (19) 2015.04.18

티스토리툴바