CODEWITHSUNDEEP
flutter
galloper
galloper

Reputation: 941

Full list of font families provided with Flutter?

In Flutter we can use TextStyle to provide a desired fontFamily property for the text. While some fontFamily names are obvious and do work (like 'Arial', 'Courier', 'Times' and so on), where's the full list of available options?

The docs (https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) don't help.

Upvotes: 29

Views: 46319

Answers (4)

Bill Foote
Bill Foote

Reputation: 421

Just to add a coda to this rather frustrating thread of answers to a different question than the one being asked...

It turns out that even Courier isn't available on Flutter Web (on Chrome, using the CanvasKit renderer, circa March 2023), so I had to embed frickin' LiberationMono for a silly debug window if I wanted the columns to line up.

I guess the Flutter team really, really wants everyone to embed every font they might potentially ever use.

Upvotes: 4

Ashad Nadeem Mahmudi
Ashad Nadeem Mahmudi

Reputation: 59

I recently encountered the same problem with fonts and Flutters incomplete documentation of font list.

A much easier solution for me was to import Google's font library:

//Import the font package
import 'package:google_fonts/google_fonts.dart';

//Use the Font package instead of TextStyle with your custom tweeks
Text('Sign Up',
    style: GoogleFonts.poppins(
        color: const Color.fromARGB(255, 59, 59, 61),
        fontSize: 64,
        fontWeight: FontWeight.w900,
    ),
),

And the list of fonts offered by this library is HUGE. check them out with complete examples from here: https://fonts.google.com/

Upvotes: 3

Richardd
Richardd

Reputation: 1012

You don´t need to worry about the default fonts. You can download a font that you like from here https://fonts.google.com/

Then add it to your assets folder, and update your pubspec.yaml

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  fonts:
    - family: yourFont
      fonts:
        - asset: assets/fonts/yourFont.ttf
    - family: otherFont
      fonts:
        - asset: assets/fonts/otherFont.ttf

enter image description here

After that, you can use it like this:

Text('Some text',
     style: TextStyle(
     color: Colors.blue,
     fontFamily: 'yourFont',
     fontSize: 22.0,
     ),
 ),

Upvotes: 2

user14280337
user14280337

Reputation:

I do not think such a list is provided by the Flutter team. The fonts you mention are probably system default fonts. Flutter handles the use of custom fonts with a 'Custom Font Fallback'. Listed below is a tool snippet of how this goes to work:

Snippet

In the following example, any glyphs not present in the font Raleway will be attempted to be resolved with Noto Sans CJK SC, and then with Noto Color Emoji:


const TextStyle(
    fontFamily: 'RaleWay',
    fontFamilyFallback: <String>[
        'Noto Sans CJK SC',
        'Noto Color Emoji',
    ],
)

If all custom fallback font families are exhausted and no match was found or no custom fallback was provided, the platform font fallback will be used.

Since you do not provide any FallBack fonts, Flutter automatically uses the the fonts default to your system of choice.

I hope this you understand what happens now! Please look at the documentation on how to add custom fonts:

Flutter font documentation

Upvotes: 2

Related Questions