In recent months Google has announced the library of Google fonts, who helps developers a lot to modify the font of Flutter Text. The
google_fonts package for Flutter allows you to easily use any of the 977 fonts (and their variants) from fonts.google.com in your Flutter app. The big thing is that you don’t have a need to add any .ttf or .otf file in the asset folder and mapped it with pubspec.yaml file. As I have already written another blog also about Flutter custom font, where you have to need to add your font file manually in the assets folder and mapped it with pubspec.yaml file.
In this article, I’ll show you how to implement the google_fonts library in your flutter project and how to use the different fonts in it.
First, you have a need to add a
google_fonts library in your pubspec.yaml file.
dependencies: flutter: sdk: flutter google_fonts: <latest-version>
Now we are ready to code for UI components. I am using simple Text Widgets. You can also use other properties of the Text Widget as you used in TextStyle, it will not reflect your font and work fine. There have a many ways to apply google fonts in your flutter projects, some examples are given below.
GoogleFonts with the default TextStyle:
Text( "Hello World", style: GoogleFonts.astloch(fontSize: 20), ),
Text( 'Hello World', style: GoogleFonts.getFont('Lato'), ),
GoogleFonts with an existing
Text( 'Hello World', style: GoogleFonts.lato( textStyle: TextStyle(color: Colors.green), ), ),
Text( 'Hello World', style: GoogleFonts.lato(textStyle: Theme.of(context).textTheme.display1), ),
To override the properties
Text( 'Hello World', style: GoogleFonts.lato( textStyle: Theme.of(context).textTheme.display1, fontSize: 20 fontWeight: FontWeight.bold fontStyle: FontStyle.italic, ), ),