Flutter Fonts Integration

This articles helps you to integrate google fonts and custom fonts in your flutter applications. Google Fonts provide flutter package which helps us to integrate any of the google fonts in our applications.

For custom font, you can store font file in assets folder and you can use.

There are two ways to integrate fonts in flutter applications: Google Fonts and Custom Fonts. For Google Fonts you do not need to store .ttf or .otf file in assets folder. Google fonts are fetched from http once then they are stored in cache memory of application.

 
 

Add below dependency in your pubspec file

google_fonts: ^1.1.0
 
 

Import Google Flutter Fonts Package

import ‘package:google_fonts/google_fonts.dart’;
 
 

Integrate Google Flutter Fonts

You can use google fonts in flutter applications using different ways.

Only change font style

Text( “CodingWithDhrumil”, style: GoogleFonts.shrikhand())
 

Change Font Style With Size

Text( “CodingWithDhrumil”, style: GoogleFonts.allertaStencil(
    textStyle: Theme.of(context).textTheme.headline6
))
 

Change Font Style With Custom Text Style

Text( “CodingWithDhrumil”, style: GoogleFonts.inter(
    textStyle: TextStyle(letterSpacing: 10),
))
 

Change Font Style With Different Parameters

Text( “CodingWithDhrumil”, style: GoogleFonts.pacifico(
    color: Colors.red,
    fontSize: 30,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic
))
 

Change Font Style For All Texts in Application

theme: ThemeData(
    textTheme: GoogleFonts.biryaniTextTheme(),
),
 
 

Integrate Custom Fonts

 

Put .ttf or .otf fonts files in fonts folder in project

First you need to download font file whatever font you want to integrate. Then you need to extract this zip file. Then create fonts folder under main project and put these .ttf or .otf files in this folder.

 

Add font file path in pubspec file

fonts:

– asset: fonts/nunito_black.ttf

 

Integrate fonts in text widget

We can integrate fonts in text widget using fontFamily parameter. You need to give exact font file name to font family parameter in text widget. Now you can run project and see your custom fonts in your application.

Text( “CodingWithDhrumil”, style: TextStyle( fontFamily: ‘nunito_black’)
 
 
flutter fonts
 
 

Leave a Reply