google_fonts 0.3.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 99

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

[0.3.2] - 2019-01-07

  • README image path fixes.

[0.3.1] - 2019-01-07

  • README fixes.

[0.3.0] - 2019-01-07

  • Added dartdocs to every public method in the google fonts package.

  • Added the ability to include font files in pubspec assets (see README).

[0.2.0] - 2019-12-12

  • Updated to include all fonts currently on fonts.google.com.

[0.1.1] - 2019-12-10

Generated method names changed back to pre 0.1.0 (breaking change). #

For example,

GoogleFonts.latoTextStyle(...) is now GoogleFonts.lato(...).

Text theme parameters are now optional positional parameters (breaking change). #

For example,

GoogleFonts.latoTextTheme(textTheme: TextTheme(...)) is now GoogleFonts.latoTextTheme(TextTheme(...)).

[0.1.0] - 2019-12-06

Generated method names changed (breaking change). #

For example,

GoogleFonts.lato(...) is now GoogleFonts.latoTextStyle(...).

Text theme support #

Every font family now also has a TextTheme method.

For example, the Lato font now has GoogleFonts.latoTextStyle() and GoogleFonts.latoTextTheme().

See README for more examples.

Other cleanups #

Refactored implementation, updated READMEs, and usage docs.

[0.0.8] - 2019-12-04

Internal refactor and added tests.

[0.0.7] - 2019-12-04

BETA support for Flutter web.

[0.0.6] - 2019-12-04

Minor updates to README.

[0.0.5] - 2019-11-20

Mark as experimental in more places.

[0.0.4] - 2019-11-20

Add pubspec instructions to README.

[0.0.3] - 2019-11-20

Fix homepage and main gif.

[0.0.2] - 2019-11-20

Update README with import instructions.

[0.0.1] - 2019-11-15

The initial release supports all 960 fonts and variants from fonts.google.com.

ttf files are downloaded via http on demand, and saved to local disk so that they can be loaded without making another http request for future font requests. Fonts are loaded asynchronously through the font loader and Text widgets that use them are refreshed when they are ready.

example/README.md

google_fonts_sample_app #

This example application demonstrates how to use GoogleFonts within a simple Flutter app.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  google_fonts: ^0.3.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:google_fonts/google_fonts.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
98
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
99
Learn more about scoring.

We analyzed this package on Jan 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
flutter 0.0.0
http ^0.12.0+2 0.12.0+4
path_provider ^1.4.0 1.5.1
Transitive dependencies
async 2.4.0
charcode 1.1.2
collection 1.14.11 1.14.12
http_parser 3.1.3
meta 1.1.8
path 1.6.4
pedantic 1.9.0
platform 2.2.1
sky_engine 0.0.99
source_span 1.6.0
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test
mockito ^4.1.1
mustache ^1.1.1