Flutter Custom Fonts

In this tutorial, we will see how to use custom fonts in flutter

Step1: Download fonts from google

In this, I have downloaded fonts from https://fonts.google.com/specimen/Roboto

Step2: create folder assets/fonts at root of flutter project and copy the downloaded fonts to assets/fonts folder

Step3: Configure fonts in pubspec.yaml file as shown in below

name: flutter_fonts_example
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: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.1
  shared_preferences: ^2.0.8
  url_launcher: ^6.0.12
  google_fonts: ^2.1.0
  convex_bottom_bar: ^3.0.0
  intl: ^0.17.0
  sqflite: ^2.0.0+4
  json_serializable: ^6.0.0
  font_awesome_flutter: ^9.1.0
  flutter_rating_bar: ^4.0.0
  flutter_rating_stars: ^1.0.3+4
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0


# The following section is specific to Flutter.
flutter:

  uses-material-design: true
  fonts:
     - family: Roboto
       fonts:
         - asset: assets/fonts/Roboto-Regular.ttf
         - asset: assets/fonts/Roboto-Bold.ttf
         - asset: assets/fonts/Roboto-Medium.ttf
         - asset: assets/fonts/Roboto-Black.ttf
         - asset: assets/fonts/Roboto-Italic.ttf
           style: italic
           weight: 900
     - family: WorkSans
       fonts:
         - asset: assets/fonts/WorkSans-Regular.ttf
         - asset: assets/fonts/WorkSans-Bold.ttf
         - asset: assets/fonts/WorkSans-Medium.ttf
         - asset: assets/fonts/WorkSans-Black.ttf
         - asset: assets/fonts/WorkSans-Italic.ttf
           style: italic

Step4: Now set the default font at theme level like shown below. Make sure that fontFamily: ‘Roboto” should match at pubspec.yaml file(-family:Roboto)

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'Roboto'
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Step5: We can wse font at specific widget level. In this,I have used “WorkSans” font family which is loaded in pubspec.yaml file

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default Raleway font.
      appBar: AppBar(title: const Text('Custom Fonts')),
      body: const Center(
        // This Text widget uses the RobotoMono font.
        child: Text(
          'Roboto Mono sample',
          style: TextStyle(fontFamily: 'WorkSans'),
        ),
      ),
    );
  }
}