React 프로젝트에서 폰트를 사용하는 방법은 다양한 방식이 있습니다. 웹사이트의 디자인에 맞는 폰트를 적용하는 것은 사용자 경험과 시각적 완성도를 높이는 중요한 요소입니다. 이 글에서는 Google Fonts, 로컬 폰트, 그리고 폰트 설정 라이브러리를 활용하여 React에서 폰트를 사용하는 방법을 단계별로 설명하겠습니다.
1. Google Fonts를 사용해 폰트 적용하기
가장 간단하게 폰트를 적용하는 방법은 Google Fonts에서 원하는 폰트를 가져와 사용하는 것입니다.
1.1 Google Fonts에서 폰트 링크 가져오기
- Google Fonts에 접속합니다.
- 원하는 폰트를 선택합니다.
- "Embed" 탭에서 제공하는 <link> 태그를 복사합니다.
예를 들어, Noto Sans 폰트를 선택하면 아래와 같은 코드가 제공됩니다:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
1.2 React 프로젝트에 적용하기
복사한 폰트 링크를 index.html 파일에 추가합니다.
프로젝트 구조:
public/
index.html
src/
App.js
public/index.html 파일의 <head> 태그 안에 폰트 링크를 추가합니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
1.3 CSS로 폰트 적용하기
폰트를 불러왔다면 CSS에서 해당 폰트를 사용합니다.
App.css 또는 스타일 파일에 폰트를 적용합니다:
body {
font-family: 'Noto Sans', sans-serif;
font-weight: 400;
}
h1 {
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
}
이제 React 프로젝트에 Google Fonts가 적용됩니다.
2. 로컬 폰트를 사용해 적용하기
인터넷 연결 없이 폰트를 사용하고 싶다면 폰트 파일을 프로젝트에 로컬로 추가하는 방법을 사용할 수 있습니다.
2.1 폰트 파일 추가하기
먼저 사용할 폰트 파일(.woff, .woff2, .ttf 등)을 준비합니다.
프로젝트 구조 예시:
src/
assets/
fonts/
NotoSans-Regular.ttf
NotoSans-Bold.ttf
App.css
App.js
2.2 CSS에서 @font-face 사용하기
폰트 파일을 불러오려면 @font-face를 사용합니다.
App.css 파일에 아래 내용을 추가합니다:
@font-face {
font-family: 'Noto Sans';
src: url('./assets/fonts/NotoSans-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Noto Sans';
src: url('./assets/fonts/NotoSans-Bold.ttf') format('truetype');
font-weight: 700;
}
body {
font-family: 'Noto Sans', sans-serif;
}
2.3 폰트 확인
App.js에 다음과 같이 스타일을 확인합니다:
import React from 'react';
import './App.css';
function App() {
return (
<div>
<h1>로컬 폰트를 사용한 예제</h1>
<p>이 글은 로컬 폰트를 사용하여 표시되었습니다.</p>
</div>
);
}
export default App;
이제 로컬 폰트가 정상적으로 적용됩니다.
3. 폰트 설정 라이브러리 사용하기: styled-components 예제
React에서 폰트를 관리할 때 CSS-in-JS 방식을 지원하는 styled-components 라이브러리를 활용하면 더욱 편리합니다.
3.1 styled-components 설치
먼저 프로젝트에 styled-components를 설치합니다:
npm install styled-components
3.2 GlobalStyle로 폰트 적용하기
styled-components를 사용하면 전역 스타일을 쉽게 설정할 수 있습니다.
App.js에서 GlobalStyle을 적용하는 예시입니다:
import React from 'react';
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
padding: 0;
}
`;
function App() {
return (
<>styled-components를 사용한 폰트 적용
이 예제는 styled-components로 폰트를 설정했습니다.
);
}
export default App;
이렇게 하면 styled-components를 통해 전역 폰트 스타일을 설정할 수 있습니다.
결론
React 프로젝트에서 폰트를 사용하는 방법에는 Google Fonts, 로컬 폰트, 그리고 CSS-in-JS 라이브러리를 활용한 방법이 있습니다. 각각의 방법은 프로젝트의 요구사항과 상황에 따라 적절히 선택할 수 있습니다.
- Google Fonts: 빠르고 간편하게 웹 폰트를 사용.
- 로컬 폰트: 인터넷 연결 없이 폰트 파일을 프로젝트에 직접 추가.
- styled-components: CSS-in-JS 방식을 통해 폰트를 동적으로 설정.
위의 예제를 참고하여 React 프로젝트에 적합한 폰트 사용법을 적용해 보세요
'React' 카테고리의 다른 글
| React에서 Drag-and-Drop 기능 구현하기 (0) | 2024.12.17 |
|---|---|
| React에서 locale과 time zone 처리하기 (0) | 2024.12.17 |
| React에서 React Native로 모바일 앱 만들기 (0) | 2024.12.17 |
| React와 React Native의 차이점 (0) | 2024.12.17 |
| React에서 GraphQL Subscription 사용법 완벽 정리 (0) | 2024.12.17 |