How to use a custom font in a Flutter app

Suragch
Suragch
Jun 7 · 1 min read

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

Suragch

Written by

Suragch

An Android and iOS developer who has transitioned to Flutter.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade