In this blog, we will see how to use the custom fonts in the flutter app. Flutter supports .ttf and .otf font formats for all platforms. Roboto and San Fransisco are the default font family for Android and iOS, respectively. Google has provided more than 1,000 open-sourced font families . To Know more about fonts visit flutter.dev website.
Using custom font our app will become more interactive, attractive and user friendly.
You may also check our interactive app designs by our Flutter app development company
For another approach to using custom fonts, especially if you want to re-use one font over multiple projects, see Export fonts from a package.
To add the custom form to your projects, follow the steps given below.
1. Download the font file.
Initially, you need to download the font file. For downloading the file you need to visit google font or you can add google_fonts package in pubspec.yaml file.
|
1 2 |
dependencies: google_fonts: ^2.1.0 |
2. Add fonts to the project.
|
1 2 3 |
fonts/ RobotoMono-Regular.ttf RobotoMono-Bold.ttf |
3. Declare the font in the pubspec.yaml file.
|
1 2 3 4 5 6 7 |
flutter: fonts: - family: RobotoMono fonts: - asset: fonts/RobotoMono-Regular.ttf - asset: fonts/RobotoMono-Bold.ttf weight: 700 |
4. Use font in the widgets.
|
1 2 3 4 |
Text( 'Roboto Mono sample', style: TextStyle(fontFamily: 'RobotoMono'), ) |
5. Set font as the default
|
1 2 3 4 5 6 |
return MaterialApp( title: 'Custom Fonts', // Set Raleway as the default app font. theme: ThemeData(fontFamily: 'Raleway'), home: const MyHomePage(), ); |
In conclusion, I hope this blog will help you better understand of Use Custom font in the flutter. If you feel any doubt or queries please comment below.
Thanks for the read this blog and if you want to visit my other blogs click here.
Be the first to comment.