How to Use Custom Fonts and Google Fonts in Flutter

Typography significantly impacts how users perceive your Flutter app. The right font choices can make your app feel professional, playful, or trustworthy. Whether you’re implementing brand guidelines or simply want better aesthetics, understanding how to use custom fonts in Flutter is essential.

In this guide, you’ll learn how to add custom font files to your project, use Google Fonts for quick integration, create consistent typography themes, and handle common font-related issues.

Understanding Font Options in Flutter

Flutter provides two main approaches for adding fonts beyond the system defaults:

Asset fonts: Font files bundled with your app. They’re always available, load instantly, and work offline.

Google Fonts package: Downloads fonts on demand from Google’s servers. Quick to implement, but requires network access for first use.

Each approach has trade-offs. Understanding them helps you choose the right option for your project.

Method 1: Adding Custom Font Files

Use this method when you have specific font files (.ttf or .otf) that you need to include in your app, particularly for brand fonts or licensed typefaces.

Step 1: Organize Your Font Files

Create a fonts directory in your project’s assets folder:

my_flutter_app/
├── assets/
│   └── fonts/
│       ├── Lato-Regular.ttf
│       ├── Lato-Bold.ttf
│       ├── Lato-Italic.ttf
│       └── Lato-BoldItalic.ttf
├── lib/
└── pubspec.yaml

Most fonts come with multiple weight and style variants. Include all variants you plan to use for proper rendering of bold, italic, and other styles.

Step 2: Register Fonts in pubspec.yaml

Declare your fonts in the pubspec.yaml file with proper weight and style metadata:

flutter:
  fonts:
    - family: Lato
      fonts:
        - asset: assets/fonts/Lato-Regular.ttf
        - asset: assets/fonts/Lato-Bold.ttf
          weight: 700
        - asset: assets/fonts/Lato-Italic.ttf
          style: italic
        - asset: assets/fonts/Lato-BoldItalic.ttf
          weight: 700
          style: italic
    
    - family: PlayfairDisplay
      fonts:
        - asset: assets/fonts/PlayfairDisplay-Regular.ttf
        - asset: assets/fonts/PlayfairDisplay-Bold.ttf
          weight: 700

The family name is what you’ll reference in your code. The weight and style properties help Flutter select the correct font file when you apply FontWeight.bold or FontStyle.italic.

Step 3: Use the Custom Font

Apply your font to individual Text widgets:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontFamily: 'Lato',
    fontSize: 24,
    fontWeight: FontWeight.bold,  // Uses Lato-Bold.ttf
  ),
)

Or set it as the default font for your entire app:

MaterialApp(
  theme: ThemeData(
    fontFamily: 'Lato',
  ),
  home: MyHomePage(),
)

Understanding Font Weight Mapping

Flutter maps FontWeight values to your declared font assets:

If you don’t provide a font file for a specific weight, Flutter synthesizes it from the nearest available weight, which may not look as intended.

Method 2: Using Google Fonts Package

The Google Fonts package provides access to over 1,000 fonts without managing font files yourself.

Step 1: Add the Dependency

dependencies:
  google_fonts: ^6.1.0

Run flutter pub get to install.

Step 2: Use Google Fonts in Widgets

import 'package:google_fonts/google_fonts.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          'Roboto Font',
          style: GoogleFonts.roboto(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          'Playfair Display',
          style: GoogleFonts.playfairDisplay(
            fontSize: 32,
            fontStyle: FontStyle.italic,
          ),
        ),
        Text(
          'Merriweather',
          style: GoogleFonts.merriweather(
            fontSize: 18,
            letterSpacing: 0.5,
          ),
        ),
      ],
    );
  }
}

Step 3: Set as Global Theme Font

Apply Google Fonts to your entire app’s text theme:

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
  home: MyHomePage(),
)

For more control, combine with custom theme modifications:

ThemeData(
  textTheme: GoogleFonts.latoTextTheme().copyWith(
    headlineLarge: GoogleFonts.playfairDisplay(
      fontSize: 32,
      fontWeight: FontWeight.bold,
    ),
    bodyLarge: GoogleFonts.lato(
      fontSize: 16,
      height: 1.5,
    ),
  ),
)

Caching Google Fonts for Offline Use

Google Fonts downloads on first use. For production apps, cache fonts to ensure they work offline:

// In your app initialization
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Pre-cache fonts during app startup
  GoogleFonts.pendingFonts([
    GoogleFonts.lato(),
    GoogleFonts.playfairDisplay(),
  ]);
  
  runApp(MyApp());
}

Alternatively, bundle Google Fonts as assets for guaranteed availability:

// Configure Google Fonts to use local assets
GoogleFonts.config.allowRuntimeFetching = false;

// Then declare fonts in pubspec.yaml as regular assets
// and Google Fonts will use the local files instead

Creating a Comprehensive Typography Theme

A well-structured typography theme ensures consistency throughout your app. Define all text styles in one place:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class AppTypography {
  // Heading font
  static String get headingFontFamily => GoogleFonts.playfairDisplay().fontFamily!;
  
  // Body font
  static String get bodyFontFamily => GoogleFonts.lato().fontFamily!;
  
  static TextTheme get textTheme => TextTheme(
    // Display styles - for large, prominent text
    displayLarge: GoogleFonts.playfairDisplay(
      fontSize: 57,
      fontWeight: FontWeight.w400,
      letterSpacing: -0.25,
    ),
    displayMedium: GoogleFonts.playfairDisplay(
      fontSize: 45,
      fontWeight: FontWeight.w400,
    ),
    displaySmall: GoogleFonts.playfairDisplay(
      fontSize: 36,
      fontWeight: FontWeight.w400,
    ),
    
    // Headline styles - for section headers
    headlineLarge: GoogleFonts.playfairDisplay(
      fontSize: 32,
      fontWeight: FontWeight.w600,
    ),
    headlineMedium: GoogleFonts.playfairDisplay(
      fontSize: 28,
      fontWeight: FontWeight.w600,
    ),
    headlineSmall: GoogleFonts.playfairDisplay(
      fontSize: 24,
      fontWeight: FontWeight.w600,
    ),
    
    // Title styles - for card titles, app bars
    titleLarge: GoogleFonts.lato(
      fontSize: 22,
      fontWeight: FontWeight.w500,
    ),
    titleMedium: GoogleFonts.lato(
      fontSize: 16,
      fontWeight: FontWeight.w500,
      letterSpacing: 0.15,
    ),
    titleSmall: GoogleFonts.lato(
      fontSize: 14,
      fontWeight: FontWeight.w500,
      letterSpacing: 0.1,
    ),
    
    // Body styles - for main content
    bodyLarge: GoogleFonts.lato(
      fontSize: 16,
      fontWeight: FontWeight.w400,
      letterSpacing: 0.5,
      height: 1.5,
    ),
    bodyMedium: GoogleFonts.lato(
      fontSize: 14,
      fontWeight: FontWeight.w400,
      letterSpacing: 0.25,
      height: 1.4,
    ),
    bodySmall: GoogleFonts.lato(
      fontSize: 12,
      fontWeight: FontWeight.w400,
      letterSpacing: 0.4,
    ),
    
    // Label styles - for buttons, captions
    labelLarge: GoogleFonts.lato(
      fontSize: 14,
      fontWeight: FontWeight.w500,
      letterSpacing: 0.1,
    ),
    labelMedium: GoogleFonts.lato(
      fontSize: 12,
      fontWeight: FontWeight.w500,
      letterSpacing: 0.5,
    ),
    labelSmall: GoogleFonts.lato(
      fontSize: 11,
      fontWeight: FontWeight.w500,
      letterSpacing: 0.5,
    ),
  );
}

// Usage in MaterialApp
MaterialApp(
  theme: ThemeData(
    textTheme: AppTypography.textTheme,
  ),
)

Use theme styles consistently in your widgets:

Text(
  'Section Title',
  style: Theme.of(context).textTheme.headlineMedium,
)

Text(
  'Body content goes here...',
  style: Theme.of(context).textTheme.bodyLarge,
)

When to Use Which Method

Use asset fonts when:

• You have specific brand fonts that must be used
• Offline functionality is critical
• You need fonts not available in Google Fonts
• App size is less concern than reliability

Use Google Fonts when:

• Rapid prototyping and experimentation
• You want to minimize initial app size
• Popular fonts are sufficient for your needs
• You’re comfortable with runtime font loading

Troubleshooting Common Issues

Font Not Loading

If your custom font doesn’t appear:

1. Verify the path in pubspec.yaml matches exact file location
2. Check indentation—YAML is indentation-sensitive
3. Run flutter clean and rebuild
4. Verify the font family name matches exactly

Wrong Font Weight Rendering

If bold text looks wrong:

1. Ensure you’ve included the bold variant file
2. Verify the weight property matches the file (usually 700 for bold)
3. Check that you’re using FontWeight.bold or FontWeight.w700

Google Fonts Not Working Offline

To ensure Google Fonts work offline, either pre-cache them or bundle as assets with allowRuntimeFetching = false.

Performance Considerations

Fonts impact app size and loading time:

• Limit font families: Use 2-3 fonts maximum
• Include only needed weights: Don’t bundle all 9 weights if you only use regular and bold
• Consider variable fonts: Single files that contain all weights, reducing total size
• Preload important fonts: Cache Google Fonts on app start for critical UI

For more performance optimization strategies, see our guide on Flutter Performance Optimization.

Conclusion

Adding custom fonts in Flutter enhances your app’s visual identity and user experience. Whether bundling font files as assets or using the Google Fonts package, Flutter makes typography customization straightforward.

Create a consistent typography theme, choose appropriate font weights for your content hierarchy, and consider performance implications when selecting fonts. Good typography choices can elevate a basic app to a polished product.

For more Flutter UI techniques, explore our guides on Responsive UI in Flutter and State Management with Provider, Riverpod, and BLoC.