The Theme Widget allows you to set many default styles in your apps, such as colors, font styles, button styles, and more. So in this article, we will go through how to use a custom font style in flutter.
let’s get started.
How to Use a Custom Font Style In Flutter?
Roboto is the default font of the Material style, there is no need to add it in pubspec.yaml.
So to use the different variations set a TextStyle
Text( 'Home', style: TextStyle( fontWeight: FontWeight.w300, // light fontStyle: FontStyle.italic, // italic ), );
The FontWeights for the corresponding styles is mentioned in the styles section of the particular font in GoogleFonts website.
- One of the coolest and easiest ways to use google fonts is to use the google_fonts_package.
- Add to pubspec.yaml
- use your font e.g
Text("TestText", style:GoogleFonts.dancingScriptTextStyle( fontSize: 25, fontStyle: FontStyle.normal, )
Declare and Access the font correctly
Declare the font path in the pubspec.yaml file
flutter: uses-material-design: true fonts: - family: Indies fonts: - asset: fonts/IndieFlower-Regular.ttf
So Accessing the font in TextStyle
style: TextStyle( color: Colors.green, fontSize: 30.0, fontFamily: 'Indies' ),
So for better understanding here is the picture which shows the font, pubspec. yaml, and the output.
So in this article, we will go through how to use a custom font style in Flutter.
Keep Learning !!! Keep Fluttering !!!
Still, need Support for Flutter Development? Please let us know.
Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.