If you want to make your Flutter application more appealing and in control, Flutter Google fonts are at your service. Google offers a vast library of Google fonts which are free and accessible and can be used in mobile application development to make your typography more remarking.
Flutter, a Google UI toolkit, also supports Google Fonts, enabling developers to integrate high-quality and readable Google Fonts in Flutter applications.
You can use various available fonts in the library by implementing the Google_fonts package.
Come and dig a little deeper into how the google font flutter works and what are the available fonts.
What is Flutter Google Fonts?
Google Fonts is a remarkable package that streamlines the seamless integration of exquisite custom fonts sourced from the extensive Google Fonts collection into your Flutter applications. When installed, the app conveniently downloads the font files to the user’s device. This feature allows users to enjoy uninterrupted access to a wide range of fonts, regardless of their internet connectivity status.
What is the difference between font family and font style?
-
Font Family
A font family is a group of fonts with a cohesive design that offers distinct styles, weights, or variations. Regarding font families, it’s essential to consider the various variations available for a specific typeface. These variations typically include regular, bold, and italic styles. In typography, it is customary to designate every distinct iteration within a font family as a “font.”
-
Font Style
Font styles in Flutter are the individualized presentation of a Flutter font family. Features such as weight (normal, bold), style (italic), and flutter font size (12 pixels, 16 pixels, etc.) are all accounted for. The font style determines the text’s size, alignment, and weight.
There are four types of typefaces:
- Serif
- Sans serif
- script
- Decorative
Flutter Google Fonts List
Have you ever wondered What fonts Flutter has?
A wide selection of Flutter Google fonts allows developers to select from a diverse range of typefaces that cater to various design requirements, including classic, modern, and playful aesthetics. Furthermore, the implementation of Google Fonts in the Flutter framework is specifically designed to enhance the visual appeal of typography in web and mobile applications, guaranteeing a high-quality rendering of text across various devices.
Although there are numerous variations of Google fonts available, the most common are given below:
- Roboto
- Lato
- Open Sans
- Montserrat
- Oswald
- Raleway
- Quicksand
- Poppins
- Nunito
- Ubuntu
Custom Font Flutter
Although Android and iOS applications are built with high-quality fonts, designers still demand custom fonts. Depending on the user’s preference, Flutter supports the custom font flutter on an individual widget across the application. Here’s how you can do it:
- Add your custom font files to your Flutter project. Place the font files (e.g., .ttf or .otf) in a directory within your project’s folder structure (e.g., assets/fonts/).
- Register the font files in your pubspec.yaml file. Open the pubspec.yaml file and add the following code under the ‘flutter’s assets’ section.
fonts:
- family: <Font-Family-Name>
fonts:
- asset: assets/fonts/<Font-Name>.otf
- asset: assets/fonts/<Font-Name>.ttf
- Run the command flutter pub get into your terminal to fetch the font assets.
- In your Flutter code, import the package:flutter/services.dart package.
- Load the custom font family. Add the following code before your void main() function. Replace ‘assets/fonts/YourCustomFont-Regular.ttf’ and ‘assets/fonts/YourCustomFont-Bold.ttf’ with the appropriate file paths for your custom font files.
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await loadFont();
runApp(MyApp());
}
Future<void> loadFont() async {
await Future.wait([
// Load your custom font files
rootBundle.load('assets/fonts/YourCustomFont-Regular.ttf'),
rootBundle.load('assets/fonts/YourCustomFont-Bold.ttf'),
]);
}
- Use the custom font in your Text widgets. Apply the custom font to any Text widget by setting the fontFamily property.
Text(
'Custom Font Example',
style: TextStyle(
fontFamily: 'CustomFont',
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
How to Choose a Font Family in Flutter?
Here is the simplest way to choose a font family in Flutter:
- The first and prime step to use the google_fonts package in the Flutter app is to add the google_fonts to your project. You can do this by mentioning the google_fonts package and its version in the ‘pubspec.yaml’ file. Then run the ‘flutter pub get’ command at the terminal to download the google_fonts package.
dependencies: google_fonts: ^5.1.0
- The next step is to import the google_fonts library. To utilize the fonts in your Dart file, initially import the Google Fonts library.
import 'package:google_fonts/google_fonts.dart';
- The GoogleFonts class can be utilized to access the font families that are currently available. Users can select from a diverse range of font families available through Google Fonts, or alternatively, they may opt to utilize a custom font.
- Now you can access the Google Fonts Family by using this syntax.
import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; Text( 'Hello', style: GoogleFonts.<Font-Name>( fontSize: 20, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, ), ),
Just replace this <Font-Name> with your desired font name, like Poppins, inter, etc, and that font will be applied to your text.
Using Google Fonts in Flutter Offline
To use the google fonts offline, you have to follow the following steps to get an uninterrupted experience:
Visit the Google Fonts website (https://fonts.google.com/) using a web browser.
- Browse and select the desired font(s) for your project.
- Click on the selected font(s) to open the font details.
- Click the “Download family” button on the font details page.
- Extract the downloaded zip file to use the font files (usually in .ttf or .otf format).
- Create a new folder named fonts in your Flutter project’s root directory.
- Copy the downloaded font files (.ttf or .otf) into the fonts folder.
Changing Font Dynamically
With flutter google fonts, you can also change the font style as per your preference. Follow the same steps till selecting the font family, then proceed with the following steps:
- When you want to change the font dynamically, update the value of the selectedFontFamily variable with the desired font family.
- To reflect the font change, you need to rebuild the widget tree using setState method if you’re changing the font based on user interaction, such as a button press.
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String selectedFontFamily = 'quicksand';
void changeFont() {
selectedFontFamily = 'romana-becker';
setState(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Dynamic Font Family')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Hello',
style: TextStyle(
fontFamily: selectedFontFamily,
fontSize: 20,
),
),
ElevatedButton(
onPressed: changeFont,
child: const Text('Change Font'),
),
],
),
),
);
}
}
This is how the code turns out:
In this example, pressing the “Change Font” button will update the selectedFontFamily variable to ”romana-becker”, and the Text widget will be rebuilt with the new font family.
Licensing font in Flutter
When utilizing fonts in projects, license them. Open-source licenses allow the free use, modification, and distribution of Flutter Google Fonts. Each typeface’s license can be found on Google Fonts or in the downloaded font files.
You may need to purchase commercial fonts or contact font foundries for licensing information if you need non-open-source fonts. Commercial fonts require a license based on usages, such as quantity of installs or project type.
Respecting font licenses promotes font designers and guarantees legal compliance.
Conclusion
Flutter Google Fonts offers a diverse assortment of typographic choices that cater to the needs of Flutter developers, enabling them to enhance the aesthetic appeal and overall design of their applications. Developers can conveniently access and utilize various font families and styles using the google_fonts package or integrating custom fonts.
Using Google Fonts Flutter, applications developed with Flutter can attain visually impressive and harmonious typographic encounters, augmenting user interfaces and providing a refined and expert appearance.
Suppose one desire to optimize the complete capabilities of Google Fonts and construct exemplary Flutter applications. In that case, hire a flutter developer to transform conceptualizations into reality.
