font.css
/* nanum-gothic-400 - korean */
@font-face {
font-family: "Nanum Gothic";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(""),
url("/fonts/nanum-gothic-v17-korean-regular.woff2") format("woff2"),
url("/fonts/nanum-gothic-v17-korean-regular.woff") format("woff");
}
/* nanum-gothic-700 - korean */
@font-face {
font-family: "Nanum Gothic";
font-style: normal;
font-weight: 700;
font-display: swap;
src: local(""),
url("/fonts/nanum-gothic-v17-korean-700.woff2") format("woff2"),
url("/fonts/nanum-gothic-v17-korean-700.woff") format("woff");
}- woff2 와 woff 압축 폰트 사용
font의 유형중에서 널리 사용되는 형식을 (.ttf),(.otf) 가 널리 사용됩니다.
하지만 해당 포맷은 압축이 되지 않아 파일의 크기가 크기 때문에 네트워크 비용이 발생하기 때문에 압축이 된 포맷을 사용하는 것이 좋습니다.
(.woff),(.woff2) 은 (.ttf),(.otf) 에 비해 용량이 작아 효율적입니다.
다만 지원하지 않는 브라우저가 있으니 woff2 만을 사용하면 안되어 woff 까지 사용해주어야합니다. - font-display :swap 사용
MDN문서에 따르면 폰트를 다운받는 동안에 폰트 차단 기간, 폰트 교체 기간, 폰트 실패 기간이 존재하는데 swap은 다운로드 되기 전에 잠시 폰트를 차단했다가 준비가 완료되면 폰트를 교체하는 방식입니다. 폰트 교체로 인한 깜박임과 흔들림을 방지하기 위해 swap을 사용하곤 합니다. - src: local("")
사용자의 컴퓨터에 이미 폰트가 존재한다면 다운로드 없이 로컬 폰트를 사용하도록 설정합니다. - 영어, 한글 폰트 분리
unicode-range 를 사용하여 언어별로 폰트를 분리할 수 있습니다.혹은 폰트내에 한글이 없다면 font-family 우선순위를 통해 폰트를 다르게 적용할 수 있습니다.unicode-range:U+AC00-D7A3;
