1. @font-face란?

일반적으로 사이트를 방문한 사용자의 컴퓨터에 폰트가 없으면 제작자가 의도한 대로 디자인을 볼 수가 없기 때문에 CSS,스타일 시트 내에서 ‘font-family’ 속성 정의를 통해서 사용하게 된다. 그 이유는 제작자가 의도한 글꼴이 없을 경우를 대비해서 다른 글꼴로 대체해서 보여질 수 있도록 하기 위해서 이다. 하지만 @font-face는 제작자가 의도한 글꼴이 없을 경우 직접 서버에서 다운로드해서 적용할 수 있도록 한 것이 특징으로 컴퓨터에 설치된 폰트만으로 작업을 해야했던 제약을 없어지게 만들었다.

@font-face는 제작자가 사이트를 제작할 때 폰트를 A라는 폰트를 정의하였을 때 사이트를 방문한 사용자가 A폰트가 없다면 다운로드해서 적용이 가능하도록 만들어 주는 속성이다.

1. 사용법

@font-face {
  font-family : '폰트 스타일'; /* 한가지 폰트만 정의할 수 있음 */
  src: url('파일 경로') format('파일 형식')
  font-style : normal; /* 선택 속성 */
  font-weight : normal; /* 선택 속성 */
}

ex)

@font-face {
  font-family : 'Gothic';
  src:local(*), 
  url('font/Gothic.ttf') format('truetype'),
  url('font/Gothic.otf') format('opentype'),
  font-style : normal;
  font-weight : normal;
}

local(폰트명)을 적으면 사용자 컴퓨터에 해당하는 폰트가 있을 경우 우선 적용, local(*) 값의 괄호 안쪽에 포함된 * 기호는 사이트를 방문한 사용자 컴퓨터에 존재하지 않는 글꼴을 임의로 지정하기 위한 것으로, 사용자가 접속하면 당연히 파일이 없기 때문에 URL에 명시된 경로로 파일을 다운로드 받아서 보여주게 된다.