[Flutter] Custom 폰트 전체 적용하기

Flutter 앱에 커스텀 폰트 적용하기

1. 전체 기본 폰트 설정
2. 특정 폰트 설정하기

1. fonts 폴더 생성하기

• 프로젝트 경로 하위에 assets/fonts 폴더 생성하기
  • pubspec.yaml 과 같은 경로에 생성하시면 됩니다.
  • 한글,영어와 숫자 폰트을 다르게 하기 위해 assets/fonts/number 폴더에 숫자용 폰트 넣어두었습니다.
    

2. pubspec.yaml 파일에 폰트 등록하기

- 60번째줄 즈음에 #fonts: 로 시작하는 줄에 주석풀어주시던가 지우고 작성해주시면 됩니다.

flutter:
  uses-material-design: true
  fonts:
    - family: text
      fonts:
        - asset: assets/fonts/IBMPlexSansKR-Regular.ttf
        - asset: assets/fonts/IBMPlexSansKR-SemiBold.ttf
          weight: 700
        - asset: assets/fonts/IBMPlexSansKR-Light.ttf
          weight: 300
    - family: num
      fonts:
        - asset: assets/fonts/number/GmarketSansTTFMedium.ttf
        - asset: assets/fonts/number/GmarketSansTTFBold.ttf
          weight: 700
        - asset: assets/fonts/number/GmarketSansTTFLight.ttf
          weight: 300

yaml 파일은 라인에 민감하니 라인 맞춰주셔야 합늬다.. 에러 자주 나요...

- family: text -> fontFamily 에 사용할 이름!
  fonts:
    - asset: assets/fonts/IBMPlexSansKR-Regular.ttf -> 기본 폰트
    - asset: assets/fonts/IBMPlexSansKR-SemiBold.ttf -> FontWeight.bold로 선언시 사용될 폰트!
      weight: 700
    - asset: assets/fonts/IBMPlexSansKR-Light.ttf -> FontWeight.w300 으로 선언시 사용될 폰트!
      weight: 300

3. 코드 작성

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      theme: ThemeData(fontFamily: 'text'), // 기본 폰트 설정 하는 부분!
      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(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              '한글 영어 한글입니다. abcdefg ABCDEFG\n',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            Text(
              '한글 영어 한글입니다. abcdefg ABCDEFG\n',
              style: TextStyle(fontSize: 18),
            ),
            Text(
              '한글 영어 한글입니다. abcdefg ABCDEFG\n',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.w300),
            ),
            Text(
              '123,456,789.0000\n',
              style: TextStyle(
                  fontFamily: 'num',
                  fontWeight: FontWeight.bold,
                  fontSize: 18),
            ),
            Text(
              '123,456,789.0000\n',
              style: TextStyle(
                  fontFamily: 'num', // 특정 폰트 사용하고 싶을 때 사용!
                  fontSize: 18),
            ),
            Text(
              '123,456,789.0000\n',
              style: TextStyle(
                  fontFamily: 'num',
                  fontWeight: FontWeight.w300,
                  fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

결과 화면

# 마치며..

처음 작성해본 글이라 부족한게 많을 것 같습늬다..
이제 막 Flutter에 입문하였고, 앞으로 Flutter 개발하면서 개발일지를 남길 생각입니다!
부족한게 보인다면 댓글로 남겨주시면 참고하겠습니다! 감사합뉘다 ㅎ