[CSS] unicode-range로 영어, 한글에 각각 다른 폰트 적용하기

GlobalStyle.js에 작성해야한다.

createGlobalStyle을 상속받아 만든 GlobalStyle 컴포넌트에

@font-face {
  font-family: "NanumSquareB";
  src: url(${han}) format('woff');
  font-style: normal;
}

@font-face {
  font-family: "NanumSquareB";
  src: url(${eng}) format('woff'); 
  font-style: normal;
  unicode-range: U+0041-005A, U+0061-007A;
}

* {
  font-family: "NanumSquareB";
}

특정 문자만 변경하고 싶다면

모든 문자 : U+0020-007E
특수문자 : U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
영문 : U+0041-005A(대문자), U+0061-007A(소문자)
숫자 : U+0030-0039

를 unicode-range 속성에 넣어주자.

전체코드

import { createGlobalStyle } from "styled-components";
import han from "./assets/fonts/NanumSquareB.woff";
import eng from "./assets/fonts/GmarketSansTTFBold.woff";
import reset from "styled-reset";

const GlobalStyle = createGlobalStyle`

@font-face {
  font-family: "NanumSquareB";
  src: url(${han}) format('woff');
  font-style: normal;
}

@font-face {
  font-family: "NanumSquareB";
  src: url(${eng}) format('woff'); 
  font-style: normal;
  unicode-range: U+0041-005A, U+0061-007A;
}

* {
  font-family: "NanumSquareB";
}
`;

export default GlobalStyle;