@font-face

body {
  font-family : 'gulim', 'gothic' , 'dotum'
}

- body에 font-family라는 속성으로 사용할 폰트명을 적는다.

- font-family는 상속(inherit)되므로 body에 적용하면 전체에 적용됨

 - 사용자의 컴퓨터에 설치된 폰트가 순서대로 보여진다.

    위의 경우 사용자의 컴퓨터에 gulim이 없으면 gothic이, gothic이 없으면 dotum이 적용된다)

 

 

사용자의 컴퓨터에 없는 폰트를 적용시켜서 보여주고싶으면

CSS파일 최상단에 @font-face 라는 명령어를 넣고, 그 안에 적용할 폰트의 경로와 이름을 적으면 된다.

@font-face {
  font-family: 'nanumGothic';
  src: url(../font/NanumGothicLight.woff);
}

@font-face {
  font-family: 'nanumGothic';
  font-weight: 800;
  src: url(../font/NanumGothicBold.woff);
}

 

 

단, 한글폰트의 용량이 크므로 font-face로 ttf형식의 한글폰트를 적용시킬 때는 1-2개만 넣어야 한다.

사이트가 느려진다.

웹용으로 나온 woff 를 사용하면 용량을 덜 차지하므로 woff를 사용한다.

 

 

폰트 파일을 호스팅해주는 Google Fonts를 사용하면

내가 만든 사이트 아니라 구글에서 폰트를 전송해서 트래픽절약하거나 로딩시간 단축할 수 있다.