@font-face unicode-range 사용하기

2020년 4월 10일
  • css
  • font

unicode-range를 적용하지 않은 font-face 하나와, 특정 unicode-range를 적용한 font-face 를 작성하면, 하나의 font-family로 다른 폰트들을 사용할 수 있다.

unicode-range는 아래와 같다

전체 : U+0020-007E

특수문자 : U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E

영문 : U+0041-005A(대문자), U+0061-007A(소문자)

숫자 : U+0030-0039

Noto sans를 기본적으로 쓰면서 숫자만 Open sans로 쓰고 싶으면 아래와 같이 작성하면 된다.

@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans Regular'), local('NotoSans-Regular'),
    url(../fonts/notosans/woff/NotoSansKR-Regular-Hestia.woff) format('woff'),
}

@font-face {
  font-family: 'Noto Sans Korean';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('Opensans-Regular'),
  url(../fonts/openSans/OpenSans-regular.woff) format('woff');
  unicode-range: U+0030-0039;
}