CupertinoSystemText lookup issue

[yaroslav-kahaniak]

Steps to reproduce

1. Set TextStyle fontFamily to 'CupertinoSystemText' and check how the Text looks
2. Pass non-empty fontFamilyFallback into TextStyle with a single valid font family name and do a hot reload

Important note: this issue doesn't reproduce for 'CupertinoSystemDisplay'

Expected results

Text style shouldn't change after doing step 2, since the lookup of the CupertinoSystemText should be successful, according to TextStyle documentation:

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

Actual results

Text style changes, so framework failed to find 'CupertinoSystemText' and picked font family from the fontFamilyFallback instead

Code sample

Code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'iOS Font Text',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'You have pushed the button this many times:',
          style: TextStyle(
            fontFamilyFallback: ['Graphik'],
            fontFamily: 'CupertinoSystemText',
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots or Video

With fontFamilyFallback

Without fontFamilyFallback

Logs

Logs

Performing hot restart...
[   +3 ms] Scanned through 629 files in 3ms
Syncing files to device iPhone Yaroslav...
[   +1 ms] <- reset
[        ] Compiling dart to kernel with 1 updated files
[        ] Processing bundle.
[        ] <- recompile package:ios_fonts_test/main.dart 69d8796d-281f-4bcd-acdf-c71ab0a8be88
[        ] package:ios_fonts_test/main.dart
[        ] <- 69d8796d-281f-4bcd-acdf-c71ab0a8be88
[        ] Bundle processing done.
[  +20 ms] Updating files.
[ +381 ms] DevFS: Sync finished
[        ] Synced 35.0MB.
[        ] <- accept
[ +170 ms] Hot restart performed in 578ms.
[        ] Restarted application in 580ms.

Flutter Doctor output

Doctor output

[!] Flutter (Channel [user-branch], 3.19.6, on macOS 13.2 22D49 darwin-arm64, locale en-UA)
    ! Flutter version 3.19.6 on channel [user-branch] at ***path hidden***
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
    ! Warning: `dart` on your path resolves to /usr/local/Cellar/dart/2.15.1/libexec/bin/dart, which is not inside your current Flutter SDK checkout at ***path hidden*** Consider adding
      ***path hidden*** to the front of your path.
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.3.2)
[✓] Connected device (3 available)
[✓] Network resources

Device info

Real device (not simulator)

iOS 16.2

[yaroslav-kahaniak]

Hey @MitchellGoodwin ,
Sorry for mentioning you without awaiting validation that the issue reproduces from any member of the Flutter team, but I think this issue is critical and I noticed that you worked on these fonts-related changes, so maybe you could help?
flutter/engine#46857
#137275

[danagbemava-nc]

Hi @yaroslav-kahaniak, just curious, what version of flutter were you using before you upgraded to 3.19.6? Was this working as expected for you on that version?
Is this also only on physical devices or are simulators experiencing this issue as well?

[yaroslav-kahaniak]

@danagbemava-nc
Before the upgrade, the app was using Flutter version 3.3.10. I didn't upgrade the app from v3.3.10 to v3.19.6 in one fell swoop but instead did it piecemeal (3.3.10 -> 3.7.0 -> 3.10.0 -> 3.13.0 -> 3.16.0 -> 3.19.6). The fonts changed after upgrade from v3.7.0 to v3.10.0. Doing further updates to v3.13.0, v3.16.0, v3.19.0 didn't have any impact, so they stayed the same as in v3.10.0.

The app version that was running on Flutter v3.3.10 was using these font family names: SF Pro Display and SF Pro Text instead of CupertinoSystemText and CupertinoSystemDisplay. Disregarding what I am setting TextStyle.fontFamily to (CupertinoSystemText/SF Pro Text) when using Flutter v3.10.0 and higher, the font doesn't look the same way it looked before the upgrade.

I always use real device, but have just checked and can confirm that issue reproduces on simulator on Flutter upgrade from v3.7.0 to v3.10.0

[danagbemava-nc]

Hi @yaroslav-kahaniak, on my iPhone XS running iOS 17.4.1, this is what I see whether or not I set a fallback font family.
I'm not particularly familiar with what it looked like earlier, can you share a screenshot of that? Also, what version of iOS are you running?

[yaroslav-kahaniak]

@danagbemava-nc
What font family are you using as a fallback option? Is it font available out of out-of-the-box, or a one that was manually added (FYI: Graphik is not available out-of-the box)? If you are using a manually added font, make sure you added its file into the app assets and declared it in pubspec.yaml.
iOS 16.2. You can find it in the first comment of this discussion.

[danagbemava-nc]

My bad, I forgot to include the font. I tested with roboto and I do see the font change when the fallback font is present.

Screen.Recording.2024-05-06.at.06.40.34.mov

sample used

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'iOS Font Text',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: Center(
        child: Text(
          'You have pushed the button this many times:',
          style: TextStyle(
            fontFamilyFallback: [GoogleFonts.roboto().fontFamily!],
            fontFamily: 'CupertinoSystemDisplay',
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.19.6 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (3 weeks ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (4 available)
    • Nexus (mobile)       • 00008020-001875E83A38002E • ios            • iOS 17.4.1 21E236
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios            • iOS 17.4.1 21E236
    • macOS (desktop)      • macos                     • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 124.0.6367.119
    ! Error: (null) needs to connect to determine its availability. Check the connection between the device and its companion iPhone, and the connection between the iPhone and Xcode. Both devices may also need to be restarted and unlocked. (code 1)

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.22.0-23.0.pre.44, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.22.0-23.0.pre.44 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f6c8cc3fa0 (66 minutes ago), 2024-05-06 01:57:33 -0400
    • Engine revision c73fd390d1
    • Dart version 3.5.0 (build 3.5.0-131.0.dev)
    • DevTools version 2.35.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (4 available)
    • Nexus (mobile)                  • 00008020-001875E83A38002E • ios            • iOS 17.4.1 21E236
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 124.0.6367.119
    ! Error: (null) needs to connect to determine its availability. Check the connection between the device and its companion iPhone, and the connection between the iPhone and Xcode. Both devices may also need to be restarted and unlocked. (code 1)
    ! Error: Browsing on the local area network for Dean’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[jmagman]

also cc @jason-simmons, any idea why a hot reload would have any impact on font loading?

[jason-simmons]

As of flutter/engine@0bbb4d6 CupertinoSystemText is handled like any other nonexistent font family.

If the text subsystem can not find a font with that family name, then the font fallback mechanism will select the default system font. But if the text style provides a fontFamilyFallback list, then font fallback will try to use those families instead.

If CupertinoSystemText is intended to always map to a system font, then the engine should treat it as a special case similar to CupertinoSystemDisplay.

[jmagman]

From flutter/engine#48937

The registering of "CupertinoSystemText" was removed, as the fallback will correctly show the right fonts, and this logic does not work for the smaller font due to Apple APIs removing the font weight.

cc @MitchellGoodwin

[MitchellGoodwin]

So the fallback we originally had wasn't fully working. I wonder if registering a font with an unspecified weight for small text would work.