[React] TTF, OTF 폰트 적용하기

 

처음 프로젝트를 하면서 기본폰트를 사용하였는데 OS 환경이나 브라우저에 따라 폰트가 다르게 적용되는 것을 알게되었다. 그래서 화면의 통일성을 위해 폰트를 적용하기로 했다. 

 

폰트 다운받기

예전에 개인적으로 맘에 들어서 저장한 카카오폰트를 사용하였는데 그 외에 다양한 온라인 폰트가 있으니 맘에 드는 걸 otf, ttf 형식으로 다운받으면 된다.

 

kakao_fonts.zip

2.97MB

 

프로젝트에 적용하기

React 애플리케이션에서 폰트를 설정하고 사용하는 다양한 방법 중 나는 @font-face를 사용하여 폰트파일을 로드하고 적용했다.

 

1. 폰트파일을 프로젝트에 추가하기

 

먼저 TTF 또는 OTF 형식의 폰트 파일을 src/public/font 폴더 안에 추가한다.

src/
    └── public/
        └── fonts/
        	├── KakaoBold.ttf
            ├── KakaoOTFBold.otf
            ├── KakaoOTFRegular.otf
            ├── KakaoRegular.ttf

 

 

2.  @font-face설정하고 폰트 적용하기

 

아래와 같이 프로젝트 가장 위 스타일 문서에 폰트이름과 폰트파일의 위치를 @font-face 안에 기입한다.

이 설정한 폰트를 원하는 곳에  font-family로 적용한다.

@font-face {
  font-family: 'Kakao';
  src: url('../../public/fonts/KakaoRegular.ttf') format('truetype');

  // 폰트 기본 스타일
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: 'Kakao';
}

 

 

3. 적용된지 확인하기

 

눈으로 차이를 확인하기 어려우면 개발자 도구 element탭에서 확인할 수 있다.

 

TTF, OTF, WOFF 차이

가장 많이 쓰이는 폰트의 포맷으로는 3가지가 있다.

 

1. TTF
True Type Font

• 구형 브라우저 버전과 모바일에서 사용가능하다
• 단순하고 윈도우와 맥에서 가장 오랫동안 사용되고 있다

2. OTF
Open Type Font

• TTF와 유사하지만 일부 추가 기능을 포함한다
• 다양한 언어, 디자인 요구에 적합하다.

3. WOFF
Web Open Font Format

• 웹에서 폰트를 효율적으로 제공하기 위해 개발된 웹 특화 폰트 형식이다.
• 압축된 포맷으로, 빠른 다운로드와 렌더링을 지원하며, 크로스 브라우저 호환성이 좋다.
• 대부분 최신 브라우저에서 지원한다.

 

WOFF형식의 폰트를 사용하면 더 빠르고 효율적인 웹 폰트를 제공할 수 있지만 브라우저 호환성 및 웹 사이트의 성능을 고려하여 선택해야 한다.