[Flutter] font 적용하기

📌  이번 글은

Flutter 프로젝트에 font를 적용하는 방법입니다.

 

 

1. 폰트 다운

Google Fonts

Pretendard

 

2. 프로젝트에 폰트 tff파일 추가

• Project > assets > fonts에 .otf 또는 .ttf 파일 추가.
• 저는 필요한 최소한의 폰트 파일만 추가했습니다.

 

3. pubspec.yaml 

• flutter: ~ 부분을 찾아 fonts 코드를 추가합니다.
• 여기서 두 가지 방법이 있습니다!!

첫 번째, family로 구분

# 첫 번째 방법
flutter:
  uses-material-design: true

  fonts:
   - family: PretendardBold
     fonts:
       - asset: assets/fonts/Pretendard-Bold.otf
   - family: PretendardSemiBold
     fonts:
       - asset: assets/fonts/Pretendard-SemiBold.otf
   - family: PretendardRegular
     fonts:
       - asset: assets/fonts/Pretendard-Regular.otf

두 번째, weight으로 구분

# 두 번째 방법
flutter:
  uses-material-design: true

  fonts:
    - family: Pretendard
      fonts:
        - asset: assets/fonts/Pretendard-Bold.otf
        - asset: assets/fonts/Pretendard-SemiBold.otf
        - asset: assets/fonts/Pretendard-Regular.otf

 

4. 사용

• 이제 지정한 family 명으로 필요한 곳에서 아래와 같이 사용하면 됩니다 :)
• 사용법도 pubspec에 정의한 방법에 따라 다릅니다.

첫 번째, family로 구분

Text('폰트 테스트 ABCD 1234', style: TextStyle(fontFamily: 'PretendardBold'))

두 번째, weight으로 구분

Text('폰트 테스트 ABCD 1234', style: TextStyle(fontFamily: 'Pretendard', fontWeight: FontWeight.bold))

 

👩🏻‍💻 사용 예제

• 전체 적용 (family로 구분)

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: 'PretendardBold', /** 여기가 핵심 **/
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

• 부분 적용 (family로 구분)

// ... 코드
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '폰트 테스트 ABCD 1234',
          style: TextStyle(fontFamily: 'PretendardBold'), /** 여기가 핵심 **/
        ),
      ),
      // ... 코드