[React] 다중 폰트 적용 feat. Material Ui

요구사항: 한글은 a 폰트로, 그 외에는 b 폰트로 적용"해줘"

 

해결방법 요약: unicode range를 사용하여 분기처리

 

* 사용할 폰트

- 한글: Spoqa Han Sans Neo (오픈소스, 직접 설치, https://spoqa.github.io/spoqa-han-sans/)

- 그외: Roboto (npm 다운가능)

 

 

* create-react-app 으로 프로젝트를 만들었다고 가정

 

1. 폰트를 다운받는다. (npm, 직접 다운...)

# roboto 폰트 다운
npm install @fontsource/roboto

2. 다운받은 폰트를 src 디렉토리안에 font라는 디렉토리를 생성한 뒤, 이동(Spoqa 폰트만)

3. src 디렉토리안에 css 디렉토리도 생성한 뒤, font.css 파일 작성

 

unicode-range로 한글(U+AC00-D7A3)만 적용시킨다. (range는 구글검색, 여러가지 케이스 커버 가능)

@font-face {
    font-family: "Spoqa Han Sans Neo";
    font-weight: 700;
    src: url("../font/SpoqaHanSansNeo-Bold.ttf") format("truetype");
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: "Spoqa Han Sans Neo";
    font-weight: 500;
    src: url("../font/SpoqaHanSansNeo-Medium.ttf") format("truetype");
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: "Spoqa Han Sans Neo";
    font-weight: 400;
    src: url("../font/SpoqaHanSansNeo-Regular.ttf") format("truetype");
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: "Spoqa Han Sans Neo";
    font-weight: 300;
    src: url("../font/SpoqaHanSansNeo-Light.ttf") format("truetype");
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: "Spoqa Han Sans Neo";
    font-weight: 100;
    src: url("../font/SpoqaHanSansNeo-Thin.ttf") format("truetype");
    unicode-range: U+AC00-D7A3;
}

.custom-font {
    font-family: "Spoqa Han Sans Neo", "Roboto";
}

4. index.js (react 최초 적용파일) 에 css 임포트 시킨다. (임포트 이외부분은 생략)

// css 초기화 파일 (검색하면 많이 나옴)
import "./css/reset.css";
// roboto 폰트는 npm으로 받았기 때문에 아래와 같이 작성하면 끝
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
// 스포카 폰트 import
import "./css/font.css";

5. root 컴포넌트에 font.css 파일에서 작성한 custom-font를 적용시킨다. (Container 컴포넌트는 material ui 에서 제공하는 컴포넌트이다. 레이아웃만 적용하기 때문에, 각자 상황에 맞게 class만 적용시켜주면 된다.)

// App.js
import { Container } from "@mui/material";

function App() {
	return (
		<Container className="custom-font">
		...
		</Container>
	);
}

export default App;

6. (Option) Material Ui 컴포넌트에도 모두 적용

Material Ui를 사용하다보면, 라이브러리 자체에 강제로 폰트를 설정하는 부분이 있어서, 이것도 내가 사용할 폰트로 직접 변경작업이 필요하다.

(function 내부에 ThemeProvider 컴포넌트로 Wrapping 해주면 된다.)

// App.js
import { Container } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const fontTheme = createTheme({
	typography: {
    fontFamily: ["Spoqa Han Sans Neo", "Roboto"].join(","),
  }
});

function App() {
  return (
    <ThemeProvider theme={fontTheme}>
      <Container className="custom-font">
			  ...
      </Container>
    </ThemeProvider>
  );
}

export default App;

7. (참고) 폰트 사용할때..

css 를 잘 만지지 않는사람들이면, 폰트를 많이 import하는 의문이 있을 수 있는데, css파일을 보면 font-weight라는게 있다. (굵기 설정)

텍스트(ex: p, span...) css 속성에 font-weight를 font.css에 있는 font-weight랑 맞추면 굵기가 적용된다.

// react styled-components 라이브러리 사용
const HelloText = styled.p`
	font-weight: 500;
`;