꿀팁 저장소

올바른 개발자가 개발을 하다보면

자기의 입맛, 혹은 팀의 입맛에 맞게

개발에 도움이 되는 환경을 세팅해나가게 된다.

그러다보면 로컬에서는 적용되는데 서버에서는 뭔가 적용이 안되거나하는

경우가 종종 발생한다.

이번엔 그중에서 font 적용에 대해서 알아본다.

/MyApp
  /public
    /fonts
      honey-Bold.ttf
      honey-Bold.eot
      honey-Regular.ttf
      honey-Regular.eot
    /images
    index.html
  /src
    app.js
    index.css

자, 주어진 프로젝트 환경의 파일트리가 위와 같은 상황이다.

index.css에서 프로젝트 내 모든 텍스트의 폰트를 잡아주려고한다.

어떻게 하면될까?

// index.css

@font-face {
    font-family: 'honey';
    src: url('/public/fonts/honey-Bold.eot');
    src: url('/public/fonts/honey-Bold.eot') format('embedded-opentype'), url('/public/fonts/honey-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'honey';
    src: url('/public/fonts/honey-Regular.eot');
    src: url('/public/fonts/honey-Regular.eot') format('embedded-opentype'), url('/public/fonts/honey-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

* {
    font-family: 'honey', sans-serif;
}

honey라는 폰트는 없겠지만 예를들면 이렇다.

woff 까지 이와 같은 방식으로 설정해주면 된다.

eject한 CRA 프로젝트라면 빌드 했을때,

dist폴더가 자동으로 생성되며

dist/ 폴더아래로 빌드된 파일이 들어가게되는데

여기서 부터 문제가 발생한다.

빌드해 서버에 업로드했더니 폰트가 먹지않는 이슈

왜그럴까?

dist/ 폴더에는 public/fonts/ 가 존재하지 않는다.

간단한 webpack 설정을 통해 경로를 맞춰주어야한다.

npm install file-loader --save-dev
npm install copy-webpack-plugin --save-dev

준비물은 위 두가지이다.

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

...

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/',
            publicPath: '/public',
          }
        }
      ]
    }
  ]
},

...

plugins: [
  new CopyWebpackPlugin({
    patterns: [
      {
        from: 'public/fonts',
        to: 'publi/fonts',
      }
    ]
  })
],

핵심은 CopyWebpackPlugin 부분이다.

여기서 무슨 일이 일어나냐면

public/fonts/ 경로의 파일들은

dist 아래에도 똑같이 만들어주는것이다.

그러면 빌드후에도 css설정이 당연하게도 잘 들어맞는다.