Skip to content

Conversation

@MitchellGoodwin
Copy link
Contributor

@MitchellGoodwin MitchellGoodwin commented Oct 25, 2023

Addresses #63507, and is a follow up to the engine PR flutter/engine#46857

Changes the font family string when attempting to use Apple system fonts to the new proxies added by the engine. For the "Text" font this will be more secure in the future against possible changes to Apple's API. For the "Display" font, this will now work correctly when it didn't before.

I checked the letter spacing values against a native app for all font sizes between 17-28. I made a few adjustments to better match native, but especially for the "Text" font we were either really close, or close enough to not make a large breaking change to default fonts worth it.

Before After
Screenshot 2023-11-02 at 11 45 12 AM Screenshot 2023-11-02 at 11 46 25 AM

The smaller text in both the before and after should be the same. The large system font that Flutter used before was incorrect, which caused it to look more spread out. Now we use the correct font.

Pre-launch Checklist

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
  • I signed the CLA.
  • I listed at least one issue that this PR fixes in the description above.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or this PR is test-exempt.
  • All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@github-actions github-actions bot added a: text input Entering text in a text field or keyboard related problems framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. f: cupertino flutter/packages/flutter/cupertino repository labels Oct 25, 2023
@MitchellGoodwin MitchellGoodwin marked this pull request as ready for review November 2, 2023 18:27
@flutter-dashboard
Copy link

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #137275 at sha e13d74482b3e6bdc6360fdfb5da03f6b5b9986f6

@flutter-dashboard flutter-dashboard bot added the will affect goldens Changes to golden files label Nov 2, 2023
@MitchellGoodwin
Copy link
Contributor Author

Golden tests failed as expected for titles and the pickers, as those where most impacted.

@MitchellGoodwin
Copy link
Contributor Author

CC @goderbauer

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe use moreOrLessEquals instead.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mention [fontFamily] in this sentence somehow to link to it and give people context where CupertinoSystemText and CupertinoSystemDisplay can be used.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if you use these magic strings on non-Apple devices? Maybe document that as well

Copy link
Member

@goderbauer goderbauer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"will fail" sounds like my app would crash? But fallback font sounds like it would just display another font?

Could we maybe say instead: When these strings are used on non-Apple platforms, the regular/normal fallback font family is used instead.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here.

@mark8044
Copy link

Would love to test this, any ETA when this goes to master branch?

@MitchellGoodwin
Copy link
Contributor Author

Would love to test this, any ETA when this goes to master branch?

Apologies, we are still getting some internal work done before merging this. I'm hoping to be able to merge it after the Thanksgiving holiday. The engine side is merged into master however, and can be tested by setting your font family to "CupertinoSystemDisplay" or "CupertinoSystemText" in your theme or elsewhere right now.

@mark8044
Copy link

CupertinoSystemDisplay

Thanks for that. Looks MUCH better 👍

@MitchellGoodwin MitchellGoodwin added the autosubmit Merge PR when tree becomes green via auto submit App label Nov 29, 2023
@auto-submit auto-submit bot merged commit e84f129 into flutter:master Nov 29, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 30, 2023
@mark8044
Copy link

mark8044 commented Nov 30, 2023

@MitchellGoodwin
I see this got merged into master branch, that is awesome thank you!

Question for you, it looks like not all the font weights are working, for example the type FontWeight.w400 and FontWeight.w700 are working well, but not 500, 600, 800, etc.. Am I doing it wrong?

EDIT: using variable font weights also has no effect outside of 400 and 700

auto-submit bot pushed a commit to flutter/packages that referenced this pull request Nov 30, 2023
flutter/flutter@5e5b529...918e336

2023-11-30 [email protected] Move Impeller tests on Pixel 7 Pro from staging to prod (flutter/flutter#139280)
2023-11-30 [email protected] Introduce multi-touch drag strategies for `DragGestureRecognizer` (flutter/flutter#136708)
2023-11-30 [email protected] Use the correct recipe on fuchsia_precache. (flutter/flutter#139279)
2023-11-30 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Migration for the `sendTiming` events for `package:unified_analytics`" (flutter/flutter#139278)
2023-11-30 [email protected] Migrate fuchsia_precache to shard tests. (flutter/flutter#139202)
2023-11-29 [email protected] Fix chips `onDeleted` callback don't show the delete button when disabled (flutter/flutter#137685)
2023-11-29 [email protected] Roll Flutter Engine from 9a7e49d75411 to 35939ca8534f (5 revisions) (flutter/flutter#139259)
2023-11-29 [email protected] Refactor to use Apple system fonts (flutter/flutter#137275)
2023-11-29 [email protected] Dynamic view sizing (flutter/flutter#138648)
2023-11-29 [email protected] Roll dependencies (flutter/flutter#139203)
2023-11-29 [email protected] add sourceTimeStamp to ScaleUpdateDetails (flutter/flutter#135936)
2023-11-29 [email protected] Roll Flutter Engine from 222beb28a8eb to 9a7e49d75411 (1 revision) (flutter/flutter#139250)
2023-11-29 [email protected] Remove deprecated `PlatformMenuBar.body` (flutter/flutter#138509)
2023-11-29 [email protected] Migration for the `sendTiming` events for `package:unified_analytics` (flutter/flutter#138896)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-packages
Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose

To report a problem with the AutoRoller itself, please file a bug:
https://issues.skia.org/issues/new?component=1389291&template=1850622

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
@MitchellGoodwin
Copy link
Contributor Author

@MitchellGoodwin I see this got merged into master branch, that is awesome thank you!

Question for you, it looks like not all the font weights are working, for example the type FontWeight.w400 and FontWeight.w700 are working well, but not 500, 600, 800, etc.. Am I doing it wrong?

EDIT: using variable font weights also has no effect outside of 400 and 700

I'm playing around with it, and I'm getting the large font to change font weight as expected with the test code I'm running. The Text font looks like it might be off from native though. Could you maybe post the code you are running and a screenshot of what you are seeing?

@mark8044
Copy link

mark8044 commented Nov 30, 2023

Sure, my code is pretty simple (shortened to take out the colors for brevity sake):

                                      Text.rich(
                                          TextSpan(
                                              text:widget.map["title"].toString(),
                                              style: TextStyle(
                                                fontSize: 17,
                                                letterSpacing: -0.3,
                                                fontWeight: FontWeight.w400, //Tried cycling here from 100-900
                                                // fontVariations: [
                                                //   FontVariation(
                                                //       'wght', 500)
                                                // ],
                                              ),
                                      )
                                    ),

Testing from FontWeight.w100 up to FontWeight.w900 only renders two weights as follows:

FontWeight 100-500 (blue text)

Screen Shot 2023-11-30 at 11 34 45 AM

FontWeight 600-900 (blue text)

Screen Shot 2023-11-30 at 11 35 56 AM

To me its rendering the same way browsers render CSS fonts when the font family doesn't actually have the in-between weights loaded, ie. lumping 600-800 with the 700 weight and <=500 with the 400 weight.

EDIT, just to be sure, this is the version I'm on. Im pretty sure the font updates to the new default one, as it looks much better.

Flutter 3.17.0-19.0.pre.23 • channel master • https://github.com/flutter/flutter.git
Framework • revision 88710972da (23 minutes ago) • 2023-11-30 11:25:50 -0800
Engine • revision 35939ca853
Tools • Dart 3.3.0 (build 3.3.0-170.0.dev) • DevTools 2.30.0-dev.4

@MitchellGoodwin
Copy link
Contributor Author

Ok, I'm seeing the same now. Looking into it, that should be working.

caseycrogers pushed a commit to caseycrogers/flutter that referenced this pull request Dec 29, 2023
Addresses flutter#63507, and is a follow up to the engine PR flutter/engine#46857

Changes the font family string when attempting to use Apple system fonts to the new proxies added by the engine. For the "Text" font this will be more secure in the future against possible changes to Apple's API. For the "Display" font, this will now work correctly when it didn't before.

I checked the letter spacing values against a native app for all font sizes between 17-28. I made a few adjustments to better match native, but especially for the "Text" font we were either really close, or close enough to not make a large breaking change to default fonts worth it.

| Before  | After |
| ------------- | ------------- |
| <img width="466" alt="Screenshot 2023-11-02 at 11 45 12�AM" src="https://github.com/flutter/flutter/assets/58190796/627ed8ac-d848-4f71-aa62-a467b8aac62d"> | <img width="383" alt="Screenshot 2023-11-02 at 11 46 25�AM" src="https://github.com/flutter/flutter/assets/58190796/9a502021-7d2b-4e14-98f1-86971b3830a5"> |

The smaller text in both the before and after should be the same. The large system font that Flutter used before was incorrect, which caused it to look more spread out. Now we use the correct font.
@MitchellGoodwin MitchellGoodwin mentioned this pull request Jan 16, 2024
8 tasks
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a: text input Entering text in a text field or keyboard related problems autosubmit Merge PR when tree becomes green via auto submit App f: cupertino flutter/packages/flutter/cupertino repository f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. will affect goldens Changes to golden files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants