[TIL] Flutter 폰트 설정하기

flutter 실습 중 폰트 설정을 별도로 진행해보고 싶었고, 이를 기록해보려고 한다!

적용할 폰트 선택하기

요즘 원티드랩에서 사용하는 폰트가 깔끔하고 귀여워 보여서
해당 폰트를 선택했다.

폰트 다운로드 페이지
https://noonnu.cc/font_page/1269

설정하기

1. 루트에 assets 폴더를 만들고, 그 안에 fonts 폴더를 만들어 사용할 폰트 파일들을 넣어준다. (otf와 ttf 중 선택 가능)

2. pubspec.yaml 파일에서 폰트 설정을 해준다.

flutter:
  fonts:
    - family: WantedSans
      fonts:
        - asset: assets/fonts/WantedSans-Regular.ttf
          weight: 400
        - asset: assets/fonts/WantedSans-Medium.ttf
          weight: 500
        - asset: assets/fonts/WantedSans-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/WantedSans-Bold.ttf
          weight: 700
        - asset: assets/fonts/WantedSans-ExtraBold.ttf
          weight: 800
        - asset: assets/fonts/WantedSans-Black.ttf
          weight: 900

참고사항

• weight 값은 100 ~ 900 사이의 숫자만 허용된다.
• 이외의 폰트 스타일을 커스텀(ex. style) 하고 싶다면 자유롭게 수정 및 추가가 가능하다.

적용하기

main.dart

Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'WantedSans',
      ),
      home: HomeScreen(),
    );
  }

전체 앱에 적용시키고 싶다면 아래와 같이 ThemeData에 fontFamily 속성을 통해 추가해준다.

home_screen.dart

// .. 이전 코드 생략
style: TextStyle(fontWeight: FontWeight.w400),

이와 같이 폰트 굵기를 설정하여, 해당 폰트를 적절히 선택하여 적용시킨다.