google_fonts
The google_fonts package for Flutter allows you to easily use any of the thousands of fonts available from fonts.google.com in your Flutter app.
Getting Started
With the google_fonts package, .ttf or .otf files do not need to be stored in your assets folder and mapped in the pubspec. Instead, they can be fetched via HTTP at runtime and cached in the app's file system. This is ideal for development and can be the preferred behaviour for production apps looking to reduce the app bundle size. Still, you may choose to include the font file in the assets, and the Google Fonts package will prioritize pre-bundled files over HTTP fetching. Because of this, the Google Fonts package allows developers to choose between pre-bundling the fonts and loading them over HTTP while using the same API. See the API docs to disable HTTP fetching.
For example, say you want to use the Lato font from Google Fonts in your Flutter app.
First, add the google_fonts package to your pubspec dependencies.
To import GoogleFonts:
import 'package:google_fonts/google_fonts.dart';
To use GoogleFonts with the default TextStyle:
Text(
'This is Google Fonts',
style: GoogleFonts.lato(),
),
Or, if you want to load the font dynamically:
Text(
'This is Google Fonts',
style: GoogleFonts.getFont('Lato'),
),
To use GoogleFonts with an existing TextStyle:
Text(
'This is Google Fonts',
style: GoogleFonts.lato(
textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
),
),
or
Text(
'This is Google Fonts',
style: GoogleFonts.lato(textStyle: Theme.of(context).textTheme.headline4),
),
To override the fontSize, fontWeight, or fontStyle:
Text(
'This is Google Fonts',
style: GoogleFonts.lato(
textStyle: Theme.of(context).textTheme.headline4,
fontSize: 48,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
),
),
You can also use GoogleFonts.latoTextTheme() to make or modify an entire text theme to use the "Lato" font.
MaterialApp(
theme: ThemeData(
textTheme: GoogleFonts.latoTextTheme(
Theme.of(context).textTheme, // If this is not set, then ThemeData.light().textTheme is used.
),
),
);
Or, if you want a TextTheme where a couple of styles should use a different font:
final textTheme = Theme.of(context).textTheme;
MaterialApp(
theme: ThemeData(
textTheme: GoogleFonts.latoTextTheme(textTheme).copyWith(
body1: GoogleFonts.oswald(textStyle: textTheme.body1),
),
),
);
Bundling font files in your application's assets
The google_fonts package will automatically use matching font files in your pubspec.yaml's assets (rather than fetching them at runtime via HTTP). Once you've settled on the fonts you want to use:
- Download the font files from https://fonts.google.com. You only need to download the weights and styles you are using for any given family. Italic styles will include
Italicin the filename. Font weights map to file names as follows:
{
FontWeight.w100: 'Thin',
FontWeight.w200: 'ExtraLight',
FontWeight.w300: 'Light',
FontWeight.w400: 'Regular',
FontWeight.w500: 'Medium',
FontWeight.w600: 'SemiBold',
FontWeight.w700: 'Bold',
FontWeight.w800: 'ExtraBold',
FontWeight.w900: 'Black',
}
- Move those fonts to a top-level app directory (e.g.
google_fonts).
- Ensure that you have listed the folder (e.g.
google_fonts/) in yourpubspec.yamlunderassets.
Note: Since these files are listed as assets, there is no need to list them in the fonts section of the pubspec.yaml. This can be done because the files are consistently named from the Google Fonts API (so be sure not to rename them!)
Licensing Fonts
The fonts on fonts.google.com include license files for each font. For example, the Lato font comes with an OFL.txt file.
Once you've decided on the fonts you want in your published app, you should add the appropriate licenses to your flutter app's LicenseRegistry.
For example:
void main() {
LicenseRegistry.addLicense(() async* {
final license = await rootBundle.loadString('google_fonts/OFL.txt');
yield LicenseEntryWithLineBreaks(['google_fonts'], license);
});
runApp(...);
}
![[BUG] Unhandled Exception: type 'Future<ByteData?>' is not a subtype of type 'Future<ByteData>'](https://avatars.githubusercontent.com/u/2638284?v=4)
for code
for code
![[Proposal] Add function to await any pending font loads.](https://avatars.githubusercontent.com/u/4229329?v=4)
goldens/test2.png
20 Dec 23, 2022
5 Nov 2, 2022
18 Dec 21, 2022
10 Oct 30, 2022
14 Dec 30, 2022
88 Oct 26, 2022
2 May 31, 2022
12 Oct 23, 2022
289 Dec 28, 2022
1 Jul 5, 2022
6 Nov 23, 2022
3 Jun 23, 2022
3 Sep 14, 2022
7 Apr 5, 2022
5 Nov 29, 2022
1 Jun 18, 2020
0 Jan 25, 2022
50 Jan 4, 2023
28 Jan 6, 2023