CODEWITHSUNDEEP
flutterdartfonts
Flutter IO Dev
Flutter IO Dev

Reputation: 2137

What is the default font family of a Flutter app?

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.

Upvotes: 59

Views: 91927

Answers (5)

Kevin Koo
Kevin Koo

Reputation: 161

To get the current font family:

DefaultTextStyle.of(context).style.fontFamily

The default font family would be based on the device: https://api.flutter.dev/flutter/material/Typography/Typography.material2021.html

Roboto for Android. https://api.flutter.dev/flutter/material/Typography/blackMountainView-constant.html

San Francisco for iOS. https://api.flutter.dev/flutter/material/Typography/blackCupertino-constant.html

Upvotes: 1

TOPe
TOPe

Reputation: 113

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

Upvotes: 3

CopsOnRoad
CopsOnRoad

Reputation: 267454

The default fonts depend on the operating system:

  • Android uses the Roboto font.

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

Upvotes: 13

DongXu
DongXu

Reputation: 1557

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

Upvotes: 67

Rémi Rousselet
Rémi Rousselet

Reputation: 276957

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

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

Upvotes: 54

Related Questions