Flutter when is SF Pro Display or SF Pro Text used and how to assign them to a Text widget?

Question

I use the following two Text widgets in my app:

Text('12,23123,123.123 asdASD',
    style: TextStyle(
      fontFamily: '.SF UI Text',
    )),
Text('12,23123,123.123 asdASD',
    style: TextStyle(
      fontFamily: '.SF UI Display',
    ))

However, both are displayed with the same fontFamily.

The iOS typography docs say the following:

For SF, use Text for text that’s smaller than 20 points; use Display for text that’s 20 points or larger.

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/

How can I apply the different front families to my Text widgets?

Check this flutter article on how you can custom fonts https://flutter.dev/docs/cookbook/design/fonts — Chirag Bargoojar, May 20 '21 at 07:59
Does this answer your question? [How to change the default font family of a Flutter app](https://stackoverflow.com/questions/64237031/how-to-change-the-default-font-family-of-a-flutter-app) — Chirag Bargoojar, May 20 '21 at 08:00
SF is the default Flutter font for iOS, there should be no need to add a custom font — Simon, May 20 '21 at 08:53

score 0 · Answer 1 · answered Jan 25 '22 at 16:20

The related GitHub issue to this question is currently under review by the Flutter Engineers and it seems that it is still in progress atm. Another related issue linked to this is this GitHub post, as mentioned by the Flutter team, the issue is yet to be identified.

Flutter when is SF Pro Display or SF Pro Text used and how to assign them to a Text widget?

1 Answers1