들어가며
Flutter로 웹 프로젝트를 진행하면서 한글 폰트로 Pretendard를 적용하려고 했습니다. 일반적으로 Flutter에서는 pubspec.yaml에 폰트를 추가하여 사용하는 것이 기본적인 방법인데요. 하지만 이 방식으로는 Pretendard 폰트가 제대로 적용되지 않는 이슈가 있었습니다. 오늘은 이 문제를 해결한 방법을 공유하고자 합니다.
문제 상황
처음에는 Flutter의 일반적인 폰트 적용 방식인 pubspec.yaml에 폰트를 추가하는 방법을 시도했습니다.
# pubspec.yaml
flutter:
fonts:
- family: Pretendard
fonts:
- asset: assets/fonts/Pretendard-Regular.otf
- asset: assets/fonts/Pretendard-Bold.otf
weight: 700하지만 웹에서 폰트가 제대로 적용되지 않았습니다.
처음에는 단순히 띄어쓰기 문제인가 확인도 해보고, 폰트 파일이 잘못된 건가 싶어 여러 버전의 폰트 파일도 시도해봤습니다. assets 경로도 확인해보고, 다른 폰트로도 테스트도 해봤죠. 심지어 font weight 설정을 바꿔보기도 했습니다.
하지만 이런 시도들에도 원인을 찾을 수 없었습니다. 다른 방식으로 폰트를 적용할 방법이 없을지 고민하던 중, 프로젝트에서 Pretendard 폰트 하나만 사용하고 있다는 점에 주목했습니다. 그래서 html 파일의 body 태그에 폰트를 전역으로 적용해보면 어떨까 하는 생각이 들었습니다.
해결 방법: CDN 활용하기
web/index.html파일을 열어 수정합니다.<head>태그 안에 Pretendard CDN을 추가합니다.
<!DOCTYPE html>
<html>
<head>
<!-- 기존 meta 태그들... -->
<!-- 폰트 스타일 정의 -->
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
body {
font-family: 'Pretendard', sans-serif;
}
</style>
</head>
<body>
<!-- 기존 Flutter 관련 스크립트... -->
</body>
</html>이렇게만 설정하면 끝입니다! HTML의 body 태그에 font-family를 지정했기 때문에, Flutter 코드에서 별도로 fontFamily를 지정할 필요가 없습니다. 모든 텍스트에 Pretendard 폰트가 자동으로 적용됩니다.
만약 특정 텍스트에만 다른 폰트를 적용하고 싶다면, 그때만 Flutter 코드에서 TextStyle의 fontFamily를 지정하면 됩니다.
댓글