8강 React에 웹 폰트(Web Font) 적용하기

1. Style 적용을 위한 라이브러리 추가하기

  yarn add style-loader

  yarn add css-loader

2. 웹팩(Webpack) conf 파일 수정하기

'use strict'

const path = require('path');

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {

entry: {

main: ['./src/main.js']

},

output: {

path: path.resolve(__dirname, './build'),

filename: '[name].js'

},

module: {

rules: [{

test: /\.js$/,

include: path.resolve(__dirname, './src'),

loaders: 'babel-loader'

}, {

test: /\.css$/,

loader: "style-loader!css-loader"

}]

},

plugins: [

new CopyWebpackPlugin([{

context: './public',

from: '*.*'

}]),

],

devServer: {

contentBase: './public',

host: 'localhost',

port: 8080

}

}

▶ ./src/index.css

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

div {

font-family: 'Noto Sans KR' !important;

}

▶ ./src/main.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './components/App';

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

const theme = createMuiTheme({

typography: {

useNextVariants: true,

fontFamily: '"Noto Sans KR"'

}

});

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

  이후에 모든 컴포넌트 JS 파일에 import '../index.css';를 넣어주시면 됩니다.

※ 실행 결과 ※