How do I use google fonts on defining a theme in flutter

4,882

Solution 1

Reposting my comment: fontFamily expects a String. Use GoogleFonts.openSans().fontFamily.

Solution 2

Paste the code below in your theme file, and add it to your ThemeData(textTheme: textTheme)

final TextTheme textTheme = TextTheme(
  headline1: GoogleFonts.roboto(
      fontSize: 97, fontWeight: FontWeight.w300, letterSpacing: -1.5),
  headline2: GoogleFonts.roboto(
      fontSize: 61, fontWeight: FontWeight.w300, letterSpacing: -0.5),
  headline3: GoogleFonts.roboto(fontSize: 48, fontWeight: FontWeight.w400),
  headline4: GoogleFonts.roboto(
      fontSize: 34, fontWeight: FontWeight.w400, letterSpacing: 0.25),
  headline5: GoogleFonts.roboto(fontSize: 24, fontWeight: FontWeight.w400),
  headline6: GoogleFonts.roboto(
      fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0.15),
  subtitle1: GoogleFonts.roboto(
      fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.15),
  subtitle2: GoogleFonts.roboto(
      fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0.1),
  bodyText1: GoogleFonts.roboto(
      fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.5),
  bodyText2: GoogleFonts.roboto(
      fontSize: 14, fontWeight: FontWeight.w400, letterSpacing: 0.25),
  button: GoogleFonts.roboto(
      fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 1.25),
  caption: GoogleFonts.roboto(
      fontSize: 12, fontWeight: FontWeight.w400, letterSpacing: 0.4),
  overline: GoogleFonts.roboto(
      fontSize: 10, fontWeight: FontWeight.w400, letterSpacing: 1.5),
);

This video explains very well how to use themes and fonts in flutter https://youtu.be/stoJpMeS5aY?t=640

Share:
4,882
user3808307
Author by

user3808307

Updated on December 24, 2022

Comments

  • user3808307
    user3808307 over 1 year

    I am new to flutter.

    I installed this library to be able to use google fonts.

    Now I need to do it in the theme data definition, and tried like this but it's not allowed

    ThemeData appTheme() {
      return ThemeData(
        ...
        fontFamily: GoogleFonts.openSans(),
      );
    }
    

    How do I do this? Thank you very much