[Flutter] 프로젝트에 폰트 적용하기

 

 

이번에는 플러터 프로젝트에 폰트를 적용해 주자

 

폰트 다운로드하기

구글 폰트에서 원하는 폰트를 다운로드한다

https://fonts.google.com/

Browse Fonts - Google Fonts

프로젝트 상단에 assets/font 폴더를 만든 뒤 넣어주었다

 

pubspec.yaml 파일 작성

다운로드한 폰트를 사용할 수 있도록 pubspec.yaml파일에 추가시켜 준다

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

 

폰트 사용하기

프로젝트 전체에 적용하기 위해서는 theme에 fontFamily를 지정해 주면 된다

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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Home(),
      theme: ThemeData(
          colorScheme: lightColorScheme,
          fontFamily: 'NotoSansKR',
        ),
      themeMode: ThemeMode.light,
    );
  }
}

 

각 위젯에 적용하고 싶다면 텍스트 스타일에서 지정해주면 된다

style: TextStyle(
  fontFamily: "DoHyeon",
  fontSize: 24,
  color: Colors.red,
),