230908 개발일지 TIL - React 프로젝트에 Pretendard 웹폰트 적용

React 프로젝트에 Pretendard 폰트 적용

Pretendard는 한글과 영문이 모두 잘 어울리는 글꼴로, UI 디자인에서 자주 사용된다.

1. 먼저, Pretendard의 GitHub 저장소(https://github.com/orioncactus/pretendard)에서 웹폰트 파일(.woff, .woff2 등)을 다운받는다.
2. 다운받은 웹폰트 파일들을 프로젝트의 public 폴더나 적당한 위치에 저장한다.
3. 그런 다음 styled-components를 사용하여 글로벌 스타일에 @font-face 규칙을 추가한다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Pretendard';
    src: url('/path/to/your/font/Pretendard-Regular.woff2') format('woff2'),
         url('/path/to/your/font/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

  body {
    font-family: 'Pretendard', sans-serif;
  }
`;

export default GlobalStyle;

4. 마지막으로 GlobalStyle 컴포넌트를 앱의 최상위 컴포넌트(App.js 혹은 index.js 등)에서 import 하고 사용하면 된다.

import React from 'react';
import GlobalStyle from './GlobalStyle';

function App() {
  return (
    <>
      <GlobalStyle />
      {/* 나머지 컴포넌트들 */}
    </>
  );
}

export default App;