Flutter에서 font 추가 및 사용하기

Flutter 앱개발하는데 여러 폰트를 추가하고 사용하는 방법

 

1. 폰트를 프로젝트 안의 폴더 안에 넣어두기

 

2. project.yaml 파일에 font 설정

flutter:
  uses-material-design: true

  #  이미지 설정
  assets:
    - asset/img/

# 폰트 설정
  fonts:
    - family: parisienne
      fonts:
        - asset: asset/font/Parisienne-Regular.ttf

    - family: sunflower
      fonts:
          - asset: asset/font/Sunflower-Light.ttf
          - asset: asset/font/Sunflower-Medium.ttf
            weight: 500
          - asset: asset/font/Sunflower-Bold.ttf
            weight: 700

최상단에 fonts라고 선언 후 아래에 사용할 폰트들의 구성을 설정

family: - 사용할 폰트 중에 묶음으로 사용하는 것들의 그룹명

fonts: - 프로젝트 안에 사용할 폰트들을 저장한 위치에 맞게 설정

weight: - family 안에 fonts가 여러개 일 경우 제일 위에 선언한 것이 기본값이 되고 다른 폰트들은 weight을 설정하고 폰트를 호출할 때 해당 family와 wegiht 가 쓰이면 호출됨. (굵기에 따라 호출되는 폰트들)

weight값은 100 200 300 400 500 600 700 800 900 중에 골라서 쓰면 된다.

 

사용법

Column(
    children: [
      Text(
        '가나다',
        style: TextStyle(
          color: Colors.white,
          fontFamily: 'parisienne',
          fontSize: 80.0,
        ),
      ),
      Text(
        '라마바',
        style: TextStyle(
          color: Colors.white,
          fontFamily: 'sunflower',
          fontSize: 80.0,
        ),
      ),
      Text(
        '사아자',
        style: TextStyle(
          color: Colors.white,
          fontFamily: 'sunflower',
          fontWeight: FontWeight.w700,	// weight 값은 지정한 값으로 설정해야함
          fontSize: 80.0,
        ),
      ),
    ],
  ),