[CSS] woff 폰트 적용하기

안녕하세요 :)

오늘은 woff가 무엇인지 그리고 해당 폰트를 어떻게 적용하는지 알아보도록 하겠습니다.

 

woff란?

woff는 웹 폰트 파일형식을 말합니다. 웹 폰트는 시스템 폰트와 반대되는 개념인데요, 시스템 폰트는 사용자의 기기에 기본적으로 설치되어 있는 폰트를 의미합니다. 반면 웹 폰트는 애플리케이션 실행 전 따로 다운로드를 하아야 하죠.

 

이전에는 웹 폰트로 TTF나 OTF와 같은 파일 형식(OpenType 폰트라고 부른다네요)을 이용했습니다. 하지만 파일의 크기가 너무 컸고 로컬 환경에 설치가 가능했기 때문에 라이센스 문제가 발생했습니다. 따라서 woff와 같이 압축된 형식의 설치가 불가능한 파일 형식을 필요로 하게 된 것이죠.

 

woff 폰트를 다운로드하면 아마 woff2 파일도 같이 받게 되실 겁니다. woff2는 woff를 더 많이 압축한 한 단계 업그레이드 된 형식이라고 이해하시면 될 것 같습니다.

 

적용하기

1. src 폴더 아래 fonts 폴더를 생성합니다.

위 사진처럼 저는 src폴더 아래에 fonts 폴더를 만들어 폰트를 저장해 사용합니다.

 

2. @font-face로 폰트 불러오기

그리고 css 파일에서 @font-face를 통해 폰트를 불러오면 끝입니다. 이때 사용할 수 있는 방법이 여러 가지인데요, 제가 사용하는 방법은 Style Linking이라는 적용방식입니다. Style Linking을 이용하면 일일이 font-family 이름을 설정하지 않고 하나의 이름으로 모든 폰트 스타일을 커버할 수 있기 때문에 이후 코드 작성과 유지보수에 이점이 많습니다.

 

저는 최상단의 css 파일에 아래와 같이 폰트를 불러왔습니다.

@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Pretendard-Regular.woff2'),
    url('../fonts/Pretendard-Regular.woff'),
    url('../fonts/Pretendard-Regular.subset.woff2'),
    url('../fonts/Pretendard-Regular.subset.woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/Pretendard-Bold.woff2'),
    url('../fonts/Pretendard-Bold.woff'),
    url('../fonts/Pretendard-Bold.subset.woff2'),
    url('../fonts/Pretendard-Bold.subset.woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-style: normal;
  src: url('../fonts/Pretendard-ExtraBold.woff2'),
    url('../fonts/Pretendard-ExtraBold.woff'),
    url('../fonts/Pretendard-ExtraBold.subset.woff2'),
    url('../fonts/Pretendard-ExtraBold.subset.woff');
}

font-family 이름은 다 같은 'Pretendard'이지만 이후 코드 작성할 때 font-weight이나 font-style에 맞게 알맞은 폰트파일을 불러와 적용하게 됩니다.

 

한번 확인해볼까요?

폰트가 잘 불러와지고 있네요 ㅎㅎ