웹 페이지를 위해 압축된 폰트, WOFF 적용 방법

WOFF는 압축된 폰트로 용량이 작아야 하는 웹에 적합한 폰트다.

WOFF를 쓰려면 먼저 일반 폰트에서 WOFF 폰트로 변환해야 한다.

 

1. WOFF로 바꾸기

다음 사이트에서 폰트를 WOFF와 WOFF2로 바꿀 수 있다.

 

 

transfonter.org

 

2. WOFF와 WOFF2 파일 이동

다운 받은 파일의 압축을 풀고 .woff와 .woff2 파일을 프로젝트의 fonts 폴더로 옮긴다.

 

3. font-face 설정

CSS의 제일 앞쪽에 아래의 코드를 입력해서 폰트를 불러오고 어떻게 참조할 것인지 설정한다.

@font-face {
  font-family: "opensans";
  src: url("fonts/opensans-regular-webfont.woff2") format("woff2"),
    url("fonts/opensans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

font-family에서 설정한 이름으로 불러올 수 있게 된다.

src에서 폰트 파일을 저장한 경로를 지정한다.