폰트 적용

앱을 개발하다 보면 기본 폰트 이외에서 다른 폰트를 사용하고 싶을 수가 있습니다. 특히 앱의 디자인을 이쁘게 바꾸기 위해서 테마에 맞는 폰트를 사용하는 것이 중요합니다. 오늘은 폰트를 적용하는 방법에 대해서 알아보겠습니다.

 

1.  폰트 정하기 

가장 먼저 사용할 폰트를 찾아야 합니다. 이번에 사용할 폰트는 Pretedndard입니다. 폰트를 정했다면 폰트 파일을 준비해야 합니다. 폰트 파일은 TTF 또는 OTF 형식이 여야 합니다. Pretendard는 무료 폰트라서 쉽게 찾을 수 있습니다. 그리고 이뻐서 사용하기 좋습니다.

https://noonnu.cc/font_page/694

저는 아래의 사이트를 이용했습니다.

https://noonnu.cc/font_page/694

눈누

 

2. 파일 적용하기

TTF 또는 OTF 형식의 파일을 준비했다면 이제 프로젝트 안에 넣어야합니다. Flutter 프로젝트의 assets/fonts 폴더 안에 사용할 폰트의 모든 파일을 넣어주세요. 폴더가 없다면 프로젝터 최상단에 만들어주시면 됩니다.

 

3. pubspec.yaml 파일 설정하기

이제 pubspec.yaml 파일에 폰트를 등록해줘야 합니다. 아래 처럼 저장한 폰트를 모두 지정해줘야 합니다.

flutter:
  fonts:
    - family: Pretendard
      fonts:
        - asset: assets/fonts/Pretendard-Regular.ttf
        - asset: assets/fonts/Pretendard-Bold.ttf
          weight: 700
        - asset: assets/fonts/Pretendard-Light.ttf
          weight: 300

pubspec.yaml에 저장을 했다면 flutter pub get을 실행해야 합니다.

 

4. 폰트 적용 예제

이제 폰트를 적용해 볼 차례입니다. 폰트를 사용할 때는 Flutter의 Text 위젯에서 style 속성을 사용해야 합니다. 아래의 코드는 예시입니다.

Text(
            '취소',
            style: TextStyle(
              fontFamily: 'Pretendard',
              fontWeight: FontWeight.w500,
              fontSize: 16,
              color: Colors.grey[600],
            ),

이렇게 하면 해당 텍스트에 'Pretendard' 폰트가 적용되게 됩니다.

 

5. 공부하면서 알게 된 점

• 폰트의 중요성 : 폰트를 이번에 처음으로 기본이 아닌 다른 폰트를 사용해 봤다. 디자인적으로 매우 통일감이 있고 깔끔해서 다음에도 계속 사용할 거 같다.
• 폰트의 FontWeight.bold는 FontWeight.w700과 같다. 그래서 폰트는 기본적으로 w700의 폰트는 bold설정으로 해도 똑같이 작동되게 한다.
• 여러 가지 폰트도 동시에 사용할 수 있다. 사용할 때는 fontFamily를 잘 구분해서 사용해야 한다.