웹팩을 사용하여 타입스크립트 프로젝트에 폰트를 적용하는 방법을 알아보겠습니다.

폰트 파일 추가

먼저, 프로젝트 디렉토리에 사용할 폰트 파일을 추가합니다. 보통은 src/fonts 디렉토리에 폰트 파일을 저장하는 것이 일반적입니다.

웹팩 구성 설정

웹팩의 설정 파일(webpack.config.js 또는 webpack.config.ts)에서 module 섹션에 다음과 같이 file-loader를 추가하여 폰트 파일을 로드하도록 설정합니다.

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

위 설정은 .woff, .woff2, .eot, .ttf, .otf 확장자를 가진 폰트 파일을 로드하기 위한 것입니다.

타입스크립트에서 폰트 사용

타입스크립트 파일에서 폰트를 사용하려면 CSS 파일에서 폰트를 import하거나 CSS 속성을 통해 사용해야 합니다. 그런 다음, 타입스크립트에서 해당 CSS 파일을 import하여 사용할 수 있습니다.

예를 들어, styles.css 파일에서 폰트를 import하고 타입스크립트 파일에서 해당 CSS 파일을 import하여 사용할 수 있습니다.

// styles.css
@font-face {
  font-family: 'CustomFont';
  src: url('./fonts/custom-font.woff') format('woff');
}

// index.ts
import './styles.css';

// Use the custom font in your styles
document.body.style.fontFamily = 'CustomFont';

위 예제에서 custom-font.woff는 폰트 파일의 실제 경로에 따라 수정해야 합니다.

이제 웹팩을 실행하여 폰트를 포함한 타입스크립트 프로젝트를 빌드할 수 있습니다.

이제 웹팩을 실행하여 폰트를 포함한 타입스크립트 프로젝트를 빌드할 수 있습니다.

마치며

이제 웹팩을 사용하여 타입스크립트 프로젝트에 폰트를 적용하는 방법을 알아보았습니다. 향후 프로젝트에서 폰트 적용에 도움이 되기를 바랍니다.

참고 문서:

• 웹팩 공식 문서
• 타입스크립트 공식 문서
• file-loader 공식 문서