Flutter Custom Font is used to make the Flutter UI more attractive and user-friendly. Android and iOS offer lots of high-quality system fonts for their native apps. We can also use some other custom fonts in our apps. We may use different types of flutter icons in our app.
In this tutorial, we will be implementing custom google fonts in our flutter app. In order to use custom fonts, we have to follow the following easy steps:
Supported font formats
Flutter supports the following font formats:
.ttc.ttf.otf
Flutter does not support .woff and .woff2 fonts for all platforms.
- Download the required fonts from Google Fonts.
- Import them into the flutter project.
- Declare the font in the pubspec.yaml
- Using the Custom Fonts.
Download the required fonts from Google Fonts
Google fonts provide a wide variety of web fonts that we can use both in web apps and mobile apps. To download fonts, visit Google Font.
Import them into the flutter project
Once we downloaded the fonts zip file. Extract them.
Now let’s create one fonts folder inside our project (not inside the lib) and place all the fonts as shown in the screenshot:
Declare the fonts in the pubspec.yaml
Now, we will declare all the flutter custom fonts into pubspec.yaml file. While adding into the pubspec.yaml, we have to be very careful as this file is space sensitive. Make sure the structure looks exactly the same as in the code below, otherwise we will get error during the sync process.
Using the Flutter Custom Font
Now once we have added it to pubspec.yaml, we are ready to use them in our project.
We can also use the custom font as our app’s default font by using the following code:
But, we can also use multiple custom fonts in our app. For demonstration purposes, we are using here 3 different fonts with Text widget as below:
Our overall main.dart file will have the following code:
Now, we will achieve as shown in the screenshot below:
You can also see this popular video about how to use flutter custom font in your project
Happy Coding 🙂