How to use custom fonts in Flutter

Learn to use custom fonts in your Flutter application using Google fonts & font files.

· 6 min read
How to use custom fonts in Flutter

Hello everyone, In this article, I am going to discuss implementing custom fonts in a Flutter application.

Basically, there are two ways that I use to implement custom fonts in my Flutter applications:

  1. Using fonts file
  2. Using Google Fonts plugin

There can be other methods or plugins to implement custom fonts, but I prefer these two methods. In this article, we are going to discuss both of them.

For this article, I am going to use the "Poppins" font for demonstration.

Here you can also look into the basic application, demonstrating the implementation of the custom fonts using both the mentioned methods.

If you are in hurry and just want the code, then check the GitHub repo of this project.

GitHub - shashikantdwivedi/CustomFontsFlutter
Contribute to shashikantdwivedi/CustomFontsFlutter development by creating an account on GitHub.

Implementing custom fonts using fonts file

To implement custom fonts in Flutter using fonts file, you just need to do 3 things -

  1. Download the font files and place them in your project.
  2. Add the font location in your pubspec.yaml file under the fonts section.
  3. Use the font

STEP 1 - Downloading Font Files

Here I am adding the links to some popular sites where you can find fonts according to your requirements.

Google Fonts
Making the web more beautiful, fast, and open through great typography
DaFont - Download fonts
Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.
1001 Free Fonts - Download Fonts
Download 65000 quality free fonts for Windows and Mac. Fonts are organized by categories and popularity. New fonts added daily.
Font Squirrel | Free Fonts! Legit Free & Quality
Handpicked free fonts for graphic designers with commercial-use licenses.

Once you are done with downloading the fonts. Place them in your project.

For demonstration, I am placing them in assets/fonts/. But you can use the location of your choice.

STEP 2 - Adding fonts to pubspec.yaml file

Open your pubspec.yaml file and mention all the fonts that you want to use.

Here is the general format that I use to add the fonts in pubspec.yaml the file

fonts:
    - family: <font-name>
      fonts:
        - asset: <font-location>
    - family: <font-name>
      fonts:
        - asset: <font-location>

Just remember to replace <font-name> with the actual font name that you wanted to write while using that font & replace the <font-location> with the actual location of the font in your project directory. Under fonts the section, you can add any number of fonts.

You can also check the demonstration project pubspec.yaml to get it correctly.

CustomFontsFlutter/pubspec.yaml at master · shashikantdwivedi/CustomFontsFlutter
Contribute to shashikantdwivedi/CustomFontsFlutter development by creating an account on GitHub.

Now restart your project and you will be ready to use custom fonts in your project.

STEP 3 - Using a custom font

To use the custom font, that you just added. Simply specify the fontFamily parameter in the TextStyle class, and write the name of the font.

Here's an example of the custom font that I implemented.

Text('Poppins Light', style: TextStyle(fontSize: 22, fontFamily: 'Poppins Light'),)

So this is how you can use custom fonts in your application using font files.

And this is the result that you will get on your screen.

Implementing custom fonts using the Google fonts plugin

To implement custom fonts using the Google font plugin, you just have to follow 2 simple steps

  1. Add the plugin in pubspec.yaml file.
  2. Use the font

STEP 1- Add the plugin in pubspec.yaml file

Simply add google_fonts: ^2.2.0 under the dependencies section in your pubspec.yaml file, like this -

You can also check the latest version of the plugin from here -

google_fonts | Flutter Package
A package to include fonts from fonts.google.com in your Flutter app.

After adding the plugin run flutter pub get to fetch it & then restart your project to get it properly installed.

STEP 3 - Using a custom font

To use custom font using the Google fonts plugin, just use this format -

Text('', style: GoogleFonts.<font-name>())

Remember to replace <font-name> with the name of the font, you want to use.

Below, I have attached an example of how I used it in code.

You can use it anywhere to replace TextStyle class.

Also, you can go through the Google fonts site to check all available fonts on the platform -

Google Fonts
Making the web more beautiful, fast, and open through great typography

You can only use the fonts available in Google Fonts when using this method.

Here is the screenshot of the result, that I achieved using this method


So as you can see both the methods gives the same result, but I prefer to use the Google fonts plugin to implement custom fonts. I found it to be easier to implement.

I am attaching the link to all the references here so that you can go and discover things in more depth.

google_fonts | Flutter Package
A package to include fonts from fonts.google.com in your Flutter app.
Use a custom font
How to use custom fonts.

I am also attaching the link of the code for this article

GitHub - shashikantdwivedi/CustomFontsFlutter
Contribute to shashikantdwivedi/CustomFontsFlutter development by creating an account on GitHub.

I hope this article helped you. If you found this article informative, then do not forget to subscribe for more such articles.

Related Articles

How to take screenshot in Flutter
· 2 min read
Flutter Localization Tutorial
· 5 min read