[Flutter] Font 적용하기 (로컬 저장 방식)

Flutter에서 폰트를 적용하는 기본적인 내용을 정리해보겠습니다.

무료 폰트 다운로드

https://fonts.google.com/?subset=korean&noto.script=Kore

Browse Fonts - Google Fonts

저는 위 사이트에서 무료 폰트를 다운받아 적용하였습니다.

한글은 적용안되는 영어폰트만 있을 수 있으므로 필터를 통해 한글 폰트를 찾아줍니다.

 

저는 아래와 같이 Dongle font를 사용하였습니다.

https://fonts.google.com/selection/embed

Google Fonts

라이선스

OFL은 라이선스 내용입니다. 무시하고 넘어가도 되지만, 해당 폰트를 사용하여 상업적인 배포를 할 경우 명시를 저작권 명시를 해주어야 할 때가 있습니다. 영어가 어렵다면 GPT를 통해 요약하는 방법이 있습니다.

 

GPT를 사용을 통해 요약한 라이선스의 내용은 다음과 같습니다.

목적 협업: 전 세계적으로 협업 폰트 프로젝트의 개발을 촉진합니다. 지원: 학문적 및 언어적 커뮤니티의 폰트 제작 노력을 지원합니다. 공유 및 개선: 폰트를 자유롭게 공유하고, 다른 사람들과 협력하여 개선할 수 있는 열린 프레임워크를 제공합니다. 허가 및 조건 무료 사용: 폰트 소프트웨어를 무료로 사용, 연구, 복사, 병합, 임베드, 수정, 배포, 판매할 수 있습니다. 단, 폰트 자체만을 판매할 수는 없습니다. 번들 배포: 소프트웨어와 함께 폰트를 번들로 배포하거나 판매할 수 있습니다. 각 복사본에는 위의 저작권 고지와 이 라이선스가 포함되어야 합니다. 수정된 버전의 이름: 수정된 폰트 소프트웨어는 원래 폰트 이름을 사용할 수 없습니다. 수정된 버전에 다른 이름을 사용해야 하며, 원 저작권자의 명시적인 허락이 있어야 합니다. 홍보: 원 저작권자나 폰트 소프트웨어의 저자의 이름을 수정된 버전을 홍보, 지지, 광고하는 데 사용할 수 없습니다. 단, 기여를 인정하거나 명시적인 허락이 있을 경우는 예외입니다. 동일 라이선스: 폰트 소프트웨어는 수정 여부와 관계없이 동일한 라이선스 조건 하에 배포되어야 합니다. 종료 이 라이선스의 조건이 충족되지 않으면 라이선스는 무효화됩니다. 면책 조항 폰트 소프트웨어는 "있는 그대로" 제공되며, 상품성, 특정 목적에의 적합성, 저작권 비침해에 대한 명시적이거나 묵시적인 보증 없이 제공됩니다. 저작권자는 소프트웨어의 사용 또는 사용 불능으로 인한 어떠한 손해에 대해서도 책임을 지지 않습니다.

폰트 저장

프로젝트의 assets 폴더를 만들어 assets/fonts/Dongle/ 디렉터리 구조로 만들어줍니다.

 

assets/fonts/ 아래에 저장해도 되지만 여러폰트를 사용해야 하는 경우 정리가 잘 안될 수 있으므로 폰트별로 폴더에 저장합니다.

pubspec.yaml 설정

(.. code ..)
flutter:
  uses-material-design: true
  assets:
    - assets/fonts/Dongle/

  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Dongle/Dongle-Regular.ttf
        - asset: assets/fonts/Dongle/Dongle-Bold.ttf
          weight: 700
        - asset: assets/fonts/Dongle/Dongle-Light.ttf
          weight: 300
(.. code ..)

 

`uses-material-design: true`는 기본적으로 설정되므로 찾기 어렵다면 해당 부분의 아래에 코드를 적어줍니다.

적용 확인

우선 코드는 다음과 같습니다.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Font Example', style: TextStyle(fontFamily: 'Dongle')),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Regular text', style: TextStyle(fontFamily: 'Dongle', fontSize: 24)),
              Text('Bold text', style: TextStyle(fontFamily: 'Dongle', fontWeight: FontWeight.bold, fontSize: 24)),
              Text('Light text', style: TextStyle(fontFamily: 'Dongle', fontWeight: FontWeight.w300, fontSize: 24)),
            ],
          ),
        ),
      ),
    );
  }
}

여기서 참고해야할 적용 로직은 다음과 같습니다.

 

1. 우리는 폰트 파일을 Regular, Bold, Light 총 세 가지를 다운 받았습니다.

2. pubspec.yaml을 통해서 Bold는 w700임을, Light는 w300임을 명시하였습니다.

3. main.dart에서 fontWeight 옵션을 통해 해당 폰트의 굵기를 조정하였습니다.

굳이 bold, light의 ttf파일을 두는 이유?

GPT에게 답변을 받아 보았습니다.

 

이유 1: 시각적 일관성
기울임(Italic): 기울임은 폰트 렌더링 엔진에서 기존 글꼴을 기울여서 적용할 수 있습니다. 이 경우 텍스트의 시각적 일관성을 유지하기가 상대적으로 쉽습니다.
굵기(Bold, Light): 굵기는 글자의 두께와 세부 사항에 영향을 미칩니다. 각 굵기에 맞게 별도로 디자인된 폰트를 사용하면 시각적 일관성과 가독성을 유지할 수 있습니다.

이유 2: 폰트 디자이너의 의도 반영
폰트 디자이너는 각 굵기와 스타일에 대해 최적화된 디자인을 제공합니다. 이를 통해 각 스타일이 의도된 대로 표현됩니다.
예를 들어, Bold 폰트는 글자의 두께뿐만 아니라 자간, 커닝 등의 요소도 조정하여 가독성을 높입니다.

이유 3: 다양한 플랫폼 및 렌더링 엔진 호환성
모든 렌더링 엔진이 기울임체나 굵기를 동일한 방식으로 처리하지 않습니다. 별도의 폰트 파일을 사용하면 다양한 플랫폼에서 일관된 결과를 얻을 수 있습니다.
특히 모바일 환경에서는 성능과 품질을 모두 고려해야 하므로, 별도의 폰트 파일을 사용하는 것이 바람직합니다.

이유 4: 명확한 스타일 지정
개발자가 특정 스타일을 명확하게 지정할 수 있습니다. 예를 들어, fontWeight: FontWeight.bold는 Bold 폰트 파일을 사용하도록 명확하게 지정합니다.
이는 코드의 가독성과 유지보수성을 높입니다.

 

결론적으로 bold 파일을 둘 필요는 없지만 렌더링 처리가 모든 플랫폼에서 제대로 안될 수도 있기 때문에 그 옵션에 대한 파일을 제공해주는 것이고 우리의 입장에서 해당 폰트를 따로 적용하는 이유는 시각적 일관성과 명확한 스타일을 지정하기 위함입니다.

결과