Use Local Fonts in Flutter

Create Free Backend With Appwrite

Introduction

In this section, you will learn to use local fonts in your flutter application with the help of real-world example. Here are the steps to use local fonts in your app:

Step 1: Add the Font Files

To use local fonts in your app, the first step is to add the font files in your flutter project. You can download sample font files from here or you can use your own font files.

Info

Note: Before downloading the font files, make sure you have proper license to use it.

Step 2: Add Font Files to Your Project

In project folder, create a new folder called assets and inside assets folder, create another folder called fonts. Now, place all the font files inside the fonts folder. Here is preview of the folder structure:

fonts_in_flutter/
│
├── assets/
│   └── fonts/
│       ├── Roboto-Black.ttf
│       ├── Roboto-BlackItalic.ttf
│       ├── Roboto-Bold.ttf
│       ├── Roboto-BoldItalic.ttf
│       ├── Roboto-Italic.ttf
│       ├── Roboto-Light.ttf
│       ├── Roboto-LightItalic.ttf
│       ├── Roboto-Medium.ttf
│       ├── Roboto-MediumItalic.ttf
│       ├── Roboto-Regular.ttf
│       ├── Roboto-Thin.ttf
│       └── Roboto-ThinItalic.ttf
│
├── lib/
│   └── main.dart

Step 3: Add Font Files to pubspec.yaml File

Now, you need to add font files to the pubspec.yaml file. Go to your pubspec.yaml file and add the following code in it:

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Black.ttf
        - asset: assets/fonts/Roboto-BlackItalic.ttf
          style: italic
        - asset: assets/fonts/Roboto-Bold.ttf
        - asset: assets/fonts/Roboto-BoldItalic.ttf
          style: italic
        - asset: assets/fonts/Roboto-Italic.ttf
          style: italic
        - asset: assets/fonts/Roboto-Light.ttf
        - asset: assets/fonts/Roboto-LightItalic.ttf
          style: italic
        - asset: assets/fonts/Roboto-Medium.ttf
        - asset: assets/fonts/Roboto-MediumItalic.ttf
          style: italic
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Thin.ttf
        - asset: assets/fonts/Roboto-ThinItalic.ttf
          style: italic

Step 4: Use the Fonts

To use the fonts, you need to use the TextStyle widget. Here is how you can use the fonts:

Text(
  'I am using local font',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontSize: 20,
    fontWeight: FontWeight.w900,
  ),
)

Supporting Source Code

If you face any issue while using the fonts, then you can check this link for the complete source code.

Challenge

Create profile app with your photo, name, address, and phone number. Use local fonts to style the text.