ReactJS _ 폰트 추가 및 설정

 

 

React 앱에서 특정 커스텀 폰트를 앱 전반에 걸쳐 기본 폰트(Default Font)로 설정하기 위해서는 @font-face를 사용하여 폰트를 등록하고, body, html, *를 사용하여 모든 요소에 일괄적으로 적용하면 됩니다.

 

 

폰트 파일 준비

1. src 폴더 내에 fonts 라는 폴더를 생성
2. fonts 폴더에 추가하고자 하는 폰트 파일을 저장 (.ttf)

 

@font-face 설정

• index.css 파일에 @font-face 규칙을 추가하여 폰트 등록
• html, body, * 선택자를 사용하여 모든 요소에 기본 폰트로 적용 가능
• sans-serif는 폰트가 로드되지 않았을 때 대체될 폰트

/* index.css */
// 폰트 파일명이 custom.ttf 라고 가정
@font-face {
    font-family: 'CustomFont';  // 내가 사용할 폰트 명칭
    src: url('./fonts/custom.ttf') format('truetype'); // 폰트 파일 경로
}

/* 모든 요소에 기본 폰트 적용 */
html, body, * {
    font-family: 'CustomFont', sans-serif;
}

 

 

CSS 파일 import 하기

import './index.css';

 

 

주의사항

• 폰트 경로 확인
  src/fonts 폴더 구조와 url('./fonts/custom.ttf') 경로가 정확한지 확인해야합니다.
• 브라우저 호환성
  일부 브러우저는 .ttf 형식을 지원하지 않으므로 .woff, .woff2 등의 파일 형식을 추가로 포함하는 것이 좋습니다.

src: url('./fonts/custom.woff2') format('woff2'),
       url('./fonts/custom.ttf') format('truetype');

• 특정 요소에 다른 폰트 적용
  특정 요소에 다른 폰트를 적용하고 싶을 경우, 별도로 스타일을 지정합니다.

h1.special-title {
    font-family: 'AnotherFont', serif;
}

 

 

---

 

 

React 앱에서 커스텀 폰트를 기본 폰트로 설정하려면 @font-face를 통해 폰트를 등록하고, html, body, * 선택자를 사용하여 모든 요소에 기본 폰트를 적용하면 됩니다. 필요한 경우 .woff와 .woff2 형식의 파일을 함께 사용하여 다양한 브라우저 호환성을 확보할 수 있습니다. 앱 전반에 걸쳐 일관성 있는 폰트를 설정함으로써 사용자 경험을 향상시킬 수 있다는 점을 기억하세요!