font_preview 0.2.0

A package to inspect, compare and preview fonts that are being used in Flutter apps

What is it?

font_preview is a Flutter package to inspect, compare & preview fonts used in your Flutter app.

Requirements

• Package: Dart 3.8+ and Flutter 3.32+.
• The separate app in example/ requires Dart 3.10+ and Flutter 3.38+ because it uses google_fonts 8.
• google_fonts is optional for consumers; this package depends only on the Flutter SDK.

When do you need it?

• When you want to make sure your custom font is loaded and being used
• When you're using google_fonts and you want to make sure the font you're using is downloaded and being used

NOTE: font_preview uses BungeeShade-Regular as the fallback font so if your font is not loaded on your texts, they will look like this. this way you can easily recognize this issue.

• when you simply need to see how the font looks like across different font-weights and font-styles
• when you want to compare fonts together
• when you need to make sure all font-weights and font-styles for your custom font are loaded correctly.
• when you want to check for faux styles. for example whether flutter is using a faux bold for w700 font weight or the font you specified.

How to use it?

Add the package to your app:

flutter pub add font_preview

Use a regular dependency when importing it from lib/. If it is only used in separate development tooling or tests, use flutter pub add --dev font_preview.

Import package:font_preview/font_preview.dart, then use a context beneath a MaterialApp to navigate to a font preview screen:

FontPreview.previewFonts(
  context,
  previewText: 'Flutter is Great',
  fonts: [
    // if you have custom fonts in your assets you can use its 
    // font family name
    FontProvider.fromFontFamily('Ubuntu'),
  ],
);

You can provide multiple fonts and compare them side by side for each font-weight and font-style

FontPreview.previewFonts(
  context,
  previewText: 'Flutter is Great',
  fonts: [
    FontProvider.fromFontFamily('Ubuntu'),    

    // If you are using google_fonts package for loading fonts 
    // provide your fonts for previewing like this
    FontProvider.fromBuilder(
      (fontSize, fontWeight, fontStyle) => GoogleFonts.raleway(
        fontSize: fontSize,
        fontStyle: fontStyle,
        fontWeight: fontWeight,
      ),
    ),

    FontProvider.fromBuilder(
      (fontSize, fontWeight, fontStyle) => GoogleFonts.roboto(
        fontSize: fontSize,
        fontStyle: fontStyle,
        fontWeight: fontWeight,
      ),
    ),

  ],
  fontStyles: [FontStyle.normal],
);

And you can specify what styles, weights & sizes you want your font to be previewed in

FontPreview.previewFonts(
  context,
  previewText: 'Flutter is Great',
  fonts: [
    FontProvider.fromFontFamily('Ubuntu'),
  ],
  fontStyles: [FontStyle.normal],
  fontWeights: [FontWeight.w400, FontWeight.w700],
  previewSizes: [11.0, 12.0, 14.0, 16.0, 18.0, 22.0],
);