Yesterday, i took you guys through procedures on how to connect Flutter iOS application to Google's Firebase. Today, i will be showing you how to use custom fonts on your Flutter application.

Let's go straight to the point.


  • To download different fonts, goto https://fonts.google.com

  • How to use Custom Fonts on your Flutter Application_1

  • Select your favourite font, in this tutorial, i will be using ZCOOL KuaiLe

  • Click on the "add" button in front of the font you like, then extend the drawer at the bottom of the screen where your selection is saved to download the font.

  • Download the font which will be in zip format, unzip the file, create "assets" folder in your Flutter project directory, copy the .ttf file in the zip file you downloaded and paste it in the assets folder. The structure of your assets folder is expected to be as highlighted below.

  • How to use Custom Fonts on your Flutter Application_2

  • Next is to add the font's path to project's pubspec.yaml

  • Open the project's pubspec.yaml file, look for uses-material-design: true and paste this below it (let it maintain the same vertical position, check the screenshot below as guide):

  • fonts:
    - family: ZCool #This could be any name you had like to call the font
    fonts:
    - asset: assets/ZCOOLKuaiLe-Regular.ttf #Path to the font
    How to use Custom Fonts on your Flutter Application_3

  • Next is to specify the font name 'ZCool' in this case as Font Family in main.dart. In MaterialApp() function, there is an argument theme that accepts ThemeData(), inside the ThemeData(), there is an argument fontFamily that accepts String value. So we use the font name as the value. Refer to the screenshot below as guide.

  • How to use Custom Fonts on your Flutter Application_4

  • Start/Restart the debug session and see the new font in action.

  • How to use Custom Fonts on your Flutter Application_5

These are the steps to add a custom fonts to your Flutter application, feel-free to ask questions using the comments section.