Although Android and iOS offer high quality system fonts, designers want support for custom fonts. You might have a custom-built font from a designer, or perhaps you downloaded a font fromGoogle Fonts.

A typeface is the collection of glyphs or shapes that comprise a given style of lettering. A font is one representation of that typeface at a given weight or variation. Roboto is a typeface and Roboto Bold is a font.

Flutter lets you apply a custom font across an entire app or to individual widgets. This recipe creates an app that uses custom fonts with the following steps.

1. Choose your fonts.
2. Import the font files.
3. Declare the font in the pubspec.
4. Set a font as the default.
5. Use a font in a specific widget.

You don't need to follow each step as you go. The guide offers completed example files at the end.

Your choice of font should be more than a preference. Consider which file formats work with Flutter and how the font could affect design options and app performance.

Flutter supports the following font formats:

• OpenType font collections:.ttc
• TrueType fonts:.ttf
• OpenType fonts:.otf

Flutter does not support fonts in the Web Open Font Format,.woff and.woff2, on desktop platforms.

Few sources agree on what a font file type is or which uses less space. The key difference between font file types involves how the format encodes the glyphs in the file. Most TrueType and OpenType font files have similar capabilities as they borrowed from each other as the formats and fonts improved over time.

Which font you should use depends on the following considerations.

• How much variation you need for fonts in your app?
• How much file size you can accept fonts using in your app?
• How many languages you need to support in your app?

Research what options a given font offers, like more than one weight or style per font file,variable font capability, the availability of multiple font files for a multiple font weights, or more than one width per font.

Choose the typeface or font family that meets the design needs of your app.

To work with a font, import its font files into your Flutter project.

To import font files, perform the following steps.

1. If necessary, to match the remaining steps in this guide, change the name of your Flutter app tocustom_fonts.

   $mv /path/to/my_app /path/to/custom_fonts

   content_copy

2. Navigate to the root of your Flutter project.

   $cd /path/to/custom_fonts

   content_copy

3. Create afonts directory at the root of your Flutter project.

   $mkdir fonts

   content_copy

4. Move or copy the font files in afonts orassets folder at the root of your Flutter project.

   $cp ~/Downloads/*.ttf ./fonts

   content_copy

The resulting folder structure should resemble the following:

custom_fonts/|- fonts/  |- Raleway-Regular.ttf  |- Raleway-Italic.ttf  |- RobotoMono-Regular.ttf  |- RobotoMono-Bold.ttf

After you've downloaded a font, include a font definition in thepubspec.yaml file. This font definition also specifies which font file should be used to render a given weight or style in your app.

To add font files to your Flutter app, complete the following steps.

1. Open thepubspec.yaml file at the root of your Flutter project.

   $vi pubspec.yaml

   content_copy

2. Paste the following YAML block after theflutter declaration.

   yaml

   fonts:-family:Ralewayfonts:-asset:fonts/Raleway-Regular.ttf-asset:fonts/Raleway-Italic.ttfstyle:italic-family:RobotoMonofonts:-asset:fonts/RobotoMono-Regular.ttf-asset:fonts/RobotoMono-Bold.ttfweight:700

   content_copy

Thispubspec.yaml file defines the italic style for theRaleway font family as theRaleway-Italic.ttf font file. When you setstyle: TextStyle(fontStyle: FontStyle.italic), Flutter swapsRaleway-Regular withRaleway-Italic.

Thefamily value sets the name of the typeface. You use this name in thefontFamily property of aTextStyle object.

The value of anasset is a relative path from thepubspec.yaml file to the font file. These files contain the outlines for the glyphs in the font. When building the app, Flutter includes these files in the app's asset bundle.

Different typefaces implement font files in different ways. If you need a typeface with a variety of font weights and styles, choose and import font files that represent that variety.

When you import a font file that doesn't include either multiple fonts within it or variable font capabilities, don't use thestyle orweight property to adjust how they display. If you do use those properties on a regular font file, Flutter attempts tosimulate the look. The visual result will look quite different from using the correct font file.

When you declare which font files represent styles or weights of a font, you can apply thestyle orweight properties.

Theweight property specifies the weight of the outlines in the file as an integer multiple of 100, between 100 and 900. These values correspond to theFontWeight and can be used in thefontWeight property of aTextStyle object.

In thepubspec.yaml shown in this guide, you definedRobotoMono-Bold as the700 weight of the font family. To use theRobotoMono-Bold font that you added to your app, setfontWeight toFontWeight.w700 in yourTextStyle widget.

If you hadn't addedRobotoMono-Bold to your app, Flutter attempts to make the font look bold. The text then might appear to be somewhat darker.

You can't use theweight property to override the weight of the font. You can't setRobotoMono-Bold to any other weight than700. If you setTextStyle(fontFamily: 'RobotoMono', fontWeight: FontWeight.w900), the displayed font would still render as however boldRobotoMono-Bold looks.

Thestyle property specifies whether the glyphs in the font file display as eitheritalic ornormal. These values correspond to theFontStyle. You can use these styles in thefontStyle property of aTextStyle object.

In thepubspec.yaml shown in this guide, you definedRaleway-Italic as being in theitalic style. To use theRaleway-Italic font that you added to your app, setstyle: TextStyle(fontStyle: FontStyle.italic). Flutter swapsRaleway-Regular withRaleway-Italic when rendering.

If hadn't addedRaleway-Italic to your app, Flutter attempts to make the fontlook italic. The text then might appear to be leaning to the right.

You can't use thestyle property to override the glyphs of a font. If you setTextStyle(fontFamily: 'Raleway', fontStyle: FontStyle.normal), the displayed font would still render as italic. Theregular style of an italic fontis italic.

To apply a font to text, you can set the font as the app's default font in itstheme.

To set a default font, set thefontFamily property in the app'stheme. Match thefontFamily value to thefamily name declared in thepubspec.yaml file.

The result would resemble the following code.

returnMaterialApp(title:'Custom Fonts',// Set Raleway as the default app font.theme:ThemeData(fontFamily:'Raleway'),home:constMyHomePage(),);

To learn more about themes, check out theUsing Themes to share colors and font styles recipe.

To apply the font to a specific widget like aText widget, provide aTextStyle to the widget.

For this guide, try to apply theRobotoMono font to a singleText widget. Match thefontFamily value to thefamily name declared in thepubspec.yaml file.

The result would resemble the following code.

child:Text('Roboto Mono sample',style:TextStyle(fontFamily:'RobotoMono'),),

Download the Raleway and RobotoMono font files fromGoogle Fonts.

1. Open thepubspec.yaml file at the root of your Flutter project.

   $vi pubspec.yaml

   content_copy

2. Replace its contents with the following YAML.

   yaml

   name:custom_fontsdescription:An example of how to use custom fonts with Flutter​dependencies:flutter:sdk:flutter​dev_dependencies:flutter_test:sdk:flutter​flutter:fonts:-family:Ralewayfonts:-asset:fonts/Raleway-Regular.ttf-asset:fonts/Raleway-Italic.ttfstyle:italic-family:RobotoMonofonts:-asset:fonts/RobotoMono-Regular.ttf-asset:fonts/RobotoMono-Bold.ttfweight:700uses-material-design:true

   content_copy

1. Open themain.dart file in thelib/ directory of your Flutter project.

   $vi lib/main.dart

   content_copy

2. Replace its contents with the following Dart code.

   dart

   import'package:flutter/material.dart';​voidmain()=>runApp(constMyApp());​classMyAppextendsStatelessWidget{constMyApp({super.key});​@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'Custom Fonts',// Set Raleway as the default app font.theme:ThemeData(fontFamily:'Raleway'),home:constMyHomePage(),);}}​classMyHomePageextendsStatelessWidget{constMyHomePage({super.key});​@overrideWidgetbuild(BuildContextcontext){returnScaffold(// The AppBar uses the app-default Raleway font.appBar:AppBar(title:constText('Custom Fonts')),body:constCenter(// This Text widget uses the RobotoMono font.child:Text('Roboto Mono sample',style:TextStyle(fontFamily:'RobotoMono'),),),);}}

   content_copy

The resulting Flutter app should display the following screen.