Flutter MaterialApp 폰트 설정 (Theme로 적용 및 직접 적용)

MaterialApp의 theme를 사용하여 앱 전체 폰트 스타일을 변경할 수 있다.

 

프로젝트에 폰트 추가

폰트를 사용하기 전에 프로젝트에 추가를 해주는 작업이 필요하다.

우선, 사용할 폰트를 다운로드한 뒤에 프로젝트 root 경로에 assets/fonts/ 디렉토리를 생성해준다.

 

본 글에서는 SUIT 폰트를 사용한다.

https://sunn.us/suit/

S U N N

 

otf 파일을 다운로드하여 아래와 같이 assets/fonts/디렉토리에 추가한다.

폰트 파일

 

pubspec.yaml에 아래와 같이 폰트를 추가한다.

• fonts > family: 폰트 이름
• fonts > fonts: font weight에 따라 보여줄 폰트 파일을 매핑

flutter:
  # ...
  fonts:
    - family: SUIT
      fonts:
        - asset: assets/fonts/SUIT-Heavy.otf
          weight: 900
        - asset: assets/fonts/SUIT-ExtraBold.otf
          weight: 800
        - asset: assets/fonts/SUIT-Bold.otf
          weight: 700
        - asset: assets/fonts/SUIT-SemiBold.otf
          weight: 600
        - asset: assets/fonts/SUIT-Medium.otf
          weight: 500
        - asset: assets/fonts/SUIT-Regular.otf
          weight: 400
        - asset: assets/fonts/SUIT-Light.otf
          weight: 300
        - asset: assets/fonts/SUIT-ExtraLight.otf
          weight: 200
        - asset: assets/fonts/SUIT-Thin.otf
          weight: 100

 

전체 폰트 스타일 변경

MaterialApp의 theme 속성에 ThemeData를 넘겨준다. 

@override
Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      theme: ThemeData(),
    );
}

 

ThemeData에는 폰트 설정과 관련된 fontFamily 속성이 있다. pubspec.yaml에 작성한 폰트 이름을, ThemeData > fontFamily 값으로 넘겨준다.

@override
Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomePage(),
      theme: ThemeData(
        fontFamily: "SUIT",
      ),
    );
}

 

앱을 실행해보면 아래와 같이 폰트가 변경이 된다.

 

Theme의 부분적으로 폰트 적용

만약, 폰트를 전체 적용하지 않고 부분적으로 적용하고 싶다면, ThemeData > textTheme: TextTheme(...) 를 활용하면 된다. 예를들어,

@override
Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomePage(),
      theme: ThemeData(
        textTheme: TextTheme(
          displayLarge: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
          titleLarge: TextStyle(fontSize: 36.0),
          bodyMedium: TextStyle(fontSize: 14.0, fontFamily: "SUIT"), // 특정 부분만 폰트 적용
        ),
      ),
    );
}

위 코드와 같이 특정 부분만 폰트를 적용할 수 도 있다.

 

Text에 직접 적용

Theme를 사용하지 않고, Text()의 style에서 직접 폰트를 지정해주는 방법도 있다.

Text("Hello", style: TextStyle(fontFamily: "SUIT"),)