Add Use Custom External Fonts in Flutter Android iOS App Example

There are unlimited type of font family type available freely for web and mobile developers and some of them is quite awesome. Sometimes flutter application developer wants to download and Use Custom External Fonts in Flutter Android iOS application. We can easily display external downloaded fonts in our flutter app by making some changes in pubspec.yaml file. The pubspec.yaml contains all the major information about flutter project like App name, flutter version and which dependencies we are using in Flutter project etc. So let’s get started 🙂 .

Note: All the fonts we are using in current tutorial is downloaded free from fonts.google.com.

Contents in this project Add Use Custom External Fonts in Flutter Android iOS App Example Tutorial:

1. To use custom external fonts in your project, i preferred you to create new Flutter project or Upgrade the current project into Latest version to make the project more responsive to external fonts.

2. Download External font family type into your computer. I am downloading fonts from fonts.google.com, You can download from any website or source according to your requirement.

3. Open your flutter project Root folder and make a Folder named as fonts inside it.

4. Copy all downloaded fonts in Fonts folder like i did in below screenshot. I am using 4 different type of Font family type in our current tutorial.

5. Now go back to your Flutter project’s Root folder and Open pubspec.yaml file in Code editor.

6. Find flutter: section in pubspec.yaml file and put fonts there using family: type like i did in below code. You have to put here your own downloaded fonts name path.

  1. The first fonts: is used to set the Font declaration scope.
  2. Family: is used to determine the font family name which we would use to call the font family in Flutter mobile app code.
  3. assets: is used to set the complete font path.

Complete Source code for my pubspec.yaml file:

7. Now all the configuration has been done. It’s time to start coding for app. So open your project’s main.dart file.

8. Import material.dart package in your app’s main.dart file.

9. Create flutter’s default void main runApp() method and call our main MyApp class here.

10. Create our main class named as MyApp extends StatelessWidget. This would be our main View class.

11. Create MaterialApp -> Scaffold widget -> Column widget in Widget build area in MyApp class.

12. Create 4 Text widget wrapping in Padding widget in Column widget.

  1. fontFamily : Here we would call the font family we declared in pubspec.yaml file.

13. Complete source code for main.dart file:

Screenshot:

Add Use Custom External Fonts in Flutter Android iOS App Example

Leave a Reply

Your email address will not be published.