What is the default font family of a Flutter app?

Question

How I can retrieve the current font family name for flutter app and what is the default one ?

I have tried

Theme.of(context).textTheme.

and

Theme.of(context).

but there is no attribute for the font family.

Solution 1

The default font of MaterialApp is roboto, a Google font.

https://fonts.google.com/specimen/Roboto

Solution 2

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 whiteCupertino = TextTheme(
    display4   : TextStyle(debugLabel: 'whiteCupertino display4',   fontFamily: '.SF UI Display', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    display3   : TextStyle(debugLabel: 'whiteCupertino display3',   fontFamily: '.SF UI Display', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    display2   : TextStyle(debugLabel: 'whiteCupertino display2',   fontFamily: '.SF UI Display', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    display1   : TextStyle(debugLabel: 'whiteCupertino display1',   fontFamily: '.SF UI Display', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    headline   : TextStyle(debugLabel: 'whiteCupertino headline',   fontFamily: '.SF UI Display', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    title      : TextStyle(debugLabel: 'whiteCupertino title',      fontFamily: '.SF UI Display', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    subhead    : TextStyle(debugLabel: 'whiteCupertino subhead',    fontFamily: '.SF UI Text',    inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    body2      : TextStyle(debugLabel: 'whiteCupertino body2',      fontFamily: '.SF UI Text',    inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    body1      : TextStyle(debugLabel: 'whiteCupertino body1',      fontFamily: '.SF UI Text',    inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    caption    : TextStyle(debugLabel: 'whiteCupertino caption',    fontFamily: '.SF UI Text',    inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    button     : TextStyle(debugLabel: 'whiteCupertino button',     fontFamily: '.SF UI Text',    inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    subtitle   : TextStyle(debugLabel: 'whiteCupertino subtitle',   fontFamily: '.SF UI Text',    inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    overline   : TextStyle(debugLabel: 'whiteCupertino overline',   fontFamily: '.SF UI Text',    inherit: true, color: Colors.white,   decoration: TextDecoration.none),
  );

on Android, the default TextTheme is

 static const TextTheme whiteMountainView = TextTheme(
    display4   : TextStyle(debugLabel: 'whiteMountainView display4',   fontFamily: 'Roboto', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    display3   : TextStyle(debugLabel: 'whiteMountainView display3',   fontFamily: 'Roboto', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    display2   : TextStyle(debugLabel: 'whiteMountainView display2',   fontFamily: 'Roboto', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    display1   : TextStyle(debugLabel: 'whiteMountainView display1',   fontFamily: 'Roboto', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    headline   : TextStyle(debugLabel: 'whiteMountainView headline',   fontFamily: 'Roboto', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    title      : TextStyle(debugLabel: 'whiteMountainView title',      fontFamily: 'Roboto', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    subhead    : TextStyle(debugLabel: 'whiteMountainView subhead',    fontFamily: 'Roboto', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    body2      : TextStyle(debugLabel: 'whiteMountainView body2',      fontFamily: 'Roboto', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    body1      : TextStyle(debugLabel: 'whiteMountainView body1',      fontFamily: 'Roboto', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    caption    : TextStyle(debugLabel: 'whiteMountainView caption',    fontFamily: 'Roboto', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
    button     : TextStyle(debugLabel: 'whiteMountainView button',     fontFamily: 'Roboto', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    subtitle   : TextStyle(debugLabel: 'whiteMountainView subtitle',   fontFamily: 'Roboto', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
    overline   : TextStyle(debugLabel: 'whiteMountainView overline',   fontFamily: 'Roboto', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
  );

and you can retrieve the font family by the following code

DefaultTextStyle.of(context).style.fontFamily

Solution 3

The default fonts depend on the operating system:

• Android uses the Roboto font.

• iOS uses the San Francisco font (specifically, SF Pro Display).

Solution 4

The default font family for a Flutter app project is

Roboto - get it here: https://fonts.google.com/specimen/Roboto#standard-styles

which by default shows on Andriod OS.

---

For iOS devices its

San Francisco font - get it here: https://developer.apple.com/fonts/

---

To use any of them by default(also depends on your theme settings) in your flutter project, you import either or both:

for Andriod - import package:flutter/material.dart.

for iOS - import package:flutter/cupertino.dart.

---

you can also use other fonts(add its folder to the root folder or create assets folder) and include the font definition in the pubspec.yaml

View more solutions

Comments

[Shinichi]

How can I use font AvenirNext on iOS platform ? This font is supported in iOS but do I need to declare in assets ?

[DongXu]

@Shinichi you don't have to declare "AvenirNext" font in assets, just use TextStyle(fontFamily: 'Avenir Next') in your code.

[Maria]

why does DefaultTextStyle.of(context).style.fontFamily return monospace on iPhone 8 simulator...

[scott lee]

Is it possible to use SF UI Display on Android? I tried specifying fontFamily: '.SF UI Display' for my Android phone but, it doesn't seem to work.

[DongXu]

@scottlee SF UI is only installed on iOS, Android can not use it.

[scott lee]

I see. Thank you @DongXu

[Dominic]

What's the idiomatic way to pass context into a theme defined in its own class? Passing context as a constructor param?