How to use a custom font in a Flutter app

Suragch
1 min readJun 7, 2019

This is a repost of an answer I wrote on Stack Overflow.

In this brief article I’ll give you the steps to include your own font in your Flutter project.

1. Add a font to your project

  • Right click on your project folder and go to New > Directory. Call it assets. It should be in your projects root directory.
  • Copy and paste your font into the new assets directory. I'm just using a single font in my example, the regular dancing script font. I renamed it to dancing_script.ttf.

2. Register the font

  • Open your pubspec.yaml file.
  • Add the fonts info under the flutter section. Indentation is mandatory.
flutter:
fonts:
- family: DancingScript
fonts:
- asset: assets/dancing_script.ttf

3. Use the font in your theme or widget

  • Now you can use your font by setting the fontFamily attribute in the TextStyle widget to whatever you called it in pubspec.yaml. For this example, I called it DancingScript.
Text(
'Hello world',
style: TextStyle(
fontFamily: 'DancingScript',
),
)

4. Restart your app

  • Whenever I add assets I find I need to do a full stop and restart. Otherwise I get errors.

Notes

--

--