This article is mainly about changing the font family, but as it is related to which fonts you should use or recommended if not just how you can use a font in Flutter
Flutter can work with custom fonts, and you can apply a custom font to an entire app or to individual widgets. This tutorial will show you how to create an application that uses third-party sources with the following steps:
- Import the font files.
- Declare the source in pubspec.
- Set a font as default.
- Use a font in a specific widget.
Fonts play an important role in the design and development of applications, since they are a determining factor in the readability, aesthetics, and visual identity of a user interface. Each font has its own characteristics, such as thickness, letter height, and style, which can affect how users interact with the application and how the content being presented is perceived. When designing apps, it's important to carefully choose the font that best suits the purpose and target audience of the app, making sure it's legible and aesthetically pleasing. Also, in some cases, it may be necessary to use different fonts for different parts of the application, such as headers, button texts or body text, to improve the general usability and accessibility of the application.
With this, you can use fonts like font awesome or better yet, Google Fonts, which allows you to download the font files independently on your PC and copy them to your project.
Roboto and San Fransisco are the default font family for Android and iOS, respectively. You may have a custom font created by a designer, or you may have downloaded a font from some other resource like Google Fonts. Either way, you'll need to download the font file (.ttf) and import it into your Flutter project.
Custom text fonts of operating systems
The default font on Android is Roboto and on iOS it is .SF UI Display or .SF UI Text; and it is something that you should keep in mind when working with sources
If you want to use a different font, you will need to add it to your application, which is what we are going to introduce in this post.
Your own custom fonts
1. Add a font to your project.
To add a custom font to your project, right click on your project folder and go to New > Directory. Call it assets. It should be in the root directory of your project.
Copy and paste your source into the new asset directory. I'm only using a single font in my example, the regular dance script font. I renamed it to dancing_script.ttf.
Agregue una fuente a su carpeta de activos.
2. Registre la fuente en pubspec.yaml.
open your file pubspec.yaml.
Add the font information in the Flutter section. The indentation is mandatory.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
fonts:
- family: GreyQoRegular
fonts:
- asset: assets/GreyQo-Regular.ttf
3. Use the font in your code by specifying fontFamily.
Text(
'Hello world',
style: TextStyle(
fontFamily: 'GreyQoRegular',
),
)Finally:
 5.23.00 p. m..png)
4. Restart your app
Whenever I add assets I find I need to do a hard stop and restart. Otherwise I get errors.
Keep these things in mind when declaring sources in pubspec:
- Indentation is crucial, and always make sure you have adequate spaces as needed.
- You can add multiple font families the same way (you'll see that later)
- The family determines the name of the font and must be unique across different font families.
- The asset is the source path from the root of the project.
- The weight property represents the weight of the font, an integer value from 100 to 900
- The style property specifies whether the font is normal or italic.
- Remember that this material is part of my complete course on Flutter.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter