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.