Usare custom fonts in Flutter

In questo articolo vediamo come usare dei font custom in Flutter.

Ovviamente dovete caricarli nel progetto, e sono supportati i seguenti formati (almeno ad oggi):

• ttf
• otf
• ttc

Io ho creato un cartella assets nella root del progetto, ed all'interno una cartella fonts dove mettere i vari files.

Fatto questo, dobbiamo indicare nel pubspec.yaml dove trovarli:

flutter:

  uses-material-design: true

  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Bold.ttf
          weight: 700

Come vedete nel secondo font abbiamo anche indicato il parametro weight; per chi conosce i CSS sa di cosa di parlo.

Infine indichiamo il font da usare nel codice:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MP Book',
      theme: ThemeData(
        fontFamily: 'Raleway',
        brightness: Brightness.dark,
        primaryColor: Colors.amber,
        primarySwatch: Colors.amber,
        textTheme: const TextTheme(
          headline6: TextStyle(fontWeight: FontWeight.bold),
          bodyText1: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.purple,
            foregroundColor: Colors.white,
          ),
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

Enjoy!