[Flutter]Variable Font

https://docs.flutter.dev/ui/design/text/typography

 

여러 곳에서 많이 사용되고 있는 Pretendard와 같이 Variable을 지원하는 폰트스타일이 존재한다.

Variable기능을 사용함으로 Flutter 코드 안에서 다음과 같은 태그를 제어할 수 있게 된다.

---

• wght : font-weight
• wdth : font-stretch
• sint : 기울기
• ital : 이텔릭체
• opsz : 옵티컬 사이즈

Flutter안에서의 사용방법은 다음과 같다.

 

Font Import

먼저 정해진 asset경로에 폰트를 넣어주고 yaml파일에 선언해준다.

fonts:
     - family: Pretendard
       fonts:
         - asset: assets/fonts/PretendardVariable.ttf

 

TextStyle 문서참고

TextStyle클래스 정의문서 내에 FontVariation 내용 마이크로소프트에서 정리한 opentype font의 포맷을 따른다고 되어있다. 이에 따르면 4글자 axis와 해당 axi의 value가 짝을 이룬다.

class FontVariation {
  /// `axis` is the four-character tag that identifies the design axis.
  /// These tags are specified by font formats such as OpenType.
  /// See <https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg>
  ///
  /// `value` is the value that the axis will be set to. The behavior
  /// depends on how the font implements the axis.
const FontVariation(
    this.axis,
    this.value,
  ) : assert(axis.length == 4,

OpenType Design-Variation Axis Tag Registry (OpenType 1.9) - Typography

 

마이크로소프트 공식 문서에 따르면 각 태그들의 권장 value는 다음과 같다.

• wght - 폰트에서 지원하는 영역
• wdth : 1 ~ 1000
• sint : -90 ~ +90
• ital : 0~1 value
• opsz : 0보다 큰 수 1(0~16이 regular사이즈에서 권장되는 값이다)

적용한 코드

Variable폰트를 적용한 코드는 다음과 같다.

TextStyle을 선언해주고, fontVariations 프로퍼티 안에서 FontVariation 리스트 아이템을 추가하는 형식이다.

import 'dart:ui';
import 'package:flutter/material.dart';

const textStyle = TextStyle(
	fontFamily : 'Pretendard'
	fontVariations: <FontVariation>[
		const FontVariation('wght', 700),
		const FontVariation('opsz', 17),
	],
);