한글, 영어, 숫자 서로 다른 폰트 적용하기(unicode-range)

작업을 하다 보면 한글을 나눔고딕, 영문/숫자는 OpenSans 이런식으로 서로 다르게 폰트를 설정해주어야 할떄가 있다.
아무것도 모르던 시절에는 각 클래스에 font를 다르게 적용시켰는데, 정말 쉬운 방법으로 unicode-range를 알게 되었다.

unicode-range란?

@font-face로 정의된 폰트를 특정 character의 범위를 지정해줄 수 있다.

딱 한 단어에 속하는 유니코드도 지정해 줄 수 있다.
예를 들어 U+26(U+0026) 같은 경우는 특수 문자 '&'를 나타내는데,
이를 unicode-range에 지정해 준다면, &만 @font-face로 정의된 폰트가 적용된다.

🔆 사용 예시

예시 css 코드

/* Apple SD Gothic Neo */
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-style: normal;
	font-weight: 400;
	src: url(../font/AppleSDGothicNeoR.woff2) format("woff2");
	unicode-range: U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-style: normal;
	font-weight: 300;
	src: url(../font/AppleSDGothicNeoL.woff2) format("woff2");
	unicode-range: U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF
}

/* Poppins */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	src: url(../font/Poppins-ExtraBold.woff2);
	unicode-range: U+0030-0039,U+0041-005A,U+0061-007A
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url(../font/Poppins-Bold.woff2);
	unicode-range: U+0030-0039,U+0041-005A,U+0061-007A
}

⚡️ 자주 사용할 만한 유니코드 범위

• 한글 범위: U+AC00-D7A3
• 영어 대문자 범위 : U+0041-005A
• 영어 소문자 범위 : U+0061-007A
• 숫자 범위 : U+0030-0039
• 특수 문자: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E

한글 전체 적용 유니코드 범위

unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;