[Flutter] 플러터 font 적용하기

2023-11-22

---

사진: Unsplash 의 NEOM

---

1. 설정

 

우선 자식의 애플리케이션 최상단에 font를 폴더를 생성한 후 사용할 font 파일들을 넣어준다.

 

your_app/
  fonts/
    Raleway-Regular.ttf
    Raleway-Italic.ttf
    RobotoMono-Regular.ttf
    RobotoMono-Bold.ttf

---

이후 pubspec.yaml 에 아래와 같이 font 파일의 위치와 스타일등을 지정해 준다.

 

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

---

2. 방법

 

사용 방법은 두 가지로 아래와 같이 앱 최상단에 설정해 주는 방법이 있으며,

 

return MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'Raleway'),
  home: const MyHomePage(),
);

---

Text 위젯과 같이 직접 사용하는 방법이 있다.

 

child: Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
),

 

---

3. 참고자료

https://docs.flutter.dev/cookbook/design/fonts

Use a custom font

---

메인 이미지 출처 : 사진: Unsplash의NEOM