Movatterモバイル変換

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 topub.dev. This recipe uses the following steps:

Add a font to a package.
Add the package and font to the app.
Use the font.

Note

Check out the google_fonts package for direct access to almost 1000 open-sourced font families.

1. Add a font to a package

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

In this example, assume you've got a Flutter library calledawesome_package with fonts living in alib/fonts folder.

awesome_package/  lib/    awesome_package.dart    fonts/      Raleway-Regular.ttf      Raleway-Italic.ttf

2. Add the package and fonts to the app

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

Add the package to the app

To add theawesome_package package as a dependency, runflutter pub add:

flutter pub add awesome_package

Declare the font assets

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

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

yaml

flutter:  fonts:    -family:Raleway      fonts:        -asset:packages/awesome_package/fonts/Raleway-Regular.ttf        -asset:packages/awesome_package/fonts/Raleway-Italic.ttf          style:italic

3. Use the font

Use aTextStyle 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.

dart

child:Text(  'Using the Raleway font from the awesome_package',  style:TextStyle(fontFamily:'Raleway'),),

Complete example

Fonts

The Raleway and RobotoMono fonts were downloaded fromGoogle Fonts.

`pubspec.yaml`

yaml

name:package_fontsdescription:An example of how to use package fonts with Flutterdependencies:  awesome_package:  flutter:    sdk:flutterdev_dependencies:  flutter_test:    sdk:flutterflutter:  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

`main.dart`

dart

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

Package Fonts Demo

Was this page's content helpful?

Thank you for your feedback!

Provide details

Thank you for your feedback! Please let us know what we can do to improve.

Provide details

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2025-02-12.View sourceorreport an issue.