React 폰트 적용 하는 방법

react 폰트 적용

React Project에서 웹 폰트를 적용하는 방법을 알려드리려고 합니다.

우선 Style 적용을 위한 material-ui 라이브러리를 설치합니다.

npm install @material-ui/core

index.css에 웹 폰트를 import 해줍니다.

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-jp.css);

index.js에서 wrapping 작업을 해줍니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  typography: {
    fontFamily: ('Spoqa Han Sans'),
  },
});

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

 정상적으로 css가 적용된 것을 확인할 수 있습니다.