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;