While designing and developing a flutter mobile application, users can set custom font families depending on the client’s requirement. In this article, we will see what the default font family of a flutter app is?
What is the default font family of a Flutter app? The default font of MaterialApp is described in /flutter/packages/flutter/lib/src/material/typography.dart
on iOS, the default TextTheme is
static const TextTheme blackCupertino = TextTheme(
overline : TextStyle(debugLabel: 'blackCupertino overline', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
caption : TextStyle(debugLabel: 'blackCupertino caption', fontFamily: '.SF UI Text', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
button : TextStyle(debugLabel: 'blackCupertino button', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
bodyText1 : TextStyle(debugLabel: 'blackCupertino bodyText1', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
bodyText2 : TextStyle(debugLabel: 'blackCupertino bodyText2', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline1 : TextStyle(debugLabel: 'blackCupertino headline1', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline2 : TextStyle(debugLabel: 'blackCupertino headline2', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline3 : TextStyle(debugLabel: 'blackCupertino headline3', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline4 : TextStyle(debugLabel: 'blackCupertino headline4', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline5 : TextStyle(debugLabel: 'blackCupertino headline5', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline6 : TextStyle(debugLabel: 'blackCupertino headline6', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
subtitle1 : TextStyle(debugLabel: 'blackCupertino subtitle1', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
subtitle2 : TextStyle(debugLabel: 'blackCupertino subtitle2', fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
);
on Android, the default TextTheme is
static const TextTheme blackMountainView = TextTheme(
overline : TextStyle(debugLabel: 'blackMountainView overline', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
caption : TextStyle(debugLabel: 'blackMountainView caption', fontFamily: 'Roboto', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
button : TextStyle(debugLabel: 'blackMountainView button', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
bodyText1 : TextStyle(debugLabel: 'blackMountainView bodyText1', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
bodyText2 : TextStyle(debugLabel: 'blackMountainView bodyText2', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline1 : TextStyle(debugLabel: 'blackMountainView headline1', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline2 : TextStyle(debugLabel: 'blackMountainView headline2', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline3 : TextStyle(debugLabel: 'blackMountainView headline3', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline4 : TextStyle(debugLabel: 'blackMountainView headline4', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline5 : TextStyle(debugLabel: 'blackMountainView headline5', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
headline6 : TextStyle(debugLabel: 'blackMountainView headline6', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
subtitle1 : TextStyle(debugLabel: 'blackMountainView subtitle1', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
subtitle2 : TextStyle(debugLabel: 'blackMountainView subtitle2', fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
);
and you can retrieve the font family by the following code
Theme.of(context).textTheme.caption The default fonts depend on the operating system:
Android uses the Roboto font. iOS uses the San Francisco font (specifically, SF Pro Display). That’s it for today.
Output:
default font family
Conclusion: Thanks for being with us on a Flutter Journey !!!
In this article, we have learned about how to set global font family using TextTheme in Flutter?
FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.