[React] webpack 과 babel로 프로젝트에 폰트 파일 적용하기

0. 들어가며

해당 프로젝트는 webpack과 babel을 사용해서 만든 프로젝트에 그동안 React 프로젝트를 할 때마다 

헷갈리던 폰트 파일을 적용하는 방법을 작성하였다. 

 

1. 준비물

특별하게 사용한 것은 React 프로젝트, 구글에서 가져온 Font 파일(ttf), styled-components 패키지가 있다. 

 

2. 시작 

public 폴더 이용하기

먼저 구글에서 가져온 폰트를 public 폴더에 넣어주었다.

 

import React from "react";
import styled from "styled-components";

const CustomDiv = styled.div`
  @font-face {
    font-family: "BlackHanSans";
    src: url("./assets/fonts/BlackHanSans-Regular.ttf") format("truetype");
  }

  * {
    font-family: "BlackHanSans";
  }
`;

const App = () => {
  return (
    <div>
      <div>
        <h1>Hello! Webpack World!</h1>
      </div>
      <CustomDiv>
        <h1>Hello! Webpack World!</h1>
      </CustomDiv>
    </div>
  );
};

export default App;

그다음 styled-components를 사용해 div에서 font-family를 가져온 폰트에 지정해주었다. 

 

    src: url("./assets/fonts/BlackHanSans-Regular.ttf") format("truetype");

url은 public 폴더를 기준으로 조회를 하기 때문에 public에 폰트 파일을 넣어준 것이다.

 

src 폴더에서 불러오기

public에서 불러오는것이 아닌 src 폴더에서 불러오고 싶은 경우도 있다. 

import React from "react";
import styled from "styled-components";
import BlackHans from "./assets/fonts/BlackHanSans-Regular.ttf";

const CustomDiv = styled.div`
  @font-face {
    font-family: "BlackHanSans";
    src: url(${BlackHans}) format("truetype");
  }

  * {
    font-family: "BlackHanSans";
  }
`;

const App = () => {
  return (
    <div>
      <div>
        <h1>Hello! Webpack World!</h1>
      </div>
      <CustomDiv>
        <h1>Hello! Webpack World!</h1>
      </CustomDiv>
    </div>
  );
};

export default App;

src: url(${BlackHans}) format("truetype");