@font-face 작성하기(feat. woff, woff2 faild to decode downloaded font 에러)

Pretendard폰트를 예로, 작성하는 font-face

Pretendard 다운로드
Pretendard 페이지 바로가기
Pretendard 다운로드 하기

pretendard-regular cdn

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

Variable 폰트 작성법

Pretendard Variable 폰트는

가변폰트란 의미로 woff2-variations 포맷으로 작성한다

@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 100 300 900;
    font-style: normal;
    font-display: swap;
    src: local('Pretendard Variable'), 
    url('../../../fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');
}

static 파일 작성법

@font-face {
    font-family: 'Pretendard';
    src: url('../../../fonts/pretendard/Pretendard-Thin.woff') format('font-woff');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../../../fonts/pretendard/Pretendard-ExtraLight.woff') format('font-woff');
    font-weight: 200;
    font-display: swap;
}

Thin부터 Black까지는

font-weight를 100부터 900까지 src에 해당 파일에 맞춰 작성하면된다.

woff확장자는 failed to decode downloaded font 에러가 자꾸나서

format을 font-woff로 쓴다.

woff2는 font-woff2로 쓰면 되겠다.

그 외 파일확장자 포맷 작성법

@font-face {
    font-family:'Pretendard';
    font-weight: 100;
      src: local('Pretendard'), /* 이미설치 되어있으면 리소스 요청 안함 */
       url('../fonts/pretendard/Pretendard-Thin.eot'), /* IE8 이하 */
       url('../fonts/pretendard/Pretendard-Thin.woff2') format("font-woff2"), /* woff보다 압축률 더 좋음 */
       url('../fonts/pretendard/Pretendard-Thin.woff') format("font-woff"), /* 모든 브라우저 */
       url('../fonts/pretendard/Pretendard-Thin.ttf') format("truetype"); /*안드로이드 4.4버전이하*/
}

나머지 확장자는 이렇게 쓰기