google_fonts 1.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 100

google_fonts #

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

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

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:

  1. 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 Italic in 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',
}
  1. Move those fonts to a top-level app directory (e.g. google_fonts).

  1. Ensure that you have listed the folder (e.g. google_fonts/) in your pubspec.yaml under assets.

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(...);
}

[1.1.0] - 2020-05-11 #

  • Increase the flutter SDK dependency to version 1.17 (latest stable). This is needed for updated text theme names and a fix in the engine.
  • Update text theme names.

[1.0.0] - 2020-04-22 #

[0.7.0] - 2020-04-22 #

  • Added the following variable fonts:
    • Bellota
    • Bellota Text
    • Comic Neue
    • Crimson Pro
    • Fira Code
    • Gotu
    • Hepta Slab
    • Inria Sans
    • Inter
    • Literata
    • Manrope
    • Markazi Text
    • Public Sans
    • Sen
    • Spartan
    • Viaoda Libre

[0.6.2] - 2020-04-17 #

  • Clean up code.

[0.6.1] - 2020-04-17 #

  • Memoize asset manifest.

[0.6.0] - 2020-04-16 #

  • Rename config.allowHttp to config.allowRuntimeFetching.

[0.5.0] - 2020-04-14 #

  • Use more accurate naming algorithm for GoogleFonts.foo and GoogleFonts.fooTextTheme.

[0.4.3] - 2020-04-14 #

  • Add GoogleFonts.getTextTheme(...) method for dynamically getting a text theme from a font name.

[0.4.2] - 2020-04-14 #

  • Change loadFontIfNecessary to only follow through once per unique family when called in parallel.

[0.4.1] - 2020-04-13 #

  • Update README to include instructions for how to include licenses for fonts.

[0.4.0] - 2020-03-20 #

  • Added ability to load fonts dynamically through getFont method.
  • Added asMap method which returns a map with font family names mapped to methods.

[0.3.10] - 2020-03-18 #

Update Fonts API url in generator to add in missing fonts.

[0.3.9] - 2020-02-13 #

  • Fix path_provider usage for web

[0.3.8] - 2020-02-10 #

  • Add byte length and checksum verification for font files downloaded.

[0.3.7] - 2020-02-03 #

  • Fix asset font loading bug
  • Update asset font README instructions

[0.3.6] - 2020-01-31 #

  • Add a config to the GoogleFonts class with an allowHttp option.

[0.3.5] - 2020-01-23 #

  • Update generator to get most up-to-date urls from fonts.google.com.
  • Add CONTRIBUTING.md.

[0.3.4] - 2020-01-23 #

  • Store downloaded font files in device's support directory instead of documents directory.

[0.3.3] - 2020-01-22 #

  • Update font URLs to https to properly support web.

[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/lib/main.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    final TextStyle display1 = Theme.of(context).textTheme.headline4;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: GoogleFonts.oswald(textStyle: display1),
            ),
            Text(
              '$_counter',
              style: GoogleFonts.lato(fontStyle: FontStyle.italic),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  google_fonts: ^1.1.0

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]
99
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]
100
Learn more about scoring.

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

  • Dart: 2.8.1
  • pana: 0.13.8-dev
  • Flutter: 1.17.0

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
crypto ^2.1.3 2.1.5
flutter 0.0.0
http ^0.12.0+2 0.12.1
path_provider ^1.4.0 1.6.9
pedantic ^1.8.0 1.9.0
Transitive dependencies
charcode 1.1.3
collection 1.14.12
convert 2.1.1
http_parser 3.1.4
meta 1.1.8
path 1.7.0
path_provider_macos 0.0.4+3
path_provider_platform_interface 1.0.2
platform 2.2.1
plugin_platform_interface 1.0.2
sky_engine 0.0.99
source_span 1.7.0
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
console ^3.1.0
flutter_test
mockito ^4.1.1
mustache ^1.1.1
protobuf ^1.0.1
protoc_plugin any