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
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.
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:
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.
Start/Restart the debug session and see the new font in action.
- family: ZCool #This could be any name you had like to call the font
- asset: assets/ZCOOLKuaiLe-Regular.ttf #Path to the font
These are the steps to add a custom fonts to your Flutter application, feel-free to ask questions using the comments section.