How to Use Custom Fonts and Google Fonts in Flutter

Typography plays a key role in how your Flutter app looks and feels. Whether you’re building a sleek business app or a creative project, using the right fonts can elevate your design. In this guide, you’ll learn how to add custom fonts and use Google Fonts in Flutter step by step.

📁 Adding Custom Fonts in Flutter

Step 1: Add Your Font Files

Place your .ttf or .otf font files inside your Flutter project, typically under:

/assets/fonts/

Example structure:

/assets/fonts/
  └── Lato-Regular.ttf
  └── Lato-Bold.ttf

Step 2: Register Fonts in pubspec.yaml

Open pubspec.yaml and add the font paths like this:

flutter:
  fonts:
    - family: Lato
      fonts:
        - asset: assets/fonts/Lato-Regular.ttf
        - asset: assets/fonts/Lato-Bold.ttf
          weight: 700

Step 3: Use the Font in Your App

Now you can use the custom font by referencing its family name:

Text(
  'Hello, Flutter!',
  style: TextStyle(fontFamily: 'Lato'),
)

You can also set it as your global font in ThemeData:

theme: ThemeData(
  fontFamily: 'Lato',
)

You can also combine custom fonts with layout techniques for a better experience across devices. Check out our guide on creating responsive UI in Flutter to see how.

🔠 Using Google Fonts in Flutter

If you want a faster and easier way to use popular fonts, the Google Fonts package is perfect.

Step 1: Add the Dependency

Add the package to your pubspec.yaml:

dependencies:
  google_fonts: ^6.1.0

Run:

flutter pub get

Step 2: Import and Use Google Fonts

You can now use Google Fonts directly in your widgets:

import 'package:google_fonts/google_fonts.dart';

Text(
  'Styled with Google Fonts',
  style: GoogleFonts.roboto(fontSize: 20),
)

You don’t need to download font files or update pubspec.yaml — it all works from the cloud.

Use as a Global Font

theme: ThemeData(
  textTheme: GoogleFonts.robotoTextTheme(),
),

🎯 When to Use Which?

• Custom Fonts: Use when you have branding guidelines or need a unique look.
• Google Fonts: Use for fast integration, popular web-safe fonts, and rapid prototyping.

✅ Final Thoughts

Adding custom fonts and Google Fonts in Flutter is simple, but it adds a big design boost to your app. Whether you’re going for modern, minimal, or bold, having the right font setup makes your UI stand out.

Choose the right typography strategy and apply it consistently across your app — your users (and your design) will thank you!

Fonts can impact performance too, especially if you use too many or large font files. For more tips, see our guide on Flutter performance optimization.