[Flutter] 사용자정의 폰트

이 페이지는 https://flutter.dev/docs/cookbook/design/fonts를 번역한 내용입니다. 시점에 따라 원문과 다소 차이가 존재할 수 도 있습니다. 또한 원저자의 요청에 의해 언제든지 변경, 삭제될 수 있습니다.

안드로이드와 iOS가 훌륭한 품질의 시스템 폰트를 제공함에도, 디자이너의 가장 흔한 요청사항 중 하나는 커스텀 폰트에 관한 것입니다. 예를들어 디자이너에 의해 직접 제작된 폰트를 사용할 수 도 있고, Google Fonts와 같은 외부 사이트에서 폰트를 내려받아 사용할 수 도 있습니다.

참고: google_fonts 패키지 사용을 고려해보세요. 1,000개가 넘는 오픈소스 폰트유형을 손쉽게 사용할 수 있습니다.

참고: 여러 프로젝트에서 특정 폰트를 재사용한다면, 폰트를 패키지로 제작하는 방법을 검토해보세요.

플러터는 커스텀 폰트를 지원합니다. 개별 위젯에만 사용할 수도 있고 앱전체에 적용할 수도 있습니다. 여기에서는 커스텀폰트를 사용하는 방법을 다음 순서로 소개합니다.

1. 폰트 파일을 프로젝트에 추가
2. pubspec에 폰트 선언
3. 앱 전체에 기본폰트로 지정
4. 특정 위젯에 폰트 지정

1. 폰트 파일을 프로젝트에 추가

사용할 폰트 파일을 프로젝트에 추가해야합니다. 보통 프로젝트 루트에 fonts나 assets 폴더를 만들고 폰트파일을 추가합니다.

예를들어, Raleway와 Roboto Mono 폰트파일을 awesome_app 프로젝트에 추가한다면 다음과 같은 구조를 가질 것입니다.

awesome_app/
  fonts/
    Raleway-Regular.ttf
    Raleway-Italic.ttf
    RobotoMono-Regular.ttf
    RobotoMono-Bold.ttf

2. pubspec에 폰트 선언

Flutter에게 추가한 폰트파일에 대한 정의와 위치를 알려주어야 합니다. 프로젝트의 pubspec.yaml 파일을 열고 아래와 같이 선언해주세요.

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

pubspec.yaml 정의 구문

family는 폰트이름을 지정합니다. 예를들어 TextStyle의 fontFamily 속성에 제공할 수 있습니다.

asset은 폰트파일의 경로이며, pubspec.yaml에서 상대경로로 입력해야합니다. 여기에 추가한 폰트파일은 서체 형태에 대한 정보를 포함하고 있어야 합니다. 여기서 정의한 파일은 앱을 빌드할 때 앱의 asset 번들로 포함됩니다.

하나의 폰트에는 weights나 styles에 따라 여러 개의 폰트파일을 등록 할 수 있습니다.

• weight 속성은 폰트파일의 굵기를 정의합니다. 100~900까지 정의할 수 있으며, 100단위로 증가해야합니다. 이 값은 FontWeight 클래스에서 제공하는 w100~w900, normal, bold 값에 대응하며, TextStyle 개체의 fontWeight 속성의 값으로 사용됩니다.
• style 속성은 폰트파일의 형태가 italic인지 normal인지 정의하는데 사용합니다. 이 값은 FontStyle enum에서 제공하는 normal, italic 값에 대응하며, TextStyle 개체의 fontStyle 속성 값으로 사용됩니다.

3. 앱 전체에 기본폰트로 지정

커스텀 폰트를 앱 전체에서 사용될 기본 폰트로 지정할 수 있습니다. MaterialApp의 theme 속성을 지정할 때 fontFamily값으로 해당 폰트를 설정하시면 됩니다. fontFamily 값은 pubspec.yaml의 family에 제공한 명칭과 동일해야합니다.

MaterialApp(
  title: 'Custom Fonts 사용예제',
  // Raleway 폰트를 기본폰트로 지정
  theme: ThemeData(fontFamily: 'Raleway'),
  home: MyHomePage(),
);

앱의 Theme을 설정하는 방법에 대한 자세한 정보를 원하시면 https://flutter.dev/docs/cookbook/design/themes를 확인해보세요.

4. 특정 위젯에 폰트지정

지정한 위젯만 커스텀폰트를 출력하려면 TextStyle을 위젯에 제공하면 됩니다.

예를들어 RobotoMono폰트를 Text 위젯에 제공하는 샘플은 아래와 같습니다. fontFamily에 제공된 값은 pubspec.yaml에 저징한 family 값과 동일해야합니다.

Text(
  'Roboto Mono 폰트 적용 예제',
  style: TextStyle(fontFamily: 'RobotoMono'),
);

TextStyle

TextStyle 객체에 style이나 weight 값을 지정했지만 플러터가 그에 대응하는 폰트를 찾지 못한 경우, 플러터 엔진은 해당 폰트 중 가장 일반적인 파일을 선택하고 요청된 weight나 style 형태 추론을 시도하게 됩니다.

전체 예제

폰트파일

Raleway와 RobotoMono 폰트 파일은 Google Fonts에서 다운로드 하실 수 있습니다.

pubspec.yaml

name: custom_fonts
description: An example of how to use custom fonts with Flutter

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700
  uses-material-design: true

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      // Set Raleway as the default app font.
      theme: ThemeData(fontFamily: 'Raleway'),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default Raleway font.
      appBar: AppBar(title: Text('Custom Fonts')),
      body: Center(
        // This Text widget uses the RobotoMono font.
        child: Text(
          'Roboto Mono sample',
          style: TextStyle(fontFamily: 'RobotoMono'),
        ),
      ),
    );
  }
}

실행화면