Font Features in Flutter

A little extra help for styling your text

Flutter Clutter

I recently learned about a little known corner of the Flutter world: Font Features. I’ll share that with you today. Keep it in the back of your mind and when you need it, just do a search for Flutter Font Features. You’ll probably end up back here because there isn’t much out there about Font Features except for the documentation, and even that is a little sparse.

Changing the font

This article isn’t primarily about changing the font family, but since it is related to fonts, I’ll start by briefly reviewing how to use different fonts in your app.

System fonts

The default font on Android is Roboto and on iOS it is .SF UI Display or .SF UI Text (SF meaning San Francisco). If you want to use a different font, then you will need to add it to your app.

They look the same to me.

Your own custom fonts

I’ve written before about how to add your own custom font to your project, so I won’t go into detail, but the basic process is the following:

1. Add a font to your assets folder.

2. Register the font in pubspec.yaml.

flutter:
  fonts:
    - family: MyFont     
      fonts:
        - asset: assets/my_font.ttf

3. Use the font in your code by specifying the fontFamily.

Text(
  'Hello world',
  style: TextStyle(
    fontFamily: 'MyFont',
  ),
)

Google fonts package

Now we have the google_fonts package that makes things even easier. With just a few lines of code you have almost a thousand different open source fonts available to you.

Add the google_fonts dependency to your pubspec.yaml file:

dependencies:
  google_fonts: ^0.3.8

Then use whatever font you want in your code:

import 'package:google_fonts/google_fonts.dart';

Text(
  'Hello world',
  style: GoogleFonts.pinyonScript(
    fontSize: 50,
  ),
),

Notes:

• You can browse the different fonts here. When you find one you like, just note the name and in your…