[React] Material UI Typography 폰트 적용하기 (Material UI font custom) (구글 웹 폰트 적용하는 법)

1단계 : 구글 폰트 웹 사이트 접속하기

https://fonts.google.com/

Google Fonts

위 사이트에 접속해 원하는 폰트를 선택한다.

 

 

2단계 : 폰트 검색해서 찾기

맘에 드는 폰트를 찾아서 들어간다.

 

 

그리고 스크롤을 내려 Styles 탭에서 px을 조절하며 맘에드는 스타일을 고른다.

그리고 오른쪽에 있는 Select this style을 클릭한다.

 

 

3단계 : 폰트 스타일 복사하기

그럼 옆에 나오는 창에서 @import를 클릭한 후 아래 두 코드를 복사해둔다.

 

 

4단계 : HTML, CSS 파일에 붙여넣기

App.css

먼저 App.css 파일에 위와 같이 붙여넣기를 한다.

그러면 폰트 적용이 완료된다.

 

 

Material UI의 Typograph를 inspect한 창

하지만 약간의 문제가 생겼다.

이렇게 하면 전체적인 컴포넌트들의 폰트가 바뀌는 것은 맞으나 Material UI의 컴포넌트들은 적용되지 않는다는 것이다.

Material UI의 Typography 같은 것은 여전히 기본 폰트를 사용하고 있는 것을 볼 수 있다.

 

 

이런 Material UI 컴포넌트들의 font-family도 변경해주기 위해선 아래와 같이 @mui/material의 createTheme()와 ThemeProvider를 이용해야한다.

// App.tsx

import React from 'react';
import './App.css';
import {BrowserRouter, Route, Switch} from "react-router-dom";
import {createTheme, ThemeProvider} from "@mui/material";

const theme = createTheme({
  typography: {
    fontFamily: "'Noto Sans KR', sans-serif"
  }
})

function App() {
  return (
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <Switch>
            // Route 사용
          </Switch>
        </BrowserRouter>
      </ThemeProvider>
  );
}

export default App;

위와 같이 App.tsx 파일(typescript를 사용하지 않는다면 App.js)에서 createTheme의 객체 theme를 만들고 Router를 ThemeProvider 태그로 감싸준 후 객체 theme를 ThemeProvider의 속성에 넣어준다.

 

그러면 Material UI의 Typography에도 커스텀 font-family가 적용됨을 확인할 수 있다.

 

참고 : https://mui.com/customization/typography/