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
Author by
user3808307
Updated on December 24, 2022Comments
-
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