Trees in the mountains

How to use Google Fonts and Text Themes in Flutter

Stop letting your Flutter projects look like everyone else’s! What’s the easiest way to fix it you may ask? Fonts. They’re such a simple form of customization but they can go a long way in helping an app or a website feel different than the norm. Luckily, Flutter makes it really easy to use Google Fonts, the king of free, open source font hosting.

The process is fairly straight forward.

  1. Add the Google Fonts plugin to your pubspec.yaml file

  2. Use the Material Text Scaling tool and select the Google Fonts you’d like to use.

  3. Switch over to the ‘code’ tab inside the tool and select Flutter in the dropdown

  4. Paste the dart code into your main.dart file

  5. Import the google_fonts plugin to your main.dart

Your main.dart file should look something like this

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

import 'home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.system,
      theme: ThemeData.light().copyWith(
        backgroundColor: Colors.white,
        primaryColor: Colors.black,
        accentColor: Colors.black,
        cursorColor: Colors.black,
        textSelectionHandleColor: Colors.black,
        textTheme: TextTheme(
          headline1: GoogleFonts.playfairDisplay(
              fontSize: 97, fontWeight: FontWeight.w300, letterSpacing: -1.5),
          headline2: GoogleFonts.playfairDisplay(
              fontSize: 61, fontWeight: FontWeight.w300, letterSpacing: -0.5),
          headline3: GoogleFonts.playfairDisplay(
              fontSize: 48, fontWeight: FontWeight.w400),
          headline4: GoogleFonts.playfairDisplay(
              fontSize: 34, fontWeight: FontWeight.w400, letterSpacing: 0.25),
          headline5: GoogleFonts.playfairDisplay(
              fontSize: 24, fontWeight: FontWeight.w400),
          headline6: GoogleFonts.playfairDisplay(
              fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0.15),
          subtitle1: GoogleFonts.playfairDisplay(
              fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.15),
          subtitle2: GoogleFonts.playfairDisplay(
              fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0.1),
          bodyText1: GoogleFonts.openSans(
              fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.5),
          bodyText2: GoogleFonts.openSans(
              fontSize: 14, fontWeight: FontWeight.w400, letterSpacing: 0.25),
          button: GoogleFonts.openSans(
              fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 1.25),
          caption: GoogleFonts.openSans(
              fontSize: 12, fontWeight: FontWeight.w400, letterSpacing: 0.4),
          overline: GoogleFonts.openSans(
              fontSize: 10, fontWeight: FontWeight.w400, letterSpacing: 1.5),
        ),
      ),
      home: Home(),
    );
  }
}

That’s it! Now you can use your TextTheme data wherever you’d like in your app