[Flutter] 전체 폰트 변경하기

Flutter 기본 폰트가 너무 별로네요.. 전체 폰트를 변경해보겠습니다.

 

 

세팅

1️⃣ 최상위 폴더에 assets 폴더를 만들고 그 안에 fonts 폴더를 만든 다음 사용할 폰트들을 그대로 넣어줍니다.

 

 

 

2️⃣ 그 다음 pubspec.yaml 파일에서 주석처리된 fonts: 를 찾아 주석을 해제하고

다음과 같이 설정해줍니다.

  fonts:
    - family: Pretendard
      fonts:
        - asset: assets/fonts/Pretendard-Thin.ttf
          weight: 100
        - asset: assets/fonts/Pretendard-ExtraLight.ttf
          weight: 200
        - asset: assets/fonts/Pretendard-Light.ttf
          weight: 300
        - asset: assets/fonts/Pretendard-Regular.ttf
          weight: 400
        - asset: assets/fonts/Pretendard-Medium.ttf
          weight: 500
        - asset: assets/fonts/Pretendard-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/Pretendard-Bold.ttf
          weight: 700
        - asset: assets/fonts/Pretendard-ExtraBold.ttf
          weight: 800
        - asset: fonts/Pretendard-Black.ttf
          weight: 900

 참고로 100단위씩 100~900 이외의 weight값은 지정할 수 없습니다.

 

 

이렇게 공식문서에 정의된 방식으로만 사용할 수 있습니다.

 

 

기울임을 적용하고 싶다면

pubspec.yaml에

  fonts:
    - family: 폰트명
      fonts:
        - asset: assets/fonts/폰트명-이탈릭.ttf
          weight: 100
          style: italic

이렇게 style을 추가해줍니다.

 

폰트는 family속성에 작성한 이름으로 적용시킬 수 있습니다.

 

 

적용

1️⃣ 전체 앱에 적용시키고 싶다면 아래와 같이 ThemeData에 fontFamily속성을 추가해주면 됩니다.

class MyApp extends StatelessWidget{
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: MyHome(),
      theme: ThemeData(fontFamily: 'Pretendard'),
      themeMode: ThemeMode.system,
    );
  }
}

 

 

2️⃣ 별도로 지정하고 싶다면 위젯의 텍스트 스타일에 설정해주면 됩니다.

Text(
  "Test Text",
  style: TextStyle(
    fontFamily: 'Pretendard',
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
),

 

 

 

적용이 안된다면

1. 시뮬레이터까지 끄고 다시 실행해보기

2. pubspec.yaml에 경로를 잘 설정했는지 확인하기 (최상위폴더 다음부터 시작하는 경로를 작성해야합니다)

 

 

감사합니다.