[React] 프로젝트에 폰트 적용하기 (+MUI)

 

리액트 프로젝트에 폰트를 적용해 주자

 

폰트 다운로드하기

먼저 구글 폰트에서 원하는 폰트를 다운로드한다

https://fonts.google.com/

Browse Fonts - Google Fonts

원하는 스타일의 폰트들만 프로젝트 상단에 assets/font 폴더를 만든 뒤 넣어주었다

 

css 파일 작성하기

다운로드한 폰트를 사용하기 위해 css파일을 만들고, 각 폰트를 선언해 준다

@font-face {
  font-family: 'Dohyeon';
  src: url('../assets/fonts/DoHyeon-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url('../assets/fonts/NotoSansKR-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/NotoSansKR-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/NotoSansKR-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/NotoSansKR-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/NotoSansKR-Bold.ttf') format('truetype');
}

 

이후, 이 파일을 최상단 파일인 index.js 파일에 추가시켜 준다

import './styles/font.css';

 

사용하기

style={{
	fontFamily: 'Dohyeon',
	fontSize: '28px',
}}

이제 스타일에서 fontFamily로 불러 사용하면 된다

 

---

MUI에서 사용하기

만약, 프로젝트에서 Material UI를 사용하고 있다면 Material UI 컴포넌트들에는 폰트가 적용되지 않는 것을 볼 수 있다

MUI에서도 폰트를 적용시키고 싶다면 @mui/material의 ThemeProvider, createTheme를 통해 적용시켜주어야 한다

 

theme을 만들고 폰트를 적용시킨 후 이를 ThemeProvider로 넣어주면 끝

const theme = createTheme({
  typography: {
    fontFamily: " 'Noto Sans KR', sans-serif",
  },
});
  
return (
  <>
    <ThemeProvider theme={theme}>
    ...
    </ThemeProvider>
  </>
);