-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Refactor to use Apple system fonts #137275
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor to use Apple system fonts #137275
Conversation
|
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 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 |
|
Golden tests failed as expected for titles and the pickers, as those where most impacted. |
|
CC @goderbauer |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe use moreOrLessEquals instead.
e13d744 to
6cbbb78
Compare
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
goderbauer
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same here.
b237efc to
5bd11a4
Compare
|
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. |
Thanks for that. Looks MUCH better 👍 |
|
@MitchellGoodwin Question for you, it looks like not all the font weights are working, for example the type EDIT: using variable font weights also has no effect outside of 400 and 700 |
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
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? |
|
Sure, my code is pretty simple (shortened to take out the colors for brevity sake): Testing from FontWeight 100-500 (blue text)FontWeight 600-900 (blue text)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 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. |
|
Ok, I'm seeing the same now. Looking into it, that should be working. |
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.


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.
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
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.