Flutter 튜토리얼 23편: 커스텀 폰트와 타이포그래피

요약#

핵심 요지#

문제 정의: 기본 시스템 폰트만으로는 브랜드 아이덴티티를 표현하기 어렵고, 텍스트 스타일을 일관되게 관리하기 번거롭다.
핵심 주장: pubspec.yaml에 폰트를 등록하거나 google_fonts¹ 패키지를 사용하면 커스텀 폰트를 쉽게 적용할 수 있다.
주요 근거: TextTheme²의 15가지 텍스트 스타일(displayLarge~bodySmall)을 정의하면 앱 전체에서 일관된 타이포그래피를 유지할 수 있다.
실무 기준: google_fonts 패키지를 사용하면 1,000개 이상의 오픈소스 폰트를 별도 파일 없이 사용할 수 있다.
한계: 가변 폰트(Variable Font)의 모든 축(axis)을 지원하지 않을 수 있다.

문서가 설명하는 범위#

로컬 폰트 파일 등록과 사용법
google_fonts 패키지 활용
TextTheme으로 타이포그래피 시스템 구축
폰트 웨이트와 스타일 설정

읽는 시간: 12분 | 난이도: 초급

참고 자료#

Use a custom font - Flutter 공식 커스텀 폰트 가이드
Typography - Flutter 타이포그래피 가이드
google_fonts - Google Fonts 패키지

문제 상황#

앱에서 텍스트 스타일을 관리할 때 여러 어려움이 있습니다.

폰트와 타이포그래피 관리의 어려움#

1
문제 1: 기본 폰트로는 브랜드 아이덴티티 표현이 어려움
2
문제 2: 텍스트 크기, 굵기를 각 위젯에서 개별 지정 → 일관성 유지 어려움
3
문제 3: 폰트 파일 관리 → 웨이트별로 여러 파일 필요
4
문제 4: 다국어 지원 → 언어별로 다른 폰트가 필요할 수 있음

해결 방법#

Flutter는 커스텀 폰트와 체계적인 타이포그래피 시스템을 지원합니다. 로컬 파일이나 Google Fonts를 통해 폰트를 적용하고, TextTheme으로 일관된 스타일을 관리합니다.

챕터 1: 로컬 폰트 파일 등록하기#

Why#

NOTE
브랜드 전용 폰트나 라이선스가 있는 상용 폰트를 사용하려면 폰트 파일을 직접 프로젝트에 포함해야 합니다.
pubspec.yaml에 폰트를 등록하면 앱 번들에 포함됩니다.
1
폰트 파일 준비 → pubspec.yaml 등록 → TextStyle에서 fontFamily 지정

What#

NOTE
Flutter는 TrueType(.ttf), OpenType(.otf), OpenType Collection(.ttc) 폰트를 지원합니다.
웹 전용 포맷(.woff, .woff2)은 데스크톱 플랫폼에서 지원하지 않습니다.

How#

TIP

프로젝트 구조

1
my_app/
2
├── fonts/
3
│   ├── Pretendard-Regular.ttf
4
│   ├── Pretendard-Medium.ttf
5
│   ├── Pretendard-SemiBold.ttf
6
│   ├── Pretendard-Bold.ttf
7
│   └── Pretendard-ExtraBold.ttf
8
├── lib/
9
│   └── main.dart
10
└── pubspec.yaml

pubspec.yaml 설정

1
flutter:
2
  fonts:
3
    - family: Pretendard
4
      fonts:
5
        - asset: fonts/Pretendard-Regular.ttf
6
          weight: 400
7
        - asset: fonts/Pretendard-Medium.ttf
8
          weight: 500
9
        - asset: fonts/Pretendard-SemiBold.ttf
10
          weight: 600
11
        - asset: fonts/Pretendard-Bold.ttf
12
          weight: 700
13
        - asset: fonts/Pretendard-ExtraBold.ttf
14
          weight: 800

앱 전체 기본 폰트 설정

1
MaterialApp(
2
  theme: ThemeData(
3
    fontFamily: 'Pretendard',
4
  ),
5
)

특정 위젯에서 사용

1
Text(
2
  '커스텀 폰트 텍스트',
3
  style: TextStyle(
4
    fontFamily: 'Pretendard',
5
    fontWeight: FontWeight.w600,
6
  ),
7
)

Watch out#

WARNING

fontWeight에 해당하는 폰트 파일이 없으면 Flutter가 가장 가까운 웨이트를 합성(simulate)합니다.
합성된 폰트는 품질이 떨어지므로 필요한 웨이트의 파일을 모두 포함하세요.

1
# 잘못된 예시 - w500 요청 시 w400을 합성
2
flutter:
3
  fonts:
4
    - family: MyFont
5
      fonts:
6
        - asset: fonts/MyFont-Regular.ttf  # w400만 있음
7

8
# 올바른 예시 - 필요한 웨이트 모두 포함
9
flutter:
10
  fonts:
11
    - family: MyFont
12
      fonts:
13
        - asset: fonts/MyFont-Regular.ttf
14
          weight: 400
15
        - asset: fonts/MyFont-Medium.ttf
16
          weight: 500
17
        - asset: fonts/MyFont-Bold.ttf
18
          weight: 700

결론: pubspec.yaml에 폰트 파일을 등록하고 weight 속성으로 웨이트를 매핑합니다.

챕터 2: Google Fonts 패키지 사용하기#

Why#

NOTE
폰트 파일을 직접 관리하는 것은 번거롭습니다.
google_fonts 패키지를 사용하면 1,000개 이상의 오픈소스 폰트를 네트워크에서 자동으로 다운로드해서 사용할 수 있습니다.
graph LR A[GoogleFonts.lato] --> B[네트워크 다운로드] B --> C[로컬 캐시 저장] C --> D[TextStyle 반환]

What#

NOTE
google_fonts 패키지는 Google Fonts에서 제공하는 모든 폰트를 런타임에 다운로드하고 캐싱합니다.
폰트 파일을 프로젝트에 포함할 필요가 없어 앱 크기를 줄일 수 있습니다.

How#

TIP

패키지 설치

1
flutter pub add google_fonts

기본 사용법

1
import 'package:google_fonts/google_fonts.dart';
2

3
Text(
4
  'Hello, Google Fonts!',
5
  style: GoogleFonts.lato(),
6
)

스타일 커스터마이징

1
Text(
2
  '커스텀 스타일',
3
  style: GoogleFonts.notoSansKr(
4
    fontSize: 24,
5
    fontWeight: FontWeight.w700,
6
    fontStyle: FontStyle.normal,
7
    letterSpacing: -0.5,
8
  ),
9
)

기존 TextStyle과 결합

1
Text(
2
  '테마 스타일과 결합',
3
  style: GoogleFonts.lato(
4
    textStyle: Theme.of(context).textTheme.displayLarge,
5
    fontWeight: FontWeight.bold,
6
  ),
7
)

동적으로 폰트 선택

1
// 폰트 이름을 문자열로 지정
2
Text(
3
  '동적 폰트',
4
  style: GoogleFonts.getFont('Noto Sans KR'),
5
)

앱 전체 기본 폰트로 설정

1
MaterialApp(
2
  theme: ThemeData(
3
    textTheme: GoogleFonts.notoSansKrTextTheme(),
4
  ),
5
)

Watch out#

WARNING
Google Fonts는 첫 사용 시 네트워크에서 다운로드합니다.
오프라인 환경에서는 미리 캐시되지 않은 폰트를 사용할 수 없습니다.
1
// 프로덕션에서는 폰트를 미리 번들링하는 것을 권장
2
// pubspec.yaml에 에셋으로 폰트 파일 포함 후:
3
GoogleFonts.config.allowRuntimeFetching = false;
앱 크기가 중요하다면 Google Fonts를, 오프라인 지원이 중요하다면 로컬 폰트를 선택하세요.

결론: google_fonts 패키지로 다양한 폰트를 쉽게 사용할 수 있지만, 오프라인 지원이 필요하면 로컬 폰트를 사용합니다.

챕터 3: TextTheme으로 타이포그래피 시스템 구축#

Why#

NOTE
앱 전체에서 일관된 텍스트 스타일을 유지하려면 체계적인 타이포그래피 시스템이 필요합니다.
TextTheme은 15가지 텍스트 스타일을 정의해서 용도별로 사용할 수 있게 합니다.
1
displayLarge/Medium/Small → 큰 제목
2
headlineLarge/Medium/Small → 섹션 제목
3
titleLarge/Medium/Small → 카드 제목 등
4
bodyLarge/Medium/Small → 본문
5
labelLarge/Medium/Small → 버튼, 레이블

What#

NOTE
Material Design 3의 TextTheme은 5개 카테고리(Display, Headline, Title, Body, Label)와 3개 크기(Large, Medium, Small)로 구성됩니다.
총 15가지 스타일 조합을 제공합니다.

How#

TIP

커스텀 TextTheme 정의

1
MaterialApp(
2
  theme: ThemeData(
3
    textTheme: const TextTheme(
4
      displayLarge: TextStyle(
5
        fontSize: 57,
6
        fontWeight: FontWeight.w400,
7
        letterSpacing: -0.25,
8
        height: 1.12,
9
      ),
10
      displayMedium: TextStyle(
11
        fontSize: 45,
12
        fontWeight: FontWeight.w400,
13
        letterSpacing: 0,
14
        height: 1.16,
15
      ),
16
      displaySmall: TextStyle(
17
        fontSize: 36,
18
        fontWeight: FontWeight.w400,
19
        letterSpacing: 0,
20
        height: 1.22,
21
      ),
22
      headlineLarge: TextStyle(
23
        fontSize: 32,
24
        fontWeight: FontWeight.w600,
25
        letterSpacing: 0,
26
        height: 1.25,
27
      ),
28
      headlineMedium: TextStyle(
29
        fontSize: 28,
30
        fontWeight: FontWeight.w600,
31
        letterSpacing: 0,
32
        height: 1.29,
33
      ),
34
      headlineSmall: TextStyle(
35
        fontSize: 24,
36
        fontWeight: FontWeight.w600,
37
        letterSpacing: 0,
38
        height: 1.33,
39
      ),
40
      titleLarge: TextStyle(
41
        fontSize: 22,
42
        fontWeight: FontWeight.w500,
43
        letterSpacing: 0,
44
        height: 1.27,
45
      ),
46
      titleMedium: TextStyle(
47
        fontSize: 16,
48
        fontWeight: FontWeight.w500,
49
        letterSpacing: 0.15,
50
        height: 1.50,
51
      ),
52
      titleSmall: TextStyle(
53
        fontSize: 14,
54
        fontWeight: FontWeight.w500,
55
        letterSpacing: 0.1,
56
        height: 1.43,
57
      ),
58
      bodyLarge: TextStyle(
59
        fontSize: 16,
60
        fontWeight: FontWeight.w400,
61
        letterSpacing: 0.5,
62
        height: 1.50,
63
      ),
64
      bodyMedium: TextStyle(
65
        fontSize: 14,
66
        fontWeight: FontWeight.w400,
67
        letterSpacing: 0.25,
68
        height: 1.43,
69
      ),
70
      bodySmall: TextStyle(
71
        fontSize: 12,
72
        fontWeight: FontWeight.w400,
73
        letterSpacing: 0.4,
74
        height: 1.33,
75
      ),
76
      labelLarge: TextStyle(
77
        fontSize: 14,
78
        fontWeight: FontWeight.w500,
79
        letterSpacing: 0.1,
80
        height: 1.43,
81
      ),
82
      labelMedium: TextStyle(
83
        fontSize: 12,
84
        fontWeight: FontWeight.w500,
85
        letterSpacing: 0.5,
86
        height: 1.33,
87
      ),
88
      labelSmall: TextStyle(
89
        fontSize: 11,
90
        fontWeight: FontWeight.w500,
91
        letterSpacing: 0.5,
92
        height: 1.45,
93
      ),
94
    ),
95
  ),
96
)

위젯에서 TextTheme 사용

1
class ArticlePage extends StatelessWidget {
2
  const ArticlePage({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    final textTheme = Theme.of(context).textTheme;
7

8
    return Column(
9
      crossAxisAlignment: CrossAxisAlignment.start,
10
      children: [
11
        Text('Flutter 튜토리얼', style: textTheme.displaySmall),
12
        const SizedBox(height: 8),
13
        Text('커스텀 폰트 가이드', style: textTheme.headlineMedium),
14
        const SizedBox(height: 16),
15
        Text(
16
          '이 문서에서는 Flutter에서 커스텀 폰트를 사용하는 방법을 설명합니다.',
17
          style: textTheme.bodyLarge,
18
        ),
19
        const SizedBox(height: 24),
20
        ElevatedButton(
21
          onPressed: () {},
22
          child: Text('시작하기', style: textTheme.labelLarge),
23
        ),
24
      ],
25
    );
26
  }
27
}

Watch out#

WARNING
TextTheme의 모든 스타일을 사용할 필요는 없습니다.
앱에 필요한 스타일만 정의하고 일관되게 사용하세요.
1
// 권장: 용도에 맞는 스타일 사용
2
Text('페이지 제목', style: textTheme.headlineLarge)
3
Text('본문 내용', style: textTheme.bodyMedium)
4

5
// 비권장: 임의로 폰트 크기 지정
6
Text('페이지 제목', style: TextStyle(fontSize: 28))
7
Text('본문 내용', style: TextStyle(fontSize: 14))

결론: TextTheme으로 타이포그래피를 체계화하면 앱 전체에서 일관된 텍스트 스타일을 유지할 수 있습니다.

챕터 4: Google Fonts로 TextTheme 생성#

Why#

NOTE
Google Fonts와 TextTheme을 결합하면 커스텀 폰트로 전체 타이포그래피 시스템을 쉽게 구축할 수 있습니다.
GoogleFonts.xxxTextTheme() 메서드가 이 작업을 간단하게 만들어줍니다.
1
GoogleFonts.notoSansKrTextTheme() → 15가지 스타일 모두 Noto Sans KR 적용

What#

NOTE
각 Google Font에는 해당 폰트가 적용된 전체 TextTheme을 반환하는 메서드가 있습니다.
기존 TextTheme을 기반으로 폰트만 교체할 수도 있습니다.

How#

TIP

전체 TextTheme을 Google Font로 설정

1
MaterialApp(
2
  theme: ThemeData(
3
    textTheme: GoogleFonts.notoSansKrTextTheme(),
4
  ),
5
)

기존 테마에 Google Font 병합

1
MaterialApp(
2
  theme: ThemeData(
3
    textTheme: GoogleFonts.notoSansKrTextTheme(
4
      Theme.of(context).textTheme,
5
    ),
6
  ),
7
)

제목과 본문에 다른 폰트 적용

1
final baseTextTheme = Theme.of(context).textTheme;
2

3
MaterialApp(
4
  theme: ThemeData(
5
    textTheme: TextTheme(
6
      // Display, Headline은 Playfair Display
7
      displayLarge: GoogleFonts.playfairDisplay(
8
        textStyle: baseTextTheme.displayLarge,
9
      ),
10
      displayMedium: GoogleFonts.playfairDisplay(
11
        textStyle: baseTextTheme.displayMedium,
12
      ),
13
      headlineLarge: GoogleFonts.playfairDisplay(
14
        textStyle: baseTextTheme.headlineLarge,
15
      ),
16
      // Body, Label은 Noto Sans
17
      bodyLarge: GoogleFonts.notoSans(
18
        textStyle: baseTextTheme.bodyLarge,
19
      ),
20
      bodyMedium: GoogleFonts.notoSans(
21
        textStyle: baseTextTheme.bodyMedium,
22
      ),
23
      labelLarge: GoogleFonts.notoSans(
24
        textStyle: baseTextTheme.labelLarge,
25
      ),
26
    ),
27
  ),
28
)

다크 모드용 TextTheme

1
ThemeData(
2
  brightness: Brightness.dark,
3
  textTheme: GoogleFonts.notoSansKrTextTheme(
4
    ThemeData.dark().textTheme,
5
  ),
6
)

Watch out#

WARNING
GoogleFonts.xxxTextTheme()은 기본 Material TextTheme을 사용합니다.
커스텀 크기나 높이가 필요하면 별도로 정의해야 합니다.
1
// 기본 크기 사용
2
GoogleFonts.latoTextTheme()
3

4
// 커스텀 크기 필요 시
5
GoogleFonts.latoTextTheme().copyWith(
6
  displayLarge: GoogleFonts.lato(
7
    fontSize: 60,  // 기본값 57 대신 60
8
    fontWeight: FontWeight.bold,
9
  ),
10
)

결론: GoogleFonts.xxxTextTheme()으로 전체 타이포그래피 시스템에 Google Font를 쉽게 적용할 수 있습니다.

챕터 5: 폰트 웨이트와 스타일 활용#

Why#

NOTE
같은 폰트라도 웨이트(굵기)와 스타일(이탤릭)을 조합하면 다양한 표현이 가능합니다.
적절한 웨이트 활용은 시각적 계층 구조를 만드는 데 중요합니다.
1
본문: w400 (Regular)
2
강조: w500 (Medium) 또는 w600 (SemiBold)
3
제목: w700 (Bold)

What#

NOTE
FontWeight 클래스는 100부터 900까지 9단계 웨이트를 제공합니다.
FontStyle은 normal과 italic 두 가지를 지원합니다.

How#

TIP

FontWeight 상수

1
FontWeight.w100  // Thin
2
FontWeight.w200  // ExtraLight
3
FontWeight.w300  // Light
4
FontWeight.w400  // Regular (기본값)
5
FontWeight.w500  // Medium
6
FontWeight.w600  // SemiBold
7
FontWeight.w700  // Bold
8
FontWeight.w800  // ExtraBold
9
FontWeight.w900  // Black
10

11
// 별칭
12
FontWeight.normal  // w400
13
FontWeight.bold    // w700

웨이트와 스타일 조합

1
// Regular
2
TextStyle(fontWeight: FontWeight.w400)
3

4
// Bold
5
TextStyle(fontWeight: FontWeight.w700)
6

7
// Italic
8
TextStyle(fontStyle: FontStyle.italic)
9

10
// Bold Italic
11
TextStyle(
12
  fontWeight: FontWeight.w700,
13
  fontStyle: FontStyle.italic,
14
)

시각적 계층 예시

1
class Typography extends StatelessWidget {
2
  const Typography({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return Column(
7
      crossAxisAlignment: CrossAxisAlignment.start,
8
      children: [
9
        // 메인 제목 - ExtraBold
10
        Text(
11
          'Welcome',
12
          style: GoogleFonts.notoSansKr(
13
            fontSize: 32,
14
            fontWeight: FontWeight.w800,
15
          ),
16
        ),
17
        // 부제목 - SemiBold
18
        Text(
19
          '시작해봅시다',
20
          style: GoogleFonts.notoSansKr(
21
            fontSize: 20,
22
            fontWeight: FontWeight.w600,
23
          ),
24
        ),
25
        // 본문 - Regular
26
        Text(
27
          '이 앱은 Flutter로 만들어졌습니다. 다양한 기능을 제공합니다.',
28
          style: GoogleFonts.notoSansKr(
29
            fontSize: 16,
30
            fontWeight: FontWeight.w400,
31
          ),
32
        ),
33
        // 캡션 - Light
34
        Text(
35
          '버전 1.0.0',
36
          style: GoogleFonts.notoSansKr(
37
            fontSize: 12,
38
            fontWeight: FontWeight.w300,
39
            color: Colors.grey,
40
          ),
41
        ),
42
      ],
43
    );
44
  }
45
}

Watch out#

WARNING
모든 폰트가 9단계 웨이트를 지원하지는 않습니다.
폰트가 지원하지 않는 웨이트를 요청하면 가장 가까운 웨이트로 대체됩니다.
1
// Roboto는 9단계 모두 지원
2
GoogleFonts.roboto(fontWeight: FontWeight.w500)  // Medium 지원
3

4
// 일부 폰트는 제한된 웨이트만 지원
5
// 예: w400, w700만 있는 폰트에서 w500 요청 시 w400으로 대체
Google Fonts 웹사이트에서 각 폰트의 지원 웨이트를 확인하세요.

결론: 폰트 웨이트를 적절히 활용해서 텍스트의 시각적 계층 구조를 만듭니다.

챕터 6: 가변 폰트와 고급 기능#

Why#

NOTE
가변 폰트(Variable Font)는 하나의 파일에 여러 웨이트와 스타일을 포함합니다.
FontVariation을 사용하면 웨이트를 연속적인 값으로 지정할 수 있습니다.
1
일반 폰트: w400, w500, w600 등 불연속 값
2
가변 폰트: 100~900 사이의 모든 값 (예: w450)

What#

NOTE
가변 폰트는 OpenType 규격의 디자인 축(axis)을 지원합니다.
웨이트(wght), 너비(wdth), 기울기(slnt) 등을 연속적으로 조절할 수 있습니다.

How#

TIP

FontVariation 사용

1
Text(
2
  '가변 폰트 텍스트',
3
  style: TextStyle(
4
    fontFamily: 'RobotoFlex',  // 가변 폰트
5
    fontVariations: const [
6
      FontVariation('wght', 450),  // 웨이트 450 (불연속 값 사이)
7
      FontVariation('wdth', 80),   // 너비 80%
8
      FontVariation('slnt', -12),  // 기울기 -12도
9
    ],
10
  ),
11
)

가변 폰트 등록 (pubspec.yaml)

1
flutter:
2
  fonts:
3
    - family: RobotoFlex
4
      fonts:
5
        - asset: fonts/RobotoFlex-VariableFont.ttf

FontFeature로 글리프 선택

1
Text(
2
  'fi fl',  // 합자(ligature) 테스트
3
  style: TextStyle(
4
    fontFamily: 'Fira Code',
5
    fontFeatures: const [
6
      FontFeature.enable('liga'),  // 합자 활성화
7
      FontFeature.enable('calt'),  // 문맥 대체 활성화
8
    ],
9
  ),
10
)

숫자 스타일 변경

1
Text(
2
  '0123456789',
3
  style: TextStyle(
4
    fontFeatures: const [
5
      FontFeature.oldstyleFigures(),  // 올드스타일 숫자
6
      // 또는
7
      FontFeature.tabularFigures(),   // 등폭 숫자
8
    ],
9
  ),
10
)

Watch out#

WARNING
모든 폰트가 FontFeature와 FontVariation을 지원하지는 않습니다.
폰트 파일이 해당 기능을 포함해야 작동합니다.
1
// 지원하지 않는 기능을 설정해도 에러는 없지만 효과도 없음
2
Text(
3
  'Text',
4
  style: TextStyle(
5
    fontFamily: 'BasicFont',  // FontFeature 미지원 폰트
6
    fontFeatures: [FontFeature.enable('smcp')],  // 무시됨
7
  ),
8
)
가변 폰트를 사용하기 전에 해당 폰트의 지원 축(axis)을 확인하세요.

결론: 가변 폰트와 FontFeature를 활용하면 더 세밀한 타이포그래피 제어가 가능합니다.

한계#

Flutter의 폰트 시스템은 대부분의 상황을 처리하지만 몇 가지 제약이 있습니다.

웹 포맷 미지원: .woff, .woff2는 데스크톱 플랫폼에서 사용할 수 없습니다.
일부 OpenType 기능 미지원: 모든 OpenType 기능이 Flutter에서 작동하지는 않습니다.
폰트 합성 품질: 존재하지 않는 웨이트를 합성하면 품질이 저하됩니다.
CJK 폰트 크기: 한중일 폰트는 파일 크기가 커서 앱 용량에 영향을 줍니다.

google_fonts: Google Fonts에서 제공하는 1,000개 이상의 오픈소스 폰트를 Flutter에서 사용할 수 있게 해주는 패키지다. ↩
TextTheme: Material Design의 타이포그래피 시스템으로, 15가지 텍스트 스타일(displayLarge~labelSmall)을 정의한다. ↩

Flutter 튜토리얼 23편: 커스텀 폰트와 타이포그래피

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

폰트와 타이포그래피 관리의 어려움#

해결 방법#

챕터 1: 로컬 폰트 파일 등록하기#

Why#

What#

How#

Watch out#

챕터 2: Google Fonts 패키지 사용하기#

Why#

What#

How#

Watch out#

챕터 3: TextTheme으로 타이포그래피 시스템 구축#

Why#

What#

How#

Watch out#

챕터 4: Google Fonts로 TextTheme 생성#

Why#

What#

How#

Watch out#

챕터 5: 폰트 웨이트와 스타일 활용#

Why#

What#

How#

Watch out#

챕터 6: 가변 폰트와 고급 기능#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차