React와 Firebase로 앱 개발하기 - React 웹 폰트 적용하기

yarn add style-loader css-loader

webpack.config.js

'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
    }
}

 

 

index.css

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

dir{
    font-family: 'Noto Sans KR' !important;
}

 

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.css';
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'));