How to install Fonts in Flutter

1. Download the Font File

  • Download the font files (e.g., .ttf or .otf) for Fontys.

  • Save them in your project folder, typically under assets/fonts/.


2. Add Font Files to Your Project

Place the font files inside your project:

Project Directory Structure:

lib/
assets/
   fonts/
      Metropolis-Regular.ttf
      Metropolis-Bold.ttf
pubspec.yaml

3. Update pubspec.yaml

Declare the font family in the pubspec.yaml file under the flutter section.

flutter:
  fonts:
    - family: Metropolis
      fonts:
        - asset: assets/fonts/Metropolis-Regular.ttf
        - asset: assets/fonts/Metropolis-Bold.ttf
          weight: 700
  • family: This is the font name you will use in your app.

  • asset: Path to the font file.

  • weight: Optional; defines the font weight (e.g., 700 for bold).


4. Run flutter pub get

In your terminal, run this command to fetch the fonts:

flutter pub get

5. Use the Font in Your App

You can now use the custom font in your Flutter app via the fontFamily property.

Example: Using Fontys in Text Widgets

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'Metropolis',
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Font Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Hello, Metropolis!',
                style: TextStyle(fontSize: 24),
              ),
              Text(
                'Bold MetropolisText',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

6. Verify the Output

Run your app and ensure that the Fontys font is displayed correctly.

Updated on