how to add google fonts

Question

child: RichText(
                        textAlign: TextAlign.start,
                        text: const TextSpan(
                            text: "What are you looking for?", //here
                            style: TextStyle(
                                color: Colors.black87,
                                fontSize: 18.0,
                                fontWeight: FontWeight.bold)),
                      ),

help me to insert google font on the text section. This is the code style: GoogleFonts.hammersmithOne()

Pinero

Answer 1

Add dependency in your pubspec.yaml google_fonts: ^3.0.1

then use style property in your text widget

Text('What are you looking for?',
style: GoogleFonts.hammersmithOne(
  fontSize: 48,
  fontWeight: FontWeight.w700,
  fontStyle: FontStyle.italic,
  color: Colors.greenAccent),
);

Demoralize

Answer 2

You can add Google Fonts two ways , when online and offline

Online

1. Download package google_fonts, it fetches google fonts from the internet.

2. add import statement import 'package:google_fonts/google_fonts.dart'

3. Use it in the style

   Text(
     'This is hammersmithOne from Google Font'
     style: GoogleFonts.hammersmithOne(),
   ),
   

Offline

1. Visit the https://fonts.google.com/ and download the hammersmithOne font.

2. At the root directory, create a directory called google_fonts.

3. Copy-Paste hammersmithOne.ttf file into the google_fonts folder.

4. Open the pubspec.yaml file, Under the assets: section add the -google_fonts/

   Text(
     'This is hammersmithOne from Google Font',
      style: GoogleFonts.getFont('hammersmithOne'),
      // style: TextStyle(fontFamily: 'hammersmithOne') <-- This can also be used.
   ),
   

Note: Changing Google Font at App Level

If you want the font to change throughtout the app use the following code:

MaterialApp(
    theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: GoogleFonts.hammersmithOne(
      Theme.of(context).textTheme,
    ),
   // fontFamily:'hammersmithOne' <-- this can also be used
  ),
  home: GoogleFontDemo(),
);

Morril

CategoriesWidget( text: "Frozen Food", style: "GoogleFonts.hammersmithOne()", //here icon: "images/frozen.png", press: () => { – Pinero

how to style the googleFonts on this way? – Pinero

i got it already thenks – Pinero

thanks. if you want to use it app level it must be hammersmithOneTextTheme textTheme: GoogleFonts.hammersmithOneTextTheme( Theme.of(context).textTheme) – Lavalava

Answer 3

You can use the font in the style property of the Text widget.

Example:

child: RichText(
                        textAlign: TextAlign.start,
                        text: const TextSpan(
                            text: "What are you looking for?", //here
                            style: GoogleFonts.hammersmithOne(
                             textStyle : TextStyle(
                                color: Colors.black87,
                                fontSize: 18.0,
                                fontWeight: FontWeight.bold)),
                              )
                            ),

Impellent