Customizing Fonts in Flutter - GeeksforGeeks

11 Feb, 2021
Customization is everywhere, from documents to apps, we can customize everything as we want to. The power of customization is humongous, that it has revolutionized the way we look at technology in this world. Just like how printing “Hello World”, is the basic step towards learning a new programming language, customizing the style of a text is the basic step towards customizing an app. So, let’s see how to customize text in Flutter.
In Flutter, everything is a widget. So, “Text” is a widget too. The text widget has its own properties like font style, font size, font-weight, etc. The Flutter team has set a few default properties prior to making things easier for the user in creating apps. So, customizing text is all about editing these properties as we want, to get the desired output.
Now, let’s create a basic Flutter app with various default Text widget properties available.
Dart
// main.dart fileimport 'package:flutter/material.dart';import 'package:flutter/cupertino.dart'; void main() => runApp(MyApp()); // Create a stateless widgetclass MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text('Geeks for Geeks'),          backgroundColor: Colors.green,        ),        body: SafeArea(          child: Center(            child: Text(              'Welcome to GFG!',              style: TextStyle(                fontSize: 40.0,                color: Colors.green,                fontWeight: FontWeight.bold,              ),            ),          ),        ),      ),    );  }}
  
Output:
 
 
A Font file has all the required details regarding a font family, so once imported the font style can be used throughout the app. Google Fonts website has a wide variety of font families that can be downloaded and used in an app. The steps for downloading the file is as follows:
 
Step 1: Open Google Fonts and search for a font family in the search bar (here “Pacifico”).
Step 2: Select the “Pacifico” font file.
Step 3: To download, click the “Download Family” button.
 
In order to use the downloaded font family, we need to import the font file into the root of the Flutter app. The steps for importing the font file in Android Studio is as follows:
 
Step 1: Click the “Project” button in the top left corner of Android Studio.
Step 2: Right-click on the project name, here “gfg_custom_fonts” and select New + Directory.
Step 3: Name the directory as “fonts“.
Step 4: Open file manager and go to downloads. Extract and open the “Pacifico” zip file.
Step 5: Move the “Pacifico Regular” file into this directory. After moving, the font directory contains a file named “Pacifico-Regular.ttf”.
 
Now after importing the font file, it’s a necessity to tell Flutter where to fetch the font file from. So, it’s a need to declare the font in a specific file named “pubspec.yaml” file. Indentation plays a major role in this file, where double-space is used to indent the code. The steps to declare the font file is as follows:
 
Step 1: Click the “Project” button and click on the project name, here “gfg_custom_fonts”.
Step 2:  In the list, there is a file called “pubspec.yaml” file. Click this file.
Step 3: Paste the below code in the pubspec.yaml file. Be aware of the indentations.
Step 4: Press the “Pub get” button in the top right corner of the file.
 
Dart
// pubspec.yaml filename: gfgcustomfontsdescription: A new Flutter application.publish_to: 'none'version: 1.0.0+1 environment:  sdk: ">=2.7.0 <3.0.0"   dependencies:  flutter:    sdk: flutter  cupertino_icons: ^0.1.3 dev_dependencies:  flutter_test:    sdk: flutter flutter:  uses-material-design: true  fonts:    - family: Pacifico      fonts:        - asset: fonts/Pacifico-Regular.ttf
  
 
Now this font family can be used in styling the text widget in the app wherever needed. Not only one, but multiple families can be downloaded in the above-mentioned steps. 
 
Note: The name mentioned in the “family:” of the “pubspec.yaml” file should be unique for different font families. In order to use this font, the font family property of the text widget is used in the .dart file. The syntax for it is as follows:
 
Syntax:
Text('text',
             style: TextStyle(
               fontFamily: 'family_name',
             ),
           ),
 
The final code after customizing the text style is as follows:
 
Dart
// main.dart file after custom fontimport 'package:flutter/material.dart';import 'package:flutter/cupertino.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text('Geeks for Geeks'),          backgroundColor: Colors.green,        ),        body: SafeArea(          child: Center(            child: Text(              'Welcome to GFG!',              style: TextStyle(                fontFamily: 'Pacifico',                fontSize: 40.0,                color: Colors.green,                fontWeight: FontWeight.bold,              ),            ),          ),        ),      ),    );  }}
  
Output:
 
   
 
 
maitreyi sondhi
Flutter
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Listview.builder in Flutter
Flutter - DropDownButton Widget
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar
Dart - Standard Input Output
Getter and Setter Methods in Dart
Flutter - Checkbox Widget
Flutter - Row and Column Widgets
How to Append or Concatenate Strings in Dart?