How to use Google Fonts and Text Themes in Flutter

July 28, 2020

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

dart
import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'home.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override 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

Subcribe To My Newsletter 📫

Want to know about my latest posts, tutorials, or YouTube videos? Subcribe to my newsletter to stay in the loop!