Flutter Text – Change Font Family

Change Font Family of Text in Flutter

Add font .ttf files to a folder in your app. Say assets/font/.

Add assets and fonts to flutter property in pubspec.yaml file. You can add one or more font families to your application. In this tutorial, we will add two fonts.

flutter:

  uses-material-design: true

  assets:
    - assets/font/

  fonts:
    - family: Font1
      fonts:
        - asset: assets/font/font1.ttf
    - family: Font2
      fonts:
        - asset: assets/font/font2.ttf

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Tutorial - googleflutter.com"),
      ),
      body: Center(
          child: Column(children: <Widget>[
        Container(
          padding: EdgeInsets.all(20),
          child: Text(
            'Welcome to Flutter Tutorial by googleflutter.com',
            style: TextStyle(
                fontFamily: "Font1", fontSize: 40, fontWeight: FontWeight.bold),
          ),
        ),
        Container(
            padding: EdgeInsets.all(20),
            child: Text(
              'Welcome to Flutter Tutorial by googleflutter.com',
              style: TextStyle(
                  fontFamily: "Font2",
                  fontSize: 40,
                  fontWeight: FontWeight.bold),
            )),
      ])),
    );
  }
}

Screenshot

Desclaimer: We are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the Google, Apple or Flutter, or any of its subsidiaries or its affiliates. The names Google, Apple and Flutter as well as related names, marks, emblems and images are registered trademarks of their respective owners. This site googleflutter.com covers tutorials related to Flutter developed by Google.