Change Default Font Family of Flutter app Using Google Font

Its’ easy to forget that behind all of the animations and the beautiful images, most UI is still primary text. Flutter and Material are going to get a little bit better with Google Font. Google Fonts gives the power to use the perfect font anywhere. Google font served 32 trillion fonts.

Dynamic Font Serving

Google fonts for Flutter is dynamic and cached, which is great if you have a content-rich product which always wants to pair the perfect typeface with different pieces of content. A dynamic approach is also really useful for a developer who cares about their app size. Using dynamic font serving can help you make sure you only include the fonts that your users need when they need them.

Let’s look at the code of how to actually apply Google fonts into your Flutter projects.

Add Package

You would have to add your dependencies of Google Fonts within the pubspec.yaml file. Google Fonts is available on pub.dev.  Then you would import the Google Fonts package into your Dart code. It’s pretty simple. 

dependencies:
  google_fonts: ^0.2.0

You can install packages from the editor that might support flutter pub get.

Import Google Font

import 'package:google_fonts/google_fonts.dart';

After importing the package, you’ll get autocomplete suggestions directly from Google Font Servers. It’ll download the fonts, add it to your app for you. Flutter has created a tool that enables you to choose any one of those Google Fonts.

Change Default Font

Every Material component has theming baked in. If you change a color scheme or text scheme or border style, you see it everywhere. Most of all, the themed widgets pair really nicely with your custom ones. The default font of MaterialApp is Roboto.Let’s change it.

return MaterialApp(
      title: 'Google Font Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primarySwatch: Colors.amber,
          textTheme: GoogleFonts.solwayTextTheme(
            Theme.of(context).textTheme,
          )),
      home: MyFontPage(title: 'Font Demo Main Page'),
    );

We’re going to start by using solway instead of Roboto.It’s a little bit more playful than Roboto.

Change the font in a specific widget

If you want to apply the font to a specific widget, such as a Text widget, provide a style to the widget.

Text(' The recorded voice scratched in the speaker.',
       style: GoogleFonts.indieFlower(fontSize: 25.0),),

In this example, apply the indieFlower font to a single Text widget.