copyWith doesn't work

[predatorx7]

Describe the bug On using .copyWith in a GoogleFont TextStyle, the font weight reduces.

To Reproduce Steps to reproduce the behavior:

1. Create an instance of any GoogleFont i.e final myStyle = GoogleFonts.raleway( ... )
2. use myStyle as textstyle for a text and it'll look the way you expect.
3. Now use copyWith on myStyle i.e myStyle.copyWith(fontWeight: FontWeight.w800,)
4. Instead of heavier weight like FontWeight.w800, text will appear like FontWeight.normal

Expected behavior I want GoogleFont textStyle with custom styles by using copyWith method.

Include the contents of your google_fonts directory google_fonts/OFL.txt google_fonts/Raleway-Black.ttf google_fonts/Raleway-BlackItalic.ttf google_fonts/Raleway-Bold.ttf google_fonts/Raleway-BoldItalic.ttf google_fonts/Raleway-ExtraBold.ttf google_fonts/Raleway-ExtraBoldItalic.ttf google_fonts/Raleway-ExtraLight.ttf google_fonts/Raleway-ExtraLightItalic.ttf google_fonts/Raleway-Italic.ttf google_fonts/Raleway-Light.ttf google_fonts/Raleway-LightItalic.ttf google_fonts/Raleway-Medium.ttf google_fonts/Raleway-MediumItalic.ttf google_fonts/Raleway-Regular.ttf google_fonts/Raleway-SemiBold.ttf google_fonts/Raleway-SemiBoldItalic.ttf google_fonts/Raleway-Thin.ttf google_fonts/Raleway-ThinItalic.ttf

Screenshots for code

RichText(
        text: TextSpan(
          text: 'AAVEKH',
          style: GoogleFonts.raleway(
            fontWeight: FontWeight.w800,
            fontSize: 24,
            color: Colors.white,
          ),
        ),
      )

and

for code

RichText(
        text: TextSpan(
          text: 'AAVEKH',
          style: GoogleFonts.raleway().copyWith(
            fontWeight: FontWeight.w800,
            fontSize: 24,
            color: Colors.white,
          ),
        ),
      )

Smartphone (please complete the following information if applicable):

• Device: Samsung M31
• OS: Android 11

[saigkl]

Yeah, it's not working. Need solution.

[jhionan]

we add fontFamily on the copyWith( ) than the fontWeight start working

[juanagu]

Same issue here, any solution?

[Mathew-Smith]

I'm also having this issue.

style = GoogleFonts.montserrat(
      fontWeight: FontWeight.w100,
)
updatedStyle = style.copyWith(fontWeight: FontWeight.w900);

will show text with updatedStyle very thin (w100) when I would expect it to show very bold (w900).

we add fontFamily on the copyWith( ) than the fontWeight start working

Thanks for this suggestion. I've found the following does work

updatedStyle = style.copyWith(fontFamily: 'montserrat', fontWeight: FontWeight.w900);

Trying to write tidier code I tried the following, but this does NOT work

updatedStyle = style.copyWith(fontFamily: style.fontFamily, fontWeight: FontWeight.w900);

So I attached the debugger and found that style.fontFamily on the above line of code actually equals 'Montserrat_100' when I had expected it to be 'Montserrat'. (I believe the 100 is referring to font weight w100).

So it seems like the problem is it's trying to apply the font weight to a font that already has a specific weight (in this case w100). I don't know enough about this library to understand it fully but would love to see this fixed.

Appears to be related to https://github.com/material-foundation/google-fonts-flutter/issues/35 Specifically this reply from johnsonmh "The reason you're seeing what you're seeing is that in order to pick the correct font file, we need to know the specific fontWeight and fontStyle from the TextStyle"

[caseycrogers]

This is a really frustrating bug. Narrowing it down to an issue with google fonts (and not an issue with my app code) wasted quite a few hours of my time. Is there any progress on resolving this?

[predatorx7]

@caseycrogers Try using .merge instead of .copyWith

[caseycrogers]

Thanks! I already resolved the problem by making the parent text style normal weight and then explicitly declaring bold in the places I need it (the inverse was less verbose as I need it bold way more often than I need it normal, but oh well).

I'm trying to get some attention on this bug because it wasted a lot of my time and I'm sure it's wasting other people's time too so it'd be best if it were fixed.

[guidezpl]

Could someone please provide a full code sample to help me investigate this?

  To create it you can use `flutter create bug` command and update the `main.dart` file.

  Alternatively, you can use https://dartpad.dev/
  which is capable of creating and running small Flutter apps.

[superakabo]

@guidezpl

debugPrint(GoogleFonts.inter().fontFamily);

for example, should print "Inter" not "Inter_regular". I believe this is the source of the error.

[jtmuller5]

I've uploaded an example to this repo: https://github.com/jtmuller5/flutter_playground

Just uncomment the line in main that says return TextStylesScreenOne() if it's not already uncommented.

[guidezpl]

Thanks for the code sample

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

void main() {
  runApp(const MyApp());
}

const GlobalObjectKey<ScaffoldState> scaffoldKey =
    GlobalObjectKey<ScaffoldState>('scaffold');

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Playground',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return TextStylesScreenOne();
  }
}

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

  TextStyle nativeFlutter = const TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 16,
  ).copyWith(fontWeight: FontWeight.w300);

  TextStyle googleFontCopy = GoogleFonts.poppins(
    fontWeight: FontWeight.w500,
    fontSize: 16,
  ).copyWith(fontWeight: FontWeight.w300);

  TextStyle googleFontApply = GoogleFonts.poppins(
    fontWeight: FontWeight.w500,
    fontSize: 16,
  ).apply(fontWeightDelta: -2);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('All of these should be the same weight (w300)'),
              const SizedBox(
                height: 24,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Native Flutter',
                    style: nativeFlutter,
                  ),
                  Text(nativeFlutter.fontWeight.toString()),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Google Fonts - copyWith',
                    style: googleFontCopy,
                  ),
                  Text(googleFontCopy.fontWeight.toString()),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Google Fonts - apply',
                    style: googleFontApply,
                  ),
                  Text(googleFontApply.fontWeight.toString()),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I now get this is a duplicate of https://github.com/material-foundation/google-fonts-flutter/issues/35, please see https://github.com/material-foundation/google-fonts-flutter/issues/35#issuecomment-618582951. As such I'm closing this issue.