<aside> ✋

“한글은 Noto Sans, 영문은 Roboto 폰트로 적용해 주세요.”

</aside>

만약 이런 요청이 있다면 어떻게 설정해야 할까? 사용할 언어별로 Class를 지정해 줄 수도 있겠지만, unicode-range 속성을 이용하면 클래스를 각각 지정하는 번거로움 없이 폰트를 적용할 수 있다.

💡unicode-range란?

unicode-range 란 @font-face 로 정의된 폰트를 특정 문자 범위에만 지정하는 속성이다. 범위 내의 문자를 사용하지 않으면 폰트를 다운로드하지 않으며, 범위 내의 문자를 1개라도 사용했다면 폰트 전체를 다운로드한다.

📌Syntax

unicode-range: U+26; /* 단일 코드 */
unicode-range: U+0025-00FF; /* 코드 포인트 범위 */
unicode-range: U+4??; /* 와일드카드 범위 */
unicode-range: U+0025-00ff, U+4??; /* 다중 값 */

1. 단일 코드에 지정하기

   단 하나의 코드에만 지정하는 방법이다. 예를 들어 '&'라는 기호만 특정 폰트를 적용하고 싶다면 U+26 (U+0026)을 지정해 준다.

2. 코드 포인트 범위에 지정하기

   한 유니코드 포인트부터 다른 유니코드 포인트까지의 범위에 지정하는 방법이다. 만약 U+0025-00FF 라고 지정한다면, U+0025 부터 U+00FF 까지의 코드가 모두 적용된다.

3. 와일드카드 범위에 지정하기

   '?' 문자를 사용하여 와일드카드 문자를 포함하는 유니코드 포인트의 범위에 지정하는 방법이다. U+4?? 라고 지정할 경우 U+0400 부터 U+04FF 까지의 범위에 속하는 문자에 적용된다.

4. 여러 범위에 지정하기

   ',' 를 사용하여 여러 범위에 지정하는 방법이다. 만약 U+0025-00ff, U+4?? 라고 지정하면 U+0025 부터 U+00FF 까지, 그리고 U+0400 부터 U+04FF 까지의 범위에 적용할 수 있다.

📕 활용 예

/* fallback 폰트: unicode-range를 설정하지 않으면 모든 범위에 적용된다. */
@font-face {
	font-family: 'Noto Sans';
	src: url('font/Noto Sans.woff');
}

/* 영문 대소문자 - Roboto */
@font-face{
	font-family: 'Noto Sans';
	src: url('font/Roboto-Regular.woff');
	unicode-range: U+0041-005A, U+0061-007A;
}

/* 숫자 - Open Sans */
@font-face{
	font-family: 'Noto Sans';
	src: url('font/OpenSans-Regular.woff');
	unicode-range: U+0030-0039;
}

html,body { font-family: 'Noto Sans'; 

먼저 하나의 폰트를 전체 적용하고, 같은 이름의 font-family 를 갖는 @font-face 를 각각 추가한 예시이다.

• 첫 번째 @font-face 에는 unicode-range 없이 전체 적용할 Noto Sans를 연결
• 두 번째 @font-face 에는 영문 대문자, 소문자 범위에 Roboto를 연결
• 세 번째 @font-face 에는 숫자 범위에 Open Sans를 연결
• 설정이 끝났다면 폰트를 사용할 위치에 앞서 전체 적용한 font-family 를 지정

이렇게 하면 앞서 설정한 모든 @font-face 가 Noto Sans라는 동일한 이름의 font-family 를 갖 기 때문에 따로 Roboto나 Open Sans를 명시하지 않아도 된다.