[CSS] @font-face unicode-range 한글, 영문, 숫자 다른 전역 폰트 적용하기 global font setting 적용된 폰트 확인하기

글을 시작하기에 앞서 @font-face를 설정하려면 웹폰트를 사용하는 것보다 폰트 파일 자체를 프로젝트 내부에 assets으로 저장해서 사용하는 것을 권장한다고 한다.

이와 관련해서 사실 정확한 이유는 잘 모르겠다. 혹시 아시는 분 댓글좀.....

 

프론트 엔드로 직무 전환을 한 뒤 다양한 프로젝트에 참여해볼 수 있었는데 그중 진짜(!?) 웹 디자이너와 함께 했던 프로젝트는 대부분 폰트가 두가지로 나뉘었다. 

 

- 기본폰트 Noto Sans KR

- 숫자폰트 Roboto 

 

사실 처음에는 기본폰트를 Noto Sans로 설정해두고 숫자 타입이 들어가는 요소들만 Roboto를 설정했는데 사실 only 숫자만 들어가는 요소보다는 주로 'XX개', 'XX,000원', 'XX명' 등 한글과 섞이는 경우가 많고 그렇다고 하나하나 숫자만 따로 묶어서 설정하는 기도 번거롭다.

 

그러던 중 unicode-range로 특정 문자나 언어를 지정 폰트로 설정하는 방법을 알게됐다.

 

@font-face 설정

이 방법은  @font-face를 사용하는 것으로 위에서 썼다시피 폰트를 파일으로 프로젝트에 첨부하는 것이 좋다.

 

아래 코드는 기본 텍스트는 Noto Sans KR, 숫자의 경우 Roboto, 영문의 경우 Noto Sans로 설정한 코드이다

@font-face {
    font-family: "Noto Sans KR";
    src: url(../fonts/Noto_Sans_KR/NotoSansKR-Regular.otf) format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto/Roboto-Regular.ttf) format("truetype");
    unicode-range: U+0030-0039; /* Only Number */
    font-style: normal;
} 

@font-face {
    font-family: "Noto Sans";
    src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf) format("truetype");
    unicode-range: U+0041-005A, U+0061-007A; /* Only English */
    font-style: normal;
}

html,
header,
body,
footer,
nav,
input,
select {
    font-family: "Noto Sans", "Roboto", "Noto Sans KR", sans-serif;
}

처음에 html이랑 body에만 적용했는데 위에 적어놓은 다른 요소들에 제대로 안먹혀서 추가해줌

 

font-family의 경우 앞에서부터 순차적으로 적용되기때문에 unicode-range를 설정한 폰트를 먼저 써주고 마지막으로 전체적으로 적용할 폰트를 써준다

728x90

 

자주 쓰는 unicode-range

default : U+0-10FFFF
한글 :  U+AC00-D7A3
숫자 :  U+003-0039
영문 :  U+0041-005A(대문자), U+0061-007A(소문자)
특수문자 : U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E

 

이를 응용하면 특정 문자나 특수문자만 특정 폰트로 지정해서 디자인적인 효과를 줄수도 있을 것 같다.

 

 

브라우저에 적용된 폰트 확인하기

실제로 브라우저에 적용된 폰트를 확인하려면 개발자도구에서 computed 탭을 확인하면 된다

• 영문

영문 폰트는 Noto Sans로 설정되어있고

---

• 한글

한국어 폰트는 Noto Sans KR

 

---

• 숫자

숫자를 Roboto로 각각 잘 적용된 것을 확인할 수 있다.

 

 

 

 

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

https://itrooms.tistory.com/818

https://wazacs.tistory.com/48