Skip to content
A Flutter package for accessing the Google Fonts API
Dart Ruby Shell Swift Kotlin HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build First commit on new repo Dec 10, 2019
data Update library to include new fonts Dec 12, 2019
example Update readme for check assets (#42) Jan 7, 2020
generator Add dartdocs to every public method in the google fonts package (#33) Jan 6, 2020
lib Check assets before trying to load via http (#41) Jan 7, 2020
readme_images Bump to 0.3.1 to fix images in README (#45) Jan 7, 2020
test Check assets before trying to load via http (#41) Jan 7, 2020
.gitignore Add gitignore Dec 12, 2019
.travis.yml Add travis scripts Dec 17, 2019
CHANGELOG.md Fix image paths in README (#48) Jan 7, 2020
LICENSE
README.md Fix image paths in README (#48) Jan 7, 2020
pubspec.lock
pubspec.yaml Fix image paths in README (#48) Jan 7, 2020
travis_script.sh Add trailing comma and formatting Dec 17, 2019

README.md

google_fonts

NOTE: This package is in Beta. The API is subject to change.

The google_fonts package for Flutter allows you to easily use any of the 977 fonts (and their variants) 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 once via http at runtime, and cached in the app's file system. This is ideal for development, and can be the preferred behavior for production apps that are looking to reduce the app bundle size. Still, you may at any time 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.

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(),
),

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.display1),
),

To override the fontSize, fontWeight, or fontStyle:

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.display1,
    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,
    ),
  ),
);

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),
    ),
  ),
);

Choosing to include a font without having to http fetch it

If you want the Google Fonts package to use font files that you have included in your pubspec's assets (rather than fetching at runtime via http), first download the font files from https://fonts.google.com. Then, create a folder at the top level of your app directory named google_fonts, and copy the font files that you want to be used into that folder.

You only need to copy the files in for the font weight and font styles that you are using for any given family. Italic styles will include Italic in the filename, and the font weights map to filenames 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',
}

Finally, make sure you have listed the google_fonts folder in your pubspec.yaml.

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!)

You can’t perform that action at this time.