개발환경
- react : v19
- vite
- typescript
- styled-components : v6
폰트 다운로드 - Pretendard GOV woff 형식
🔗 Pretendard GOV - woff 형식
https://github.com/orioncactus/pretendard/tree/main/packages/pretendard-gov/dist/web/static/woff
폰트 경로
사용할 폰트를 다운로드 후 public/fonts 폴더에 이동 시킨다.
📂 public/
├── 📂 fonts/
│ ├── PretendardGOV-Regular.woff2
│ ├── PretendardGOV-Bold.woff2- src/assets/fonts/에 폰트 파일을 두면 vite build 실행 시 dist/ 폴더에 저장되면서 경로가 자동으로 변경된다. 따라서 @font-face에서 url()을 src 폴더 경로로 설정하면, 빌드 후 경로가 깨질 가능성이 높다.
- public/ 폴더에 폰트를 넣으면, Vite가 별도의 처리를 하지 않고 폰트를 그대로 유지한다. 경로가 고정되어 유지보수가 쉽기 때문에 public 폴더에 넣는 방법을 채택했다.
fonts.css 작성
public/fonts.css에 font face를 정의한다.
@font-face {
font-family: "Pretendard GOV";
font-style: normal;
font-weight: 100;
src: url("/fonts/PretendardGOV-Thin.woff") format("woff");
font-display: fallback;
}
@font-face {
font-family: "Pretendard GOV";
font-style: normal;
font-weight: 200;
src: url("/fonts/PretendardGOV-ExtraLight.woff") format("woff");
font-display: fallback;
}
@font-face {
font-family: "Pretendard GOV";
font-style: normal;
font-weight: 300;
src: url("/fonts/PretendardGOV-Light.woff") format("woff");
font-display: fallback;
}
@font-face {
font-family: "Pretendard GOV";
font-style: normal;
font-weight: 400;
src: url("/fonts/PretendardGOV-Regular.woff") format("woff");
font-display: fallback;
}
@font-face {
font-family: "Pretendard GOV";
font-style: normal;
font-weight: 500;
src: url("/fonts/PretendardGOV-Medium.woff") format("woff");
font-display: fallback;
}
@font-face {
font-family: "Pretendard GOV";
font-style: normal;
font-weight: 600;
src: url("/fonts/PretendardGOV-SemiBold.woff") format("woff");
font-display: fallback;
}
@font-face {
font-family: "Pretendard GOV";
font-style: normal;
font-weight: 700;
src: url("/fonts/PretendardGOV-Bold.woff") format("woff");
font-display: fallback;
}
@font-face {
font-family: "Pretendard GOV";
font-style: normal;
font-weight: 800;
src: url("/fonts/PretendardGOV-ExtraBold.woff") format("woff");
font-display: fallback;
}
@font-face {
font-family: "Pretendard GOV";
font-style: normal;
font-weight: 900;
src: url("/fonts/PretendardGOV-Black.woff") format("woff");
font-display: fallback;
}
폰트 로드하기
globalStyles.ts 또는 App.tsx 파일에서 아래와 같이 import "./fonts.css”를 사용하는 경우 Vite가 CSS Modules처럼 동작하려고 하기 때문에 build시 아래와 같은 문제가 발생할 수 있다.
- 폰트 파일이 제대로 불러와지지 않을 가능성이 있음.
- Styled-Components가 CSS를 인식하지 못할 수 있음.
- 빌드 후 경로가 깨질 가능성이 있음.
때문에 index.html의 head에서 직접 불러오는 방식을 사용했다.
<!-- index.html -->
<head>
<link rel="stylesheet" href="/fonts.css" />
</head>
폰트 사용하기
- globalStyle.ts에서 폰트를 적용한다.
- font size는 반응형을 위해 rem을 사용할 예정인데 1rem은 16px을 기본값으로 가지므로 62.5%를 적용하여 계산하기 쉽게 10px로 조정 후 사용한다.
- html 태그에서 조정 후 body에서 기본값으로 사용할 1.6rem 등 원하는 크기를 적용하면 된다.
// src/styles/globalStyles.ts
import { createGlobalStyle } from "styled-components";
export const GlobalStyle = createGlobalStyle`
html {
font-family: "Pretendard GOV", sans-serif;
font-size: 62.5%; /* 1rem = 10px (기본 16px -> 10px 기준으로 설정) */
font-weight: 400;
}
body {
font-size: 1.6rem; /* 기본 글자 크기 16px */
line-height: 1.5;
margin: 0;
}
`;
이제 정의한 globalStyles를 App.tsx에서 import 하여 적용시킨다.
import { ThemeProvider } from "styled-components";
import { GlobalStyle } from "./styles/globalStyles";
import { theme } from "./styles/theme";
import AppRoutes from "./Routes";
function App() {
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<AppRoutes />
</ThemeProvider>
);
}
export default App;'React' 카테고리의 다른 글
| [React] 클로저 트랩 (Closure Trap, Stale Closure) 해결하기 (3) | 2025.02.13 |
|---|---|
| [Vite] 절대경로 설정하기 (0) | 2025.01.20 |
| [React] Stackflow로 모바일 웹뷰 Routing 구현하기 (1) | 2024.12.20 |
| [React] input 태그의 왼쪽 0 제거하기 (0) | 2024.12.05 |
| [React] React Mobile Picker로 날짜 선택하기 (0) | 2024.12.05 |
