GoogleFont-Weight issue on copyWith

Question

I'm creating a text-style model and using getter to have the text-Style that use google_fonts. The issue occurs when I provide fontWeight: property. Also, the fontWeight is not providing similar look as GoogleFont.

I've tested on another project, rebuilding the project, using html renderer. I've checked this question but it is not working.

Comparison between styles

But Looks from GoogleFont

flutter doctor -v no issue

Flutter (Channel stable, 2.5.2, on Microsoft Windows [Version
    10.0.19043.1288], locale en-US)
    • Flutter version 2.5.2 at C:\Tools\flutter
    • Upstream repository https://github.com/flutter/flutter.git        
    • Framework revision 3595343e20 (3 weeks ago), 2021-09-30 12:58:18  
      -0700
    • Engine revision 6ac856380f
    • Dart version 2.14.3

Model class

class AppTextStyles {
  static TextStyle get normalMidBlod => const TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 33,
      );

  static TextStyle get latoMidBlod => GoogleFonts.lato(
        fontWeight: FontWeight.bold, //this one
        color: Colors.black,
        fontSize: 33,
      );
  static TextStyle get lato => GoogleFonts.lato(
        color: Colors.black,
        fontSize: 33,
      );
}

Test Widget

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            children: const [
              Text("style: TextStyle.."),
              Text(
                "w100",
                style: TextStyle(fontWeight: FontWeight.w100, fontSize: 33),
              ),
              Text(
                "w200",
                style: TextStyle(fontWeight: FontWeight.w200, fontSize: 33),
              ),
              Text(
                "w300",
                style: TextStyle(fontWeight: FontWeight.w300, fontSize: 33),
              ),
              Text(
                "w400",
                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 33),
              ),
              Text(
                " w500",
                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 33),
              ),
              Text(
                " w600",
                style: TextStyle(fontWeight: FontWeight.w600, fontSize: 33),
              ),
              Text(
                "  w700",
                style: TextStyle(fontWeight: FontWeight.w700, fontSize: 33),
              ),
              Text(
                "  w800",
                style: TextStyle(fontWeight: FontWeight.w800, fontSize: 33),
              ),
              Text(
                "  w900",
                style: TextStyle(fontWeight: FontWeight.w900, fontSize: 33),
              ),
            ],
          ),
          const SizedBox(
            width: 30,
          ),
          Column(
            children: [
              Text("normalMidBlod.copyWith"),
              Text(
                "w100",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w100),
              ),
              Text(
                "w200",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w200),
              ),
              Text(
                "w300",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w300),
              ),
              Text(
                "w400",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w400),
              ),
              Text(
                " w500",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w500),
              ),
              Text(
                " w600",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w600),
              ),
              Text(
                "  w700",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w700),
              ),
              Text(
                "  w800",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w800),
              ),
              Text(
                "  w900",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w900),
              ),
            ],
          ),
          const SizedBox(
            width: 30,
          ),
          RichText(
            text: TextSpan(
              children: [
                TextSpan(text: "latoBold.copyWith \n"),
                TextSpan(
                  text: "w100 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w100),
                ),
                TextSpan(
                  text: "w200 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w200),
                ),
                TextSpan(
                  text: "w300 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w300),
                ),
                TextSpan(
                  text: "w400 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w400),
                ),
                TextSpan(
                  text: " w500 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w500),
                ),
                TextSpan(
                  text: " w600 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w600),
                ),
                TextSpan(
                  text: "  w700 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w700),
                ),
                TextSpan(
                  text: "  w800 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w800),
                ),
                TextSpan(
                  text: "  w900 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w900),
                ),
              ],
            ),
          ),
          const SizedBox(
            width: 30,
          ),
          RichText(
            text: TextSpan(
              children: [
                TextSpan(text: "lato.copyWith \n"),
                TextSpan(
                  text: "w100 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w100),
                ),
                TextSpan(
                  text: "w200 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w200),
                ),
                TextSpan(
                  text: "w300 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w300),
                ),
                TextSpan(
                  text: "w400 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w400),
                ),
                TextSpan(
                  text: " w500 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w500),
                ),
                TextSpan(
                  text: " w600 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w600),
                ),
                TextSpan(
                  text: "  w700 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w700),
                ),
                TextSpan(
                  text: "  w800 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w800),
                ),
                TextSpan(
                  text: "  w900 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w900),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Solution

Only certain fonts support one ttf file with different weights. If you notice the alphabet g it looks different in each weight. You may have to download the full font family from Google fonts and include that in your pubspec.yaml under assets. It should work.

Check https://pub.dev/packages/google_fonts bundling font in application assets section.

Comments

[Yeasin Sheikh]

It works with some-weights, and yes there are missing weight-font file on lato. But the about the package README , they said With the google_fonts package, .ttf or .otf files do not need to be stored in your assets folder and mapped in the pubspec... and it is not working properly with api.

[Kaushik Chandru]

Yeah it works on almost 75% of the fonts. Some doesn't work as expected so they also suggest to bundle the fonts with the application. It's in the same link that I posted here. The last section in read me