Refactor to use Apple system fonts (#137275)

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 |
| ------------- | ------------- |
| <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.

Author: MitchellGoodwin

dev/integration_tests/flutter_gallery/lib/demo/cupertino/cupertino_text_field_demo.dart

@@ -153,7 +153,7 @@ class _CupertinoTextFieldDemoState extends State<CupertinoTextFieldDemo> {
   Widget build(BuildContext context) {
     return DefaultTextStyle(
       style: const TextStyle(
-        fontFamily: '.SF UI Text',
+        fontFamily: 'CupertinoSystemText',
         inherit: false,
         fontSize: 17.0,
         color: CupertinoColors.black,

packages/flutter/lib/src/cupertino/context_menu_action.dart

@@ -57,7 +57,7 @@ class _CupertinoContextMenuActionState extends State<CupertinoContextMenuAction>
   );
   static const double _kButtonHeight = 43;
   static const TextStyle _kActionSheetActionStyle = TextStyle(
-    fontFamily: '.SF UI Text',
+    fontFamily: 'CupertinoSystemText',
     inherit: false,
     fontSize: 16.0,
     fontWeight: FontWeight.w400,

packages/flutter/lib/src/cupertino/dialog.dart

@@ -23,7 +23,7 @@ import 'theme.dart';
 // Apple Design Resources(https://developer.apple.com/design/resources/).
 // However the values are not exactly the same as native, so eyeballing is needed.
 const TextStyle _kCupertinoDialogTitleStyle = TextStyle(
-  fontFamily: '.SF UI Display',
+  fontFamily: 'CupertinoSystemDisplay',
   inherit: false,
   fontSize: 17.0,
   fontWeight: FontWeight.w600,
@@ -33,7 +33,7 @@ const TextStyle _kCupertinoDialogTitleStyle = TextStyle(
 );
 
 const TextStyle _kCupertinoDialogContentStyle = TextStyle(
-  fontFamily: '.SF UI Text',
+  fontFamily: 'CupertinoSystemText',
   inherit: false,
   fontSize: 13.0,
   fontWeight: FontWeight.w400,
@@ -43,7 +43,7 @@ const TextStyle _kCupertinoDialogContentStyle = TextStyle(
 );
 
 const TextStyle _kCupertinoDialogActionStyle = TextStyle(
-  fontFamily: '.SF UI Text',
+  fontFamily: 'CupertinoSystemText',
   inherit: false,
   fontSize: 16.8,
   fontWeight: FontWeight.w400,
@@ -52,15 +52,15 @@ const TextStyle _kCupertinoDialogActionStyle = TextStyle(
 
 // CupertinoActionSheet-specific text styles.
 const TextStyle _kActionSheetActionStyle = TextStyle(
-  fontFamily: '.SF UI Text',
+  fontFamily: 'CupertinoSystemText',
   inherit: false,
   fontSize: 20.0,
   fontWeight: FontWeight.w400,
   textBaseline: TextBaseline.alphabetic,
 );
 
 const TextStyle _kActionSheetContentStyle = TextStyle(
-  fontFamily: '.SF UI Text',
+  fontFamily: 'CupertinoSystemText',
   inherit: false,
   fontSize: 13.0,
   fontWeight: FontWeight.w400,

packages/flutter/lib/src/cupertino/text_theme.dart

@@ -14,7 +14,7 @@ import 'colors.dart';
 // Values derived from https://developer.apple.com/design/resources/.
 const TextStyle _kDefaultTextStyle = TextStyle(
   inherit: false,
-  fontFamily: '.SF Pro Text',
+  fontFamily: 'CupertinoSystemText',
   fontSize: 17.0,
   letterSpacing: -0.41,
   color: CupertinoColors.label,
@@ -28,7 +28,7 @@ const TextStyle _kDefaultTextStyle = TextStyle(
 // Values derived from https://developer.apple.com/design/resources/.
 const TextStyle _kDefaultActionTextStyle = TextStyle(
   inherit: false,
-  fontFamily: '.SF Pro Text',
+  fontFamily: 'CupertinoSystemText',
   fontSize: 17.0,
   letterSpacing: -0.41,
   color: CupertinoColors.activeBlue,
@@ -42,7 +42,7 @@ const TextStyle _kDefaultActionTextStyle = TextStyle(
 // Values derived from https://developer.apple.com/design/resources/.
 const TextStyle _kDefaultTabLabelTextStyle = TextStyle(
   inherit: false,
-  fontFamily: '.SF Pro Text',
+  fontFamily: 'CupertinoSystemText',
   fontSize: 10.0,
   fontWeight: FontWeight.w500,
   letterSpacing: -0.24,
@@ -51,7 +51,7 @@ const TextStyle _kDefaultTabLabelTextStyle = TextStyle(
 
 const TextStyle _kDefaultMiddleTitleTextStyle = TextStyle(
   inherit: false,
-  fontFamily: '.SF Pro Text',
+  fontFamily: 'CupertinoSystemText',
   fontSize: 17.0,
   fontWeight: FontWeight.w600,
   letterSpacing: -0.41,
@@ -60,10 +60,10 @@ const TextStyle _kDefaultMiddleTitleTextStyle = TextStyle(
 
 const TextStyle _kDefaultLargeTitleTextStyle = TextStyle(
   inherit: false,
-  fontFamily: '.SF Pro Display',
+  fontFamily: 'CupertinoSystemDisplay',
   fontSize: 34.0,
   fontWeight: FontWeight.w700,
-  letterSpacing: 0.41,
+  letterSpacing: 0.38,
   color: CupertinoColors.label,
 );
 
@@ -80,7 +80,7 @@ const TextStyle _kDefaultLargeTitleTextStyle = TextStyle(
 // * https://github.com/flutter/flutter/pull/65501#discussion_r486557093
 const TextStyle _kDefaultPickerTextStyle = TextStyle(
   inherit: false,
-  fontFamily: '.SF Pro Display',
+  fontFamily: 'CupertinoSystemDisplay',
   fontSize: 21.0,
   fontWeight: FontWeight.w400,
   letterSpacing: -0.6,
@@ -95,8 +95,9 @@ const TextStyle _kDefaultPickerTextStyle = TextStyle(
 // Value extracted from off-center labels. Centered labels have a font size of 25pt.
 const TextStyle _kDefaultDateTimePickerTextStyle = TextStyle(
   inherit: false,
-  fontFamily: '.SF Pro Display',
+  fontFamily: 'CupertinoSystemDisplay',
   fontSize: 21,
+  letterSpacing: 0.4,
   fontWeight: FontWeight.normal,
   color: CupertinoColors.label,
 );

packages/flutter/lib/src/material/typography.dart

@@ -507,21 +507,21 @@ class Typography with Diagnosticable {
   ///
   /// This theme uses the iOS version of the font names.
   static const TextTheme blackCupertino = TextTheme(
-    displayLarge: TextStyle(debugLabel: 'blackCupertino displayLarge', fontFamily: '.SF UI Display', color: Colors.black54, decoration: TextDecoration.none),
-    displayMedium: TextStyle(debugLabel: 'blackCupertino displayMedium', fontFamily: '.SF UI Display', color: Colors.black54, decoration: TextDecoration.none),
-    displaySmall: TextStyle(debugLabel: 'blackCupertino displaySmall', fontFamily: '.SF UI Display', color: Colors.black54, decoration: TextDecoration.none),
-    headlineLarge: TextStyle(debugLabel: 'blackCupertino headlineLarge', fontFamily: '.SF UI Display', color: Colors.black54, decoration: TextDecoration.none),
-    headlineMedium: TextStyle(debugLabel: 'blackCupertino headlineMedium', fontFamily: '.SF UI Display', color: Colors.black54, decoration: TextDecoration.none),
-    headlineSmall: TextStyle(debugLabel: 'blackCupertino headlineSmall', fontFamily: '.SF UI Display', color: Colors.black87, decoration: TextDecoration.none),
-    titleLarge: TextStyle(debugLabel: 'blackCupertino titleLarge', fontFamily: '.SF UI Display', color: Colors.black87, decoration: TextDecoration.none),
-    titleMedium: TextStyle(debugLabel: 'blackCupertino titleMedium', fontFamily: '.SF UI Text', color: Colors.black87, decoration: TextDecoration.none),
-    titleSmall: TextStyle(debugLabel: 'blackCupertino titleSmall', fontFamily: '.SF UI Text', color: Colors.black, decoration: TextDecoration.none),
-    bodyLarge: TextStyle(debugLabel: 'blackCupertino bodyLarge', fontFamily: '.SF UI Text', color: Colors.black87, decoration: TextDecoration.none),
-    bodyMedium: TextStyle(debugLabel: 'blackCupertino bodyMedium', fontFamily: '.SF UI Text', color: Colors.black87, decoration: TextDecoration.none),
-    bodySmall: TextStyle(debugLabel: 'blackCupertino bodySmall', fontFamily: '.SF UI Text', color: Colors.black54, decoration: TextDecoration.none),
-    labelLarge: TextStyle(debugLabel: 'blackCupertino labelLarge', fontFamily: '.SF UI Text', color: Colors.black87, decoration: TextDecoration.none),
-    labelMedium: TextStyle(debugLabel: 'blackCupertino labelMedium', fontFamily: '.SF UI Text', color: Colors.black, decoration: TextDecoration.none),
-    labelSmall: TextStyle(debugLabel: 'blackCupertino labelSmall', fontFamily: '.SF UI Text', color: Colors.black, decoration: TextDecoration.none),
+    displayLarge: TextStyle(debugLabel: 'blackCupertino displayLarge', fontFamily: 'CupertinoSystemDisplay', color: Colors.black54, decoration: TextDecoration.none),
+    displayMedium: TextStyle(debugLabel: 'blackCupertino displayMedium', fontFamily: 'CupertinoSystemDisplay', color: Colors.black54, decoration: TextDecoration.none),
+    displaySmall: TextStyle(debugLabel: 'blackCupertino displaySmall', fontFamily: 'CupertinoSystemDisplay', color: Colors.black54, decoration: TextDecoration.none),
+    headlineLarge: TextStyle(debugLabel: 'blackCupertino headlineLarge', fontFamily: 'CupertinoSystemDisplay', color: Colors.black54, decoration: TextDecoration.none),
+    headlineMedium: TextStyle(debugLabel: 'blackCupertino headlineMedium', fontFamily: 'CupertinoSystemDisplay', color: Colors.black54, decoration: TextDecoration.none),
+    headlineSmall: TextStyle(debugLabel: 'blackCupertino headlineSmall', fontFamily: 'CupertinoSystemDisplay', color: Colors.black87, decoration: TextDecoration.none),
+    titleLarge: TextStyle(debugLabel: 'blackCupertino titleLarge', fontFamily: 'CupertinoSystemDisplay', color: Colors.black87, decoration: TextDecoration.none),
+    titleMedium: TextStyle(debugLabel: 'blackCupertino titleMedium', fontFamily: 'CupertinoSystemText', color: Colors.black87, decoration: TextDecoration.none),
+    titleSmall: TextStyle(debugLabel: 'blackCupertino titleSmall', fontFamily: 'CupertinoSystemText', color: Colors.black, decoration: TextDecoration.none),
+    bodyLarge: TextStyle(debugLabel: 'blackCupertino bodyLarge', fontFamily: 'CupertinoSystemText', color: Colors.black87, decoration: TextDecoration.none),
+    bodyMedium: TextStyle(debugLabel: 'blackCupertino bodyMedium', fontFamily: 'CupertinoSystemText', color: Colors.black87, decoration: TextDecoration.none),
+    bodySmall: TextStyle(debugLabel: 'blackCupertino bodySmall', fontFamily: 'CupertinoSystemText', color: Colors.black54, decoration: TextDecoration.none),
+    labelLarge: TextStyle(debugLabel: 'blackCupertino labelLarge', fontFamily: 'CupertinoSystemText', color: Colors.black87, decoration: TextDecoration.none),
+    labelMedium: TextStyle(debugLabel: 'blackCupertino labelMedium', fontFamily: 'CupertinoSystemText', color: Colors.black, decoration: TextDecoration.none),
+    labelSmall: TextStyle(debugLabel: 'blackCupertino labelSmall', fontFamily: 'CupertinoSystemText', color: Colors.black, decoration: TextDecoration.none),
   );
 
   /// A Material Design text theme with light glyphs based on San Francisco.
@@ -530,21 +530,21 @@ class Typography with Diagnosticable {
   ///
   /// This theme uses the iOS version of the font names.
   static const TextTheme whiteCupertino = TextTheme(
-    displayLarge: TextStyle(debugLabel: 'whiteCupertino displayLarge', fontFamily: '.SF UI Display', color: Colors.white70, decoration: TextDecoration.none),
-    displayMedium: TextStyle(debugLabel: 'whiteCupertino displayMedium', fontFamily: '.SF UI Display', color: Colors.white70, decoration: TextDecoration.none),
-    displaySmall: TextStyle(debugLabel: 'whiteCupertino displaySmall', fontFamily: '.SF UI Display', color: Colors.white70, decoration: TextDecoration.none),
-    headlineLarge: TextStyle(debugLabel: 'whiteCupertino headlineLarge', fontFamily: '.SF UI Display', color: Colors.white70, decoration: TextDecoration.none),
-    headlineMedium: TextStyle(debugLabel: 'whiteCupertino headlineMedium', fontFamily: '.SF UI Display', color: Colors.white70, decoration: TextDecoration.none),
-    headlineSmall: TextStyle(debugLabel: 'whiteCupertino headlineSmall', fontFamily: '.SF UI Display', color: Colors.white, decoration: TextDecoration.none),
-    titleLarge: TextStyle(debugLabel: 'whiteCupertino titleLarge', fontFamily: '.SF UI Display', color: Colors.white, decoration: TextDecoration.none),
-    titleMedium: TextStyle(debugLabel: 'whiteCupertino titleMedium', fontFamily: '.SF UI Text', color: Colors.white, decoration: TextDecoration.none),
-    titleSmall: TextStyle(debugLabel: 'whiteCupertino titleSmall', fontFamily: '.SF UI Text', color: Colors.white, decoration: TextDecoration.none),
-    bodyLarge: TextStyle(debugLabel: 'whiteCupertino bodyLarge', fontFamily: '.SF UI Text', color: Colors.white, decoration: TextDecoration.none),
-    bodyMedium: TextStyle(debugLabel: 'whiteCupertino bodyMedium', fontFamily: '.SF UI Text', color: Colors.white, decoration: TextDecoration.none),
-    bodySmall: TextStyle(debugLabel: 'whiteCupertino bodySmall', fontFamily: '.SF UI Text', color: Colors.white70, decoration: TextDecoration.none),
-    labelLarge: TextStyle(debugLabel: 'whiteCupertino labelLarge', fontFamily: '.SF UI Text', color: Colors.white, decoration: TextDecoration.none),
-    labelMedium: TextStyle(debugLabel: 'whiteCupertino labelMedium', fontFamily: '.SF UI Text', color: Colors.white, decoration: TextDecoration.none),
-    labelSmall: TextStyle(debugLabel: 'whiteCupertino labelSmall', fontFamily: '.SF UI Text', color: Colors.white, decoration: TextDecoration.none),
+    displayLarge: TextStyle(debugLabel: 'whiteCupertino displayLarge', fontFamily: 'CupertinoSystemDisplay', color: Colors.white70, decoration: TextDecoration.none),
+    displayMedium: TextStyle(debugLabel: 'whiteCupertino displayMedium', fontFamily: 'CupertinoSystemDisplay', color: Colors.white70, decoration: TextDecoration.none),
+    displaySmall: TextStyle(debugLabel: 'whiteCupertino displaySmall', fontFamily: 'CupertinoSystemDisplay', color: Colors.white70, decoration: TextDecoration.none),
+    headlineLarge: TextStyle(debugLabel: 'whiteCupertino headlineLarge', fontFamily: 'CupertinoSystemDisplay', color: Colors.white70, decoration: TextDecoration.none),
+    headlineMedium: TextStyle(debugLabel: 'whiteCupertino headlineMedium', fontFamily: 'CupertinoSystemDisplay', color: Colors.white70, decoration: TextDecoration.none),
+    headlineSmall: TextStyle(debugLabel: 'whiteCupertino headlineSmall', fontFamily: 'CupertinoSystemDisplay', color: Colors.white, decoration: TextDecoration.none),
+    titleLarge: TextStyle(debugLabel: 'whiteCupertino titleLarge', fontFamily: 'CupertinoSystemDisplay', color: Colors.white, decoration: TextDecoration.none),
+    titleMedium: TextStyle(debugLabel: 'whiteCupertino titleMedium', fontFamily: 'CupertinoSystemText', color: Colors.white, decoration: TextDecoration.none),
+    titleSmall: TextStyle(debugLabel: 'whiteCupertino titleSmall', fontFamily: 'CupertinoSystemText', color: Colors.white, decoration: TextDecoration.none),
+    bodyLarge: TextStyle(debugLabel: 'whiteCupertino bodyLarge', fontFamily: 'CupertinoSystemText', color: Colors.white, decoration: TextDecoration.none),
+    bodyMedium: TextStyle(debugLabel: 'whiteCupertino bodyMedium', fontFamily: 'CupertinoSystemText', color: Colors.white, decoration: TextDecoration.none),
+    bodySmall: TextStyle(debugLabel: 'whiteCupertino bodySmall', fontFamily: 'CupertinoSystemText', color: Colors.white70, decoration: TextDecoration.none),
+    labelLarge: TextStyle(debugLabel: 'whiteCupertino labelLarge', fontFamily: 'CupertinoSystemText', color: Colors.white, decoration: TextDecoration.none),
+    labelMedium: TextStyle(debugLabel: 'whiteCupertino labelMedium', fontFamily: 'CupertinoSystemText', color: Colors.white, decoration: TextDecoration.none),
+    labelSmall: TextStyle(debugLabel: 'whiteCupertino labelSmall', fontFamily: 'CupertinoSystemText', color: Colors.white, decoration: TextDecoration.none),
   );
 
   /// A Material Design text theme with dark glyphs based on San Francisco.

packages/flutter/lib/src/painting/text_style.dart

@@ -433,7 +433,7 @@ const String _kColorBackgroundWarning = 'Cannot provide both a backgroundColor a
 /// By default, fonts differ depending on the platform.
 ///
 ///  * The default font-family for `Android`,`Fuchsia` and `Linux` is `Roboto`.
-///  * The default font-family for `iOS` is `.SF UI Display`/`.SF UI Text`.
+///  * The default font-family for `iOS` is `SF Pro Display`/`SF Pro Text`.
 ///  * The default font-family for `MacOS` is `.AppleSystemUIFont`.
 ///  * The default font-family for `Windows` is `Segoe UI`.
 //
@@ -470,6 +470,14 @@ class TextStyle with Diagnosticable {
   /// The `package` argument must be non-null if the font family is defined in a
   /// package. It is combined with the `fontFamily` argument to set the
   /// [fontFamily] property.
+  ///
+  /// On Apple devices the strings 'CupertinoSystemText' and
+  /// 'CupertinoSystemDisplay' are used in [fontFamily] as proxies for the
+  /// Apple system fonts. They currently redirect to the equivilant of SF Pro
+  /// Text and SF Pro Display respectively. 'CupertinoSystemText' is designed
+  /// for fonts below 20 point size, and 'CupertinoSystemDisplay' is recommended
+  /// for sizes 20 and above. When used on non-Apple platforms, these strings
+  /// will return the regular fallback font family instead.
   const TextStyle({
     this.inherit = true,
     this.color,
@@ -561,6 +569,14 @@ class TextStyle with Diagnosticable {
   /// first value in [fontFamilyFallback] acts as the preferred/first font
   /// family. When neither is provided, then the default platform font will
   /// be used.
+  ///
+  /// When running on Apple devices, the strings 'CupertinoSystemText' and
+  /// 'CupertinoSystemDisplay' are used as proxies for the Apple system fonts.
+  /// They currently redirect to the equivilant of SF Pro Text and SF Pro Display
+  /// respectively. 'CupertinoSystemText' is designed for fonts below 20 point
+  /// size, and 'CupertinoSystemDisplay' is recommended for sizes 20 and above.
+  /// When used on non-Apple platforms, these strings will return the regular
+  /// fallback font family instead.
   final String? fontFamily;
 
   /// The ordered list of font families to fall back on when a glyph cannot be

packages/flutter/test/cupertino/date_picker_test.dart

@@ -633,7 +633,7 @@ void main() {
       // Distance between the first and the last column should be the same.
       expect(
         tester.getCenter(find.text('10')).dx - tester.getCenter(find.text('AM')).dx,
-        distance,
+        moreOrLessEquals(distance),
       );
     });
 

packages/flutter/test/cupertino/nav_bar_test.dart

@@ -1581,7 +1581,7 @@ class _ExpectStyles extends StatelessWidget {
   Widget build(BuildContext context) {
     final TextStyle style = DefaultTextStyle.of(context).style;
     expect(style.color, isSameColorAs(color));
-    expect(style.fontFamily, '.SF Pro Text');
+    expect(style.fontFamily, 'CupertinoSystemText');
     expect(style.fontSize, 17.0);
     expect(style.letterSpacing, -0.41);
     count += index;