Repository navigation
Allow Flutter to match iOS native fonts #63507
Description
Activity
SF Pro has always been the Cupertino package's default font. Closing. Please re-open if I misinterpreted.
Reacted by Iurii Dorofeev, Doug Orchard, theo and MJ StudioSame problem:(
Reacted by Iurii DorofeevActually our default fallback font is retrieved via [UIFont systemFontOfSize]. Perhaps it creates a SF UI font? Should check in the engine.
@otopba how are you determining that Flutter's using SF UI? We have a overlay comparison tool with iOS in https://github.com/flutter/platform_tests/tree/master/ios_widget_catalog_compare.
Without additional information, we are unfortunately not sure how to resolve this issue.
We are therefore reluctantly going to close this bug for now.
Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.Could everyone who still has this problem please file a new issue with the exact description of what happens, logs, and the output of
flutter doctor -v.
All system setups can be slightly different, so it's always better to open new issues and reference related issues.Reacted by theo and Liloupar10 remaining items
I'm not sure if others have observed this, but I think the current fonts (".SF Pro Text" and ".SF Pro Display") don't appear to even be drawn on iOS. ".AppleSystemUIFont" does though. When referencing system fonts, I think the font family has to be referenced rather than the font name. I'm brand new to Swift though, so I apologize if I'm wrong.
Screen.Recording.2023-08-30.at.1.05.38.AM.mov
I found .AppleSystemUIFont via the following:
let systemFontName = UIFont.systemFont(ofSize: 17) print(systemFontName.fontName, " << Font name") print(systemFontName.familyName, " << Font family")
Output:
.SFUI-Regular << Font name .AppleSystemUIFont << Font family
Reacted by Greg Price and oshtmanStill in the progress of looking into this, but the issue is that Apple removed the ability to look up system fonts by name, so dot prefixed names like '.SF Pro Text' and '.SF Pro Display' fail. We fallback to getting what family name we can, which is ".AppleSystemUIFont", which Apple seems to use for all of their system fonts. Weirdly, that does work, but it only returns what seems to be the equivalent of '.SF Pro Text', never ',SF Pro Display'. I believe in the Apple system fonts there currently is no "SF Pro" or "SF UI" font there's just the "Text" and "Display", so functionally we are getting and using the SF Pro Text font, but it looks wrong on larger texts, which should be using SF Pro Display.
Work in progress design doc: flutter.dev/go/flutter-ios-system-font
Reacted by Thomas Mol, abdalmonem and Sivaram Subramanian- changed the title
[-]The default font for iOS should be SF Pro, not SF UI.[/-][+]Allow Flutter to match iOS native fonts[/+]on Sep 11, 2023 - added a commit that references this issue
on Oct 19, 2023 Keeping this open for now. flutter/engine#46857 allows for opting in to correctly using the system fonts in a way that's unlikely to get broken by changes made to Apple APIs. Keeping this open until the followup framework PR that is coming that will use it in the default themes for Flutter.
- added a commit that references this issue
on Oct 23, 2023 This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Nov 2, 2023 - moved this to Engineer reviewed in iOS Platform - Cupertino widget review
on Aug 28, 2024
Use case
The system font in iOS was changed in iOS 11 from SF UI to SF Pro. See here:
https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface)#:~:text=In%20macOS%20High%20Sierra%20and,are%20flat%20in%20SF%20Compact.
Also (first paragraph):
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography
Proposal
I would like to see the more modern font become the Flutter default.