Question 78538 in Flutter Question posted in
The official Flutter documentation can be found here.

how to add google fonts – Flutter

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

Tags:

3

Answers


  1. 0

    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)),
                              )
                            ),
    Login or Signup to reply.
  2. 0

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

    enter image description here

    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(),
);
    Login or Signup to reply.
  3. 0

    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),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search