Post
Ask Question

How To Add Custom Fonts In Flutter

Introduction

 
In this article we will learn how to add Custom Fonts in Flutter Application. We will add .ttf fonts in this example. Google Fonts provides free fonts so we will download fonts from there. We will add Pacifico and RobotoCondensed fonts in this example. So let’s add Custom Fonts in Flutter app in below example.
 
Output
 
 

Steps

 
Step 1
 
First and most basic step is to create a new application in Flutter. If you are a beginner in flutter then you can check my blog Create a first app in Flutter. I have created an app named  “flutter_custom_fonts”.
 
Step 2
 
Now, Download fonts from Google Fonts or from another site. Create a folder named  “fonts” under project root directory and put the fonts into that folder. Check out the below screenshot for more understanding. 
 
 
Step 3
 
Now configure the fonts in pubspec.yaml file. pubspec.yaml file is a configuration file for plugins, fonts, images etc. Check out the below code that you need to configure in your pubspec.yaml file.
  1. fonts:  
  2.    - family: Pacifico  
  3.      fonts:  
  4.        - asset: fonts/Pacifico-Regular.ttf  
  5.    - family: RobotoCondensed  
  6.      fonts:  
  7.        - asset: fonts/RobotoCondensed-Regular.ttf  
  8.        - asset: fonts/RobotoCondensed-Bold.ttf  
  9.          weight: 700  
Step 4
 
Now in the main.dart file we will use the fonts to style our text. Below is the programming implementation of that.
  1. import 'package:flutter/material.dart';  
  2. void main() => runApp(MyApp());  
  3. class MyApp extends StatelessWidget {  
  4.  @override  
  5.  Widget build(BuildContext context) {  
  6.    return MaterialApp(  
  7.      theme: ThemeData(  
  8.        primarySwatch: Colors.purple,  
  9.      ),  
  10.      home: MyHomePage(),  
  11.    );  
  12.  }  
  13. }  
  14.    
  15. class MyHomePage extends StatefulWidget {  
  16.  @override  
  17.  _MyHomePageState createState() => _MyHomePageState();  
  18. }  
  19.    
  20. class _MyHomePageState extends State<MyHomePage> {  
  21.  @override  
  22.  Widget build(BuildContext context) {  
  23.    return Scaffold(  
  24.      appBar: AppBar(  
  25.        title: Text('Flutter Custom Fonts'),  
  26.      ),  
  27.      body: Center(  
  28.        child: Column(  
  29.          mainAxisAlignment: MainAxisAlignment.center,  
  30.          children: <Widget>[  
  31.            Text(  
  32.              'Pacifico Regular',  
  33.              style: TextStyle(  
  34.                  fontFamily: 'Pacifico', fontSize: 32.0, color: Colors.purple),  
  35.            ),  
  36.            Text(  
  37.              'Pacifico Bold',  
  38.              style: TextStyle(  
  39.                  fontFamily: 'Pacifico',  
  40.                  fontWeight: FontWeight.bold,  
  41.                  fontSize: 32.0,  
  42.                  color: Colors.purple),  
  43.            ),  
  44.            Text(  
  45.              'RobotoCondensed Regular',  
  46.              style: TextStyle(  
  47.                  fontFamily: 'RobotoCondensed', fontSize: 32.0, color: Colors.purple),  
  48.            ),  
  49.            Text(  
  50.              'RobotoCondensed Bold',  
  51.              style: TextStyle(  
  52.                  fontFamily: 'RobotoCondensed',  
  53.                  fontWeight: FontWeight.w700,  
  54.                  fontSize: 32.0,  
  55.                  color: Colors.purple),  
  56.            ),  
  57.          ],  
  58.        ),  
  59.      ),  
  60.    );  
  61.  }  
  62. }  
Hurry…. Run the app and test It on emulator/simulator or device :)))
 

Conclusion

 
We have learned how to add custom fonts in Flutter applications. There are three steps for that: 1. Download the fonts and place into fonts folder 2. Configure fonts into pubspec.yaml file and 3. Use the fonts to style the text.
SOURCE CODE AND FONTS ARE ATTACHED ABOVE. 


Similar Articles