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

how to use fontfamily properly in flutter

body: Center(
        child: SizedBox(
            width: 400,
            height: 400,
            child: Center(
                child: Row(
                  children: [
                    Image.asset('images/solider.png'),
                    const Text('Hello',style:TextStyle(fontFamily: 'IndieFlower'),)
                  ],
                )
            )
        ),
      ),

fontfamily is not affected

import 'package:flutter/material.dart';

I only include this

Tags:

2

Answers


  1. 0

    To use this font family you have to add the font ttf file as an asset.
    as if IndieFlower is a Google font. so, in this case,
    you can add a Google font package in pubspec.yaml instead of adding font ttf as an asset.

    add this package like :

    dependencies:
  google_fonts: ^5.1.0

    then where you want to use this font, import the library there like this:-

    import 'package:google_fonts/google_fonts.dart';

    then use googlefont.fontname instead of TextStyle like this:

    Text(
   'This is Google Fonts',
    style: GoogleFonts.indieFlower(),
  ),

    you will find all the text style properties inside of the () brackets.

    GoogleFonts.indieFlower(TextStyle property here)

    final code. will. be like this:

    import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class MyPageName extends StatelessWidget {
const MyPageName({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
  return Scaffold(
   body: Center(
    child: SizedBox(
      width: 400,
      height: 400,
      child: Center(
        child: Row(
          children: [
            Image.asset('images/solider.png'),
            Text(
              'This is Google Fonts',
              style: GoogleFonts.indieFlower(
                  fontSize: 14, color: Colors.black),
                ),
              ],
             ),
           ),
         ),
       ),
     );
  }
}

    Please let me know if you still getting any problem .
    if solved mark it as solved.

    Be careful: don’t forget to add packages on pubspec.yaml file .

    google font package link:

    Login or Signup to reply.
  2. 0

    1. Download your customized font (ttf) and put it in asset folder or your preferred folder like assets/fonts/IndieFlower.ttf
      2.Then you have to add font family in your pubspec.yaml folder

      flutter:
      fonts:

      • family: IndieFlower
        fonts:

        • assets/fonts/IndieFlower.ttf

    2. hit get pub

    3. Now you are ready to use this font family in your text style

    or you can simply insert Google font plugin for fonts.

    1. in terminal flutter pub add google_fonts paste dis.

    2. Then use this import ‘package:google_fonts/google_fonts.dart’;

      Text(
      ‘This is Google Fonts’,
      style: GoogleFonts.lato(),
      ),

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search