웹폰트 적용하기(ttf, otf, woff)

웹폰트 적용하기

웹폰트란 홈페이지나 블로그 등에 적용하는 폰트를 의미한다. 이제 확장자에 대한 설명과 간단한 적용 방법에 대해 설명해보겠다.

📌 ttf와 woff의 차이

👉 ttf(true type font), otf(open type font)

pc에 설치하여 사용하는 폰트

👉 woff(web open font format)

otf와 ttf를 압축하여 웹에서 사용할 수 있도록 만들어준 포맷

📌 브라우저 작동 폰트

구분	익스플로어	크롬	파이어폭스	사파리
TTF/OTF	O	O	O	O
WOFF	O	O	O	O
WOFF2	X	O	O	O
SVG	X	O	X	O

(출처: https://moo-you.tistory.com/55)

📌 로딩 순서

로딩 순서는 파일 크기가 작은 순서이므로 woff2 > woff > ttf > eot > svg 순이다. 가장 작은 애는 woff2 이지만 woff2 파일은 인터넷 익스플로어에서 작동하지 않는다.

---

📌 폰트 적용 방법

👉 첫 번째, 폰트 파일 다운로드

폰트를 적용할 때 바로 import 안에 해당 폰트의 url을 넣어주는 방법도 있으나, IE에서 적용되지 않을 수 있기에 직접 파일을 저장하여 넣어주는 방식을 권장한다.

👉 두 번째, font.css 작성

1 ) 폰트 선언 및 정의

@font-face {
    font-family: 'Noto Sans KR';
    src:url('./fonts/noto-sans-kr.ttf') format('woff'),
        url('./fonts/noto-sans-kr.ttf') format('woff2');
    /* 이런식으로 weight를 지정해서 사용할 수도 있다!*/
    font-weight: 400;
} 

여기서 폰트를 선언 및 정의해준다. font-family 에 해당 폰트의 이름을 임의로 넣어줄 수 있다..

2 ) 폰트 적용

body {
   font-family: 'Noto Sans KR', sans-serif;
}

폰트를 적용하고 싶은 곳에 font-family 를 넣어주면 된다.