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',
          ),
        ),
      ),
    );
  }
}

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-06-19. View source or report an issue.