Quick Tip – How to use multiple custom fonts in Flutter

How to use multiple custom fonts in Flutter

In Flutter, you can use multiple fonts in your project. While searching for a font you need to be sure the font can support the fontWeight you want to use. Some fonts support one font-weight and some all the font weights.

Here are the links to the two fonts I used in this example:

https://fonts.google.com/specimen/Genos?query=Robert+Leuschke&vfonly=true

https://fonts.google.com/specimen/Orbitron?vfonly=true#standard-styles

Paste your fonts into the fonts directory and add them to your pubspec.yaml. Here I used fonts Orbitron and Genos.

If you use any of the fonts downloaded from Google fonts, make sure the license will let you use it in your app.

  fonts:
    - family: Orbitron
      fonts:
        - asset: assets/fonts/Orbitron-VariableFont_wght.ttf
    - family: Genos
      fonts:
        - asset: assets/fonts/Genos-Thin.ttf
          weight: 100
        - asset: assets/fonts/Genos-ExtraLight.ttf
          weight: 200
        - asset: assets/fonts/Genos-light.ttf
          weight: 300
        - asset: assets/fonts/Genos-Regular.ttf
          weight: 400
        - asset: assets/fonts/Genos-Medium.ttf
          weight: 500
        - asset: assets/fonts/Genos-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/Genos-Bold.ttf
          weight: 700
        - asset: assets/fonts/Genos-ExtraBold.ttf
          weight: 800
        - asset: assets/fonts/Genos-Black.ttf
          weight: 900

      Center(
        child:
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30, color: Colors.green,
                fontFamily: "Orbitron",
                fontWeight: FontWeight.w100,
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30, color: Colors.green,
                fontFamily: "Genos",
                fontWeight: FontWeight.w200,
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30, color: Colors.green,
                fontFamily: "Genos",
                fontWeight: FontWeight.w300,
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30, color: Colors.green,
                fontFamily: "Genos",
                fontWeight: FontWeight.w400,
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30, color: Colors.green,
                fontFamily: "Genos",
                fontWeight: FontWeight.w500,
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30, color: Colors.green,
                fontFamily: "Genos",
                fontWeight: FontWeight.w600,
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30, color: Colors.green,
                fontFamily: "Genos",
                fontWeight: FontWeight.w700,
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30, color: Colors.green,
                fontFamily: "Genos",
                fontWeight: FontWeight.w800,
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30, color: Colors.green,
                fontFamily: "Genos",
                fontWeight: FontWeight.w900,
              ),
            ),
          ],
        ),
      ),

You can find more the Text widget examples in this post:

Flutter Basics – What is and how to use Text widget in Flutter