Export fonts from a package

Rather than declaring a font as part of an app, you can declare a font as part of a separate package. This is a convenient way to share the same font across several different projects, or for coders publishing their packages to pub.dev . This recipe uses the following steps:

1. Add a font to a package.
2. Add the package and font to the app.
3. Use the font.

To export a font from a package, you need to import the font files into the lib folder of the package project. You can place font files directly in the lib folder or in a subdirectory, such as lib/fonts .

In this example, assume you've got a Flutter library called awesome_package with fonts living in a lib/fonts folder.

awesome_package/

  lib/

    awesome_package.dart

    fonts/

      Raleway-Regular.ttf

      Raleway-Italic.ttf

Now you can use the fonts in the package by updating the pubspec.yaml in the app's root directory.

To add the awesome_package package as a dependency, run flutter pub add :

$ flutter pub add awesome_package

Now that you've imported the package, tell Flutter where to find the fonts from the awesome_package .

To declare package fonts, prefix the path to the font with packages/awesome_package . This tells Flutter to look in the lib folder of the package for the font.

flutter
:

  fonts
:

    - 
family
: 
Raleway

      fonts
:

        - 
asset
: 
packages/awesome_package/fonts/Raleway-Regular.ttf

        - 
asset
: 
packages/awesome_package/fonts/Raleway-Italic.ttf

          style
: 
italic

Use a TextStyle to change the appearance of text. To use package fonts, declare which font you'd like to use and which package the font belongs to.

child: 
Text
(

  'Using the Raleway font from the awesome_package'
,

  style: 
TextStyle
(

    fontFamily: 
'Raleway'
,

  ),

),

The Raleway and RobotoMono fonts were downloaded from Google Fonts .

name
: 
package_fonts

description
: 
An example of how to use package fonts with Flutter


dependencies
:

  awesome_package
:

  flutter
:

    sdk
: 
flutter


dev_dependencies
:

  flutter_test
:

    sdk
: 
flutter


flutter
:

  fonts
:

    - 
family
: 
Raleway

      fonts
:

        - 
asset
: 
packages/awesome_package/fonts/Raleway-Regular.ttf

        - 
asset
: 
packages/awesome_package/fonts/Raleway-Italic.ttf

          style
: 
italic

  uses-material-design
: 
true

import
 'package:flutter/material.dart'
;


void
 main
() => 
runApp
(
const
 MyApp
());


class
 MyApp
 extends
 StatelessWidget
 {

  const
 MyApp
({
super
.key});


  @override

  Widget
 build
(
BuildContext
 context) {

    return
 const
 MaterialApp
(

      title: 
'Package Fonts'
,

      home: 
MyHomePage
(),

    );

  }

}


class
 MyHomePage
 extends
 StatelessWidget
 {

  const
 MyHomePage
({
super
.key});


  @override

  Widget
 build
(
BuildContext
 context) {

    return
 Scaffold
(

      // The AppBar uses the app-default font.

      appBar: 
AppBar
(title: 
const
 Text
(
'Package Fonts'
)),

      body: 
const
 Center
(

        // This Text widget uses the Raleway font.

        child: 
Text
(

          'Using the Raleway font from the awesome_package'
,

          style: 
TextStyle
(

            fontFamily: 
'Raleway'
,

          ),

        ),

      ),

    );

  }

}