[플러터] Font 변경하는 방법

플러터에서 글꼴, 폰트를 변경하는 방법이다.

 

 

프로젝트 설정

1. 먼저 사용할 폰트를 프로젝트내에 넣어준다. 일반적으로 assets/font/ 폴더 내에 넣는다.

2. pubspec.yaml의 최하단에 보이는 fonts:에 아래의 예시처럼 작성한다.

  fonts:
    - family: Yanolja
      fonts:
        - asset: assets/font/yanolja_Bold.otf
          weight: 700
        - asset: assets/font/yanolja_Regular.otf

    - family: Jalnan
      fonts:
        - asset: assets/font/JalnanOTF.otf
          style: italic

예시 코드에서 사용하고자 하는 폰트는 Yanolja체와 Jalnan체이다. family가 코딩 시 사용할 폰트의 이름이다.

원하는대로 변경하면 된다. 일반적으로 폰트는 크기나 굵기에 따라 몇 가지의 파일로 나뉜다.

family는 동일하지만 다른 사이즈의 폰트를 하나로 묶는다고 생각하면 된다. 예시와 같이 폰트 아래에 weight나 style을 지정해주면 Yanolja 폰트 사용시 fontweight가 w700일 때 yanolja_Bold체를 불러오고, 나머지의 경우에는 yanolja_Regular체를 불러오게 되는 것이다.

 

 

사용

폰트의 사용에는 2가지 유형이 있다.

첫 째는, 일반적인 사용이고 둘 째는, 여러 국가의 서비스를 지원하는 경우이다.

 

Text('hi',
style: TextStyle(fontFamily: "Yanolja"),),

일반적으로 사용시에는 TextStyle 아래에 fontFamily라는 속성에 앞서 지정해주었던 family를 입력해주면 된다.

반드시 String 타입으로 입력해야한다.

 

Text(
	'hello',
	style: TextStyle(
	fontFamilyFallback:fontFamilyFallback:['Yanolja', 'Jalnan'])
	)

 

여러 국가의 서비스를 지원하는 경우에는 메인으로 사용하고자하는 폰트가 있을 것이다.

하지만 메인 폰트가 지원하지 않는 문자가 있다면 출력이 안되거나 오류가 발생한다. 그래서 플러터는 fontFamilyFallback이라는 속성을 제공해준다. 이 속성에 List<String> 형태로 여러 폰트들을 지정해주면 앞 쪽 폰트를 우선순위로 사용하고 문자가 없다면 다음 폰트를 사용해 문자를 출력해준다.