React 프로젝트 Font 적용하기

해당 글에서는 Material-Ui 라이브러리를 사용하여 React 프로젝트에 웹 Font를 적용하는 방법을 정리합니다.

먼저 폰트파일은 아래 사이트에서 다운로드 받을 수 있습니다.

 

무료 한글 폰트 사이트  ↓↓↓

https://noonnu.cc/index

 

이후 create-react-app으로 프로젝트 생성 했다는 가정하에 진행합니다.

 

01. material-ui 설치

npm install @material-ui/core

 

 

02. font 디렉토리 생성

src
|   App.tsx
|   index.css
|   index.tsx
|   react-app-env.d.ts
|   serviceWorker.ts
|
+---fonts
|       CookieRunBold.ttf

위와 같이 index 경로에 fonts 디렉토리를 생성하고 앞서 다운받은 폰트파일 *.ttf를 넣습니다.

 

 

03. index.css에서 font-family 등록

// index.css
@font-face { font-family: 'CookieRun Bold'; src: url(./fonts/CookieRunBold.ttf) format('truetype'); }

 

04. index.tsx 에서 전체 App 컴포넌트 Wrapping

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  typography: {
    fontFamily: 'CookieRun Bold',
  },
});

ReactDOM.render(
    <MuiThemeProvider theme={theme}>
      <App />
    </MuiThemeProvider>
  , document.getElementById('root'));

 

material-ui는 기본 theme을 가집니다.

default theme 일부 캡쳐

 

그리고 createMuiTheme와 MuiThemeProvider로 커스터마이징 가능합니다.

폰트의 경우 typography의 fontFamily를 커스터마이징 해주면 됩니다.