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()

CodePudding user response：

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)),
                              )
                            ),

CodePudding user response：

Add dependency in your pubspec.yaml

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(),
);