CODEWITHSUNDEEP
flutterdartgoogle-font-api
user19908504
user19908504

Reputation:

how to add google fonts

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

Upvotes: 0

Views: 10546

Answers (3)

krishnaacharyaa
krishnaacharyaa

Reputation: 24980

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

Upvotes: 5

Nams
Nams

Reputation: 302

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

Upvotes: 0

Sujan Gainju
Sujan Gainju

Reputation: 4769

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

Upvotes: 1

Related Questions