Solved: How to Change Font in Flutter – Set a Custom Font Text

Here you can learn how to change font in Flutter app’s text style into any type of custom fonts. You cannot access to your computer installed fonts directly from your app. You have to import font into our flutter app.

How to Add font into Flutter App?

To change font in Flutter, you need to import the new font into our project. As we uploaded images to our flutter app, the steps to adding fonts are similar. Just add the font file into your asset folder or into a new folder that located on flutter development application folder.

Here YOC created a new folder named ‘fonts’. Now place the font file with extension of ttf (True Type Font). Fonts with format otf may not work but you can convert using online tools.

Now copy the font from your computer to the newly created folder.

You may find system fonts on following folder:

• Windows: C:\Windows\Fonts
• Mac : System > Library > Fonts or User > Library > Fonts

As an example, we copy the font ‘Harrington’ into application ‘fonts’ folder.

Importing Font into Flutter App

We have added the font into our project directory. Now you can simply add the font to your application project.

In our app, as an example, just added a sample string ‘How are you today?’ with default font style.

Text( "How are you today?"),

Now let’s change the default font into our imported font ‘Harrington’

• Open your pubspec.yaml file.
• Then add the following line of code.

fonts:
  - family: Harrington
    fonts:
      - asset: fonts/Harrington.ttf

Where

family is the font name (Harrington).
fonts/Harrington.ttf is the font location. We placed the font inside the folder ‘fonts’.

Using Custom Font on Flutter Code

Here, in TextStyle property, just mention the name of font family as the value of ‘fontFamily’ property.

Text( "How are you today?",
  style: TextStyle(
    fontFamily: 'Harrington',
   ),
),

If Font Family is not working :

1. Getting Error :

While adding above code on pubspec.yaml, the spacing is very important.

Or you will get error like this:

Error on line 46, column 2: Expected a key while parsing a block mapping.
   ╷
46 │  fonts:
   │  ^
   ╵
Please correct the pubspec.yaml file.

How to solve:

You need to give spaces as you see below image:

Always use ‘Get dependencies’ or ‘get pub’ option if flutter recommend you on right top of your IDE.

2. All codes are fine but not working:

While customizing the font, the hot reload or hot restart options will not change your interface. You need to stop and restart (re-run) current app execution.

You can customize your font text style with many of other styles like gradient, shadow,opacity etc.