Flutter supports easy custom fonts setup in their apps. I am using 5 types of custom fonts as demo to show you how to integrate custom downloaded fonts in flutter app. It's very easy to add custom fonts all we have to do is put downloaded fonts in fonts folder and then define the fonts path in pubspec.yaml file. I am explaining all the steps below.
Flutter Use Custom Fonts:
1. Download and Setup Custom Font in app folder:
1. Download your desire custom font online, For demo purpose I have downloaded fonts from Google Fonts.
2. Create a folder fonts in your flutter app.
3. Copy downloaded fonts in fonts folder.
2. Configure Custom Fonts name & Path in pubspec.yaml file:
1. Open your project's pubspec.yaml file in code editor.
2. Define all the downloaded fonts in the pubspec.yaml file.fonts:
- family: AbrilFatface
fonts:
- asset: fonts/AbrilFatface-Regular.ttf
- family: Anton
fonts:
- asset: fonts/Anton-Regular.ttf
- family: DMSerifDisplay
fonts:
- asset: fonts/DMSerifDisplay-Regular.ttf
- family: Pacifico
fonts:
- asset: fonts/Pacifico-Regular.ttf
- family: Raleway
fonts:
- asset: fonts/Raleway-Italic-VariableFont_wght.ttf
style: italic
- asset: fonts/Raleway-VariableFont_wght.ttf
weight: 700
3. Full source code for pubspec.yaml file:
name: myapp
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
// sdk: '=3.0.5 4.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
fonts:
- family: AbrilFatface
fonts:
- asset: fonts/AbrilFatface-Regular.ttf
- family: Anton
fonts:
- asset: fonts/Anton-Regular.ttf
- family: DMSerifDisplay
fonts:
- asset: fonts/DMSerifDisplay-Regular.ttf
- family: Pacifico
fonts:
- asset: fonts/Pacifico-Regular.ttf
- family: Raleway
fonts:
- asset: fonts/Raleway-Italic-VariableFont_wght.ttf
style: italic
- asset: fonts/Raleway-VariableFont_wght.ttf
weight: 700
3. Defining Text widget with custom fonts:
1. Creating Text with AbrilFatface custom font family.
Text(
'AbrilFatface font',
style: TextStyle(fontSize: 30, fontFamily: 'AbrilFatface'),
)
2. Creating Text with Anton font family.
Text(
'Anton font',
style: TextStyle(fontSize: 30, fontFamily: 'Anton'),
)
3. Creating text with DMSerifDisplay font family.
Text(
'DMSerifDisplay font',
style: TextStyle(fontSize: 30, fontFamily: 'DMSerifDisplay'),
)
4. Creating text with Pacifico font family.
Text(
'Pacifico font',
style: TextStyle(fontSize: 30, fontFamily: 'Pacifico'),
)
5. Creatint text with Raleway regular, Raleway bold and Raleway italic font.
const Text(
'Raleway font',
style: TextStyle(fontSize: 30, fontFamily: 'Raleway'),
),
const Text(
'Raleway italic font',
style: TextStyle(
fontSize: 30, fontFamily: 'Raleway', fontStyle: FontStyle.italic),
),
const Text(
'Raleway Bold font',
style: TextStyle(
fontSize: 30, fontFamily: 'Raleway', fontWeight: FontWeight.bold),
)
6. Complete source code for main.dart file:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(children: [
Center(
child: Container(
padding: const EdgeInsets.fromLTRB(15, 25, 15, 0),
child: const Text(
'AbrilFatface font',
style: TextStyle(fontSize: 30, fontFamily: 'AbrilFatface'),
))),
const Text(
'Anton font',
style: TextStyle(fontSize: 30, fontFamily: 'Anton'),
),
const Text(
'DMSerifDisplay font',
style: TextStyle(fontSize: 30, fontFamily: 'DMSerifDisplay'),
),
const Text(
'Pacifico font',
style: TextStyle(fontSize: 30, fontFamily: 'Pacifico'),
),
const Text(
'Raleway font',
style: TextStyle(fontSize: 30, fontFamily: 'Raleway'),
),
const Text(
'Raleway italic font',
style: TextStyle(
fontSize: 30, fontFamily: 'Raleway', fontStyle: FontStyle.italic),
),
const Text(
'Raleway Bold font',
style: TextStyle(
fontSize: 30, fontFamily: 'Raleway', fontWeight: FontWeight.bold),
),
])));
}
}
Screenshot:
Comments
Post a Comment