text custom font

Quick Tip – How to use a custom font in Flutter

What is the Default font in Flutter

The default font family for Android is Roboto and in iOS it is SF UI Display or SF UI Text (SF meaning San Francisco). These are default fonts in the devices. So, if you do not use a custom font the text will be displayed as the default font in the devices.

How to use a custom font in Flutter

In the example below I used a font from the Google Fonts page:

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

One of the important things is to make sure you can use the downloaded font. Check the font license to be sure. Usually, the license file comes with fonts.

When you decide what font you want to use in your app you should add your font licenses to your app’s LicenseRegistry.

For example:

void main() {
  LicenseRegistry.addLicense(() async* {
    final license = await rootBundle.loadString('assets/fonts/OFL.txt');
    yield LicenseEntryWithLineBreaks(['google_fonts'], license);
  });

  runApp(...);
}

OFL.text is your license file inside your project folder structure.

Create a directory called assets in your project and then another directory called fonts. Paste your fonts to the fonts directory.

Add your fonts to your pubspec.yaml. In my example, the family name is “Orbitron”.

  fonts:
    - family: Orbitron

      fonts:
        - asset: assets/fonts/Orbitron-VariableFont_wght.ttf

Not all fonts support all the fontWeight. In the example, the font supports font-weight from 400 to 900.

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

Set default font in Flutter

If you want to use the custom font as the default font in your project you need to set fontFamily property as a part of the app’s theme. The fontfamily name must match the family name you used in pubspec.yaml in your project.

fonts:
    - family: Orbitron
return MaterialApp(
  title: 'Custom Fonts',
  // Set Orbitron as the default app font.
  theme: ThemeData(fontFamily: 'Orbitron'),
  home: const MyHomePage(),
);

You can find more Text widget examples in this post:

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