3 min read

Customizing the Font Family helps you make your app stand out from others. You may get a Custom Font from a designer or you choose to show unique font to build your app brand. So in this tutorial, we’ll learn how to add or change font family in Flutter with 4 easy steps.

The method described in this tutorial always loads the custom/new font regardless of the internet connection.

Here’s what we’ll cover:

Steps to add or change Font Family in Flutter

To change font family in Flutter, first of all, you need to get the fonts, put them inside your project, add the fonts to pubspec.yaml file and then use them in your dart file.

Step 1: Get font family

If you haven’t received the font from your designer, you can simply download it from the here → https://fonts.google.com/

Here’s how you download the font:

  1. Visit the https://fonts.google.com/
  2. Search for your font.
  3. Once you find it, click to open.
  4. Click on the Download Family button on the top right side of your screen.
  5. Extract the compressed file.
download font

Step 2: Import the Font into Project

To import the Font in your project:

  1. Open your project in IDE.
  2. At the root directory, create a directory called assets.
  3. Create one more directory inside the assets called fonts.
  4. Copy-Paste [font].ttf file into the fonts folder.
importing font into project

Step 3: Add Font to Pubspec.yaml

To add Font to pubspec.yamlfile:

  1. Uncomment the fonts section.
  2. Replace the family name with your font family. To get the family name, simply take the first part before the dash sign (-). For example, if the downloaded font name is OoohBaby-Regular, take the OoohBaby as your family name.
  3. Replace the asset path with the path where your font is residing.
Add Font to Pubspec.yam

Step 4: Use the New Font in Text Widget

Now you can simply use the new font in your Text widget like the following: 

Text(
  'Signature',
  style: TextStyle(fontFamily: 'OoohBaby', fontSize: 55),
),

Output:

change font in text widget

Changing Font at App Level

To change font family in Flutter at the app level:

Here’s is how you do it:

  1. Go to your main.dart file.
  2. Inside the MaterialApp, find the ThemeData widget.
  3. Add the fontFamily property and assign your new font family name.
  4. Stop and re-run your app.

Code Example:

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    fontFamily: 'OoohBaby',
  ),
  home: ChangeFontDemo(),
);

Output:

change font at app level

Custom Font Not Displaying Issue

Sometimes, even if you implemented all the steps correctly, you may not see the changes reflected in your app.

In this case, make sure to completely uninstall and re-run your app.

That’s it. Thanks!

Conclusion

In this tutorial, we learned how to add or change font family in Flutter with practical examples. We saw how to change the font at the app level and also what to do if the changes are not reflected.

Would you like to check other interesting Flutter tutorials?

Changing Text Button Color in Flutter – The Right Way in 2023
Change Elevated Button Color in Flutter (Ultimate Guide)