We all know that Flutter can use fontFamily to introduce third party fonts. For example, we usually convert SVG ICONS to iconFont. TTF to incorporate vector ICONS. What font does Flutter use by default?

This question came up because one day design sent me the following picture and asked me “Why is PingFang SC font used instead of.sf UI Display for Apple’s English app?” As you can see in the image below, there are some differences in the appearance of the G’s, such as the sharp turning line for the square G.

At this point, I can’t help but wonder how the engine defaults to the font selection in Flutter.

As can be seen in the official source code typography. Dart,

  • Flutter is used by default on AndroidRobotoFont;
  • It’s used on iOS.SF UI Displayor.SF UI TextFont.

The default font on Android is Roboto and on iOS it is .SF UI Display or .SF UI Text (SF meaning San Francisco). If you want to use a different font, then you will need to add it to your app.

SF UI Display font is the correct font for iOS. As shown in the following source code, Typography uses the Cupertino related TextTheme when platform is iOS. The white and black properties in Typography will eventually be applied to the defaultTextTheme, defaultPrimaryTextTheme, and defaultAccentTextTheme of ThemeData. So it should be PingFang SC with.sf font.

factory Typography({ TargetPlatform platform = TargetPlatform.android, TextTheme black, TextTheme white, TextTheme englishLike, TextTheme dense, TextTheme tall, }) { assert(platform ! = null || (black ! = null && white ! = null)); switch (platform) {caseTargetPlatform.iOS: black ?? = blackCupertino; white ?? = whiteCupertino;break;
      case TargetPlatform.android:
      caseTargetPlatform.fuchsia: black ?? = blackMountainView; white ?? = whiteMountainView; } englishLike ?? = englishLike2014; dense ?? = dense2014; tall ?? = tall2014;return Typography._(black, white, englishLike, dense, tall);
  }
Copy the code

In order to understand the difference between fonts on different systems, after consulting the data, we know:

  • Default on iOS:

    • PingFang SC

    • Fonts:.SF UI Text,.SF UI Display

  • Default on Android:

    • English font: Source Han Sans/Noto

    • English font: Roboto

That is, in addition to the fonts related to.sf on iOS, there is also the PingFang font. At this time, I suddenly remembered that in the previous Description of Flutter Complete Development practical Explanation (x17, Practical Tips and Filling The Gap2), there would be some abnormal display in.sf due to internationalization of multiple languages. So PingFang SC is forcibly specified using fontFamilyFallback.

  getCopyTextStyle(TextStyle textStyle) {
    return textStyle.copyWith(fontFamilyFallback: ["PingFang SC"."Heiti SC"]);
  }
Copy the code

Finally solved, because when fontFamily is not set, the first value in fontFamilyFallback will be used as the preferred font, whereas in fontFamilyFallback it matches sequentially, When neither fontFamily nor fontFamilyFallback is provided, the default platform font is used.

Testing under version 1.12.13 found that the.sf problem has been fixed, so you just need to remove the fontFamilyFallback-related code.

So what are the benefits of using.sf fonts on iOS? According to the Internet:

SF Text is a semi-enclosed space for the spacing and letters, such as “A “! The top half will be larger because it is more readable and works well with smaller fonts; SF Display works for larger fonts. The specific watershed is 20pt, that is, Text is used when the font is smaller than 20pt, and Display is used when the font is greater than or equal to 20pt.

Even better, since SF is a dynamic font, Text and Display are dynamically matched by the system, which means you don’t have to manually adjust the font, and the system automatically matches the two Display modes according to the font size.

Can that be used on Android as well? What about SF fonts? According to the official account:

  • When using the Material Package, ·Roboto font· is used on Android and iOS isSan Francisco font(SF) ；
  • When using the Cupertino Package, the default theme is always usedSan Francisco font(SF) ；

But becauseSan Francisco font licenseThe font can only be used on iOS, macOS or tvOS, so if you’re using the Cupertino theme, use fallback font when running on Android.

So do you think it will work on Android?

Finally, it is mentioned in the official Architecture that the text rendering logic in Flutter is hierarchical, in which:

  • Libtxt library derived from Minikin for font selection, line separation, etc.
  • HartBuzz is used for glyphs selection and shaping;
  • Skia as a render/GPU back end;
  • Use FreeType rendering on Android/Fuchsia and CoreGraphics to render fonts on iOS.

Have you added to your list of oddities by the end of this article?