[flutter 플러터] 45강 강의리뷰_기본 중의 기본 Text (Customed fonts 글꼴/폰트 적용 방법)

화면에 문자를 삽입하고 싶은 경우 Text 위젯을 사용할 수 있다. 그 안에서 TextStyle 이라는 위젯을 사용하면 구체적인 문자의 크기와 굵기, 색깔 등을 지정할 수 있다. 한편 화면에 문자를 삽입할 때 중요한 것 중 하나가 바로 글꼴이다. 화면의 글자를 내가 원하는 글꼴로 설정하고 싶다면 어떻게 해야할까? 이는 이미지 삽입과 크게 다르지 않다. 아래의 순서대로 따라해보자.

 

플러터 화면에서 글꼴 적용하는 방법

1. 원하는 글꼴의 .ttf 파일 다운로드 
*구글 폰트(https://fonts.google.com/) 를 이용하면 다양한 글꼴을 무료로 다운로드 받을 수 있다.
**위의 글꼴은 '글꼴 자체'를 재판매하지 않는 이상 상업적 목적으로 이용 가능하다.

2. (안드로이드 스튜디오 좌측 사이드바에서) 프로젝트 폴더에 fonts 폴더 생성

3. 생성한 폴더에 글꼴 파일 저장

4. 프로젝트의 'pubspec.yaml' 파일에 fonts 를 프로젝트의 asset 으로 추가 (형식 및 띄어쓰기 주의)

5. 수정된 'pubspec.yaml' 파일에 대해 Pub get 버튼 클릭

6. 'main.dart' 파일에서 TextStyle 위젯 - fontFamily 프로퍼티 사용하여 글꼴 이름을 작성
*이때의 글꼴 이름은 'pubspec.yaml' 파일의 글꼴 이름과 정확히 일치해야한다.

 

예시 코드는 아래와 같다.

Text(
                'FLUTTER DEVELOPER',
                style: TextStyle(
                  fontFamily: 'Source Sans Pro',
                  fontSize: 20.0,
                  color: Colors.teal[100], // = Colors.teal.shade100
                  letterSpacing: 2.5,
                  fontWeight: FontWeight.bold,
                ) // TextStyle
              ) // Text

 

 

+) 'pubspec.yaml' 파일에서 fonts asset 추가 예시

flutter:
  uses-material-design: true
  assets:
    - images/

  fonts:
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf

    - family: Source Sans Pro
      fonts:
        - asset: fonts/SourceSansPro-Regular.ttf

 

 

 

*공식문서: https://api.flutter.dev/flutter/widgets/Text-class.html