Flutter : Custom font

Flutter app 에 custom font 를 사용해 보자.

Google Fonts 에서 Tomorrow 폰트를 적용해 본다.

pubspec.yaml

pubspec.yaml 파일에 font 파일 (ttf) 을 추가한다.

fonts:
  - family: Tomorrow
    fonts:
      - asset: fonts/Tomorrow-Regular.ttf
      - asset: fonts/Tomorrow-Bold.ttf
        weight: 700
      - asset: fonts/Tomorrow-Italic.ttf
        style: italic

3개의 파일을 추가했는데 font family 이름은 'Tomorrow' 이다.

bold 는 weight 속성값이 있다.

weight 값은 100에서 900까지 100 단위로 값이 있고 FontStyle() 의 fontWeight 의 값으로 쓰인다.

참조 : FontWeight class

italic 은 style 속성(normal or italic)이 있다.

Set font

App 전체의 기본 폰트로 적용할 수 있다.

MaterialApp(
  title: 'Custom Fonts',
  theme: ThemeData(fontFamily: 'Tomorrow'),
  home: MyHomePage(),
);

TextStyle 을 이용해 적용할 수 있다.

Text(
  'Tomorrow font sample',
  style: TextStyle(fontFamily: 'Tomorrow'),
);

Example app

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom fonts'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Default font',
              style: TextStyle(fontSize: 30),
            ),
            Text(
              'Tomorrow font',
              style: TextStyle(fontFamily: 'Tomorrow', fontSize: 30),
            ),
            Text(
              'Default font italic',
              style: TextStyle(fontSize: 30, fontStyle: FontStyle.italic),
            ),
            Text(
              'Tomorrow font italic',
              style: TextStyle(fontFamily: 'Tomorrow', fontSize: 30, fontStyle: FontStyle.italic),
            ),
            Text(
              'Default font bold',
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
            ),
            Text(
              'Tomorrow font bold',
              style: TextStyle(fontFamily: 'Tomorrow', fontSize: 30, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

Reference

Use a custom font