Flutter helps us create beautiful mobile applications for multiple platforms with a single codebase. Isn’t that awesome? Yes, it is.
Designers and developers favor using a custom font to give their app a distinct appearance that helps in building brand awareness and a better product altogether.
Roboto and San Fransisco are the default font family for Android and iOS, respectively. You might have a custom-created font from a designer, or you might have downloaded a font from any other resource like Google Fonts. Either way, you will have to download the font file (.ttf ) and import it to your Flutter project.
In this article, you’ll learn how to add custom a font to your project by creating a basic Flutter app that displays texts with different font styles.
Getting started with custom fonts 🎬
Follow these steps to begin with fonts in Flutter:
- Downloading the font file
- Importing the font files in a project
- Adding the font in the
pubspec.yaml
- Using the font in an app
1. Downloading the font file 📦
Let’s get started by downloading a custom font from Google Fonts. In this example, we’ll use the Montserrat font. You might have gotten a custom font file from a designer or somewhere else. But in this tutorial, we will be downloading the .ttf font file from Google Fonts. Google Fonts is a catalog containing fonts published under licenses that allow you to use them on any website or an app for commercial or personal use.
Follow these steps to download the font file:
- Step 1: Visit Google Fonts and search for Monserrat in the search bar
- Step 2: Click on the Monserrat font
- Step 3: Now click on the Download family to download the font
- Step 4: Unzip the downloaded file
2. Importing font files in a project 📂
After downloading, we need to add the font files to our Flutter project. Create a folder named fonts
in the root of the Flutter project.
You need to structure the folder like this:
my_app/ lib fonts/ Montserrat-Regular.ttf
Next, move the Montserrat font files or .ttf files into the fonts
folder that you just created.
N.B., you will see many fonts files after unzipping but only copy Monserrat-Regular.ttf, Monserrat-Italic.ttf, Monserrat-Bold.ttf for this tutorial. Later you can experiment with as many variants as you want.
3. Adding font files in pubspec 📝
So now after importing the font files into our Flutter project, we need to add them to our pubspec.yaml
. By declaring the font in the pubspec.yaml
, you tell Flutter to register this font and remember it so that you can use it all over the project.
You need to follow a specific structure while declaring the font in the pubspec.yaml
:
Follow the below structure to declare the font:
flutter: fonts: - family: Montserrat fonts: - asset: fonts/Montserrat-Regular.ttf - asset: fonts/Montserrat-Italic.ttf style: italic - asset: fonts/Montserrat-Bold.ttf weight: 700
Keep these things in mind while declaring fonts in the pubspec 🤓:
- Indentation is crucial, and always make sure to have proper spaces as required
- You can add multiple font families in the same manner (you will see that later)
- The
family
determines the name of the font and it should be unique for different font families - The
asset
is the path of the font from the root of the project - The
weight
property represents the weight of the font, an integer value from 100 to 900 - The
style
property specifies whether the font is normal or italic
Hint: After adding a font in the pubspec.yaml
, always restart the app from the cold. 🔥
Up until now you have successfully imported and added the font. In the next step, you will see how to use the font in the project.
4. Using font in an app 🕹️
Now it’s time for the real action. After all those steps, you’re set up to start using the custom font and make a custom-tailored app.
Let’s see how to use the custom font in a Text
widget:
import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Text( 'Almost before we knew it, we had left the ground.', style: TextStyle( fontFamily: 'Montserrat', fontSize: 36.0, color: Colors.teal, fontWeight: FontWeight.bold, ), ), ), ), ), ); } }
Result:
You need to use TextStyle
to add style to a Text
widget. TextStyle
takes a fontFamily
parameter that is the name of the font that you earlier added in the pubspes.yaml
(here Montserrat). Other parameters like fontSize
, color
, and fontWeight
declare the size of the font, color of the font, and weight of the font, respectively.
Instead of declaring the font separately in each Text
widget, you can also make a font app-level that will be implemented throughout the app.
By declaring the font in the MaterialApp‘s theme
property, you can apply the custom font to the entire app.
Here’s how you add do it 😎:
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, fontFamily: 'Montserrat', ), home: const HomePage(), ); } }
In the above example, we added Montserrat
as the default font family for our app. Every Text
widget that you’ll add will now be using Montserrat as their font. Configuring fontWeight
and fontStyle
to bold and italic will use the Montserrat font that you added for italic and bold in pubspec.yaml
.
Here’s a complete example of using different variations of the Montserrat
font:
import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, fontFamily: 'Montserrat', ), home: const HomePage(), ); } } class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const [ Text( "Almost before we knew it, we had left the ground.", style: TextStyle( fontSize: 18.0, color: Colors.teal, ), ), Text( "Almost before we knew it, we had left the ground.", style: TextStyle( fontStyle: FontStyle.italic, fontSize: 18.0, color: Colors.teal, ), ), Text( "Almost before we knew it, we had left the ground.", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 18.0, color: Colors.teal, ), ), ], ), ), ); } }
Result:
At times either your designer or you may want to add multiple fonts in your app to make it more vibrant, expressive, and better looking.
To add another font in the pubspec.yaml
, just do the following :
-
- Download Dancing Script from Google Fonts
- Unzip and add it to the fonts folder
- Add the font to the
pubspec.yaml
:- family: DancingScript
fonts:- asset: fonts/DancingScript-Bold.ttf
weight: 700
- asset: fonts/DancingScript-Bold.ttf
- family: DancingScript
- Use the DancingScript font by adding a new
Text
widget in theColumn
After adding a Text
widget that uses DancingScript, here’s how the HomePage
widget will look:
class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const [ Text( "Almost before we knew it, we had left the ground.", style: TextStyle( fontSize: 18.0, color: Colors.teal, ), ), Text( "Almost before we knew it, we had left the ground.", style: TextStyle( fontStyle: FontStyle.italic, fontSize: 18.0, color: Colors.teal, ), ), Text( "Almost before we knew it, we had left the ground.", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 18.0, color: Colors.teal, ), ), Text( "Almost before we knew it, we had left the ground.", style: TextStyle( fontFamily: 'DancingScript', fontWeight: FontWeight.bold, fontSize: 18.0, color: Colors.teal, ), ), ], ), ), ); } }
Result:
Conclusion 🌠
In this tutorial, you learned how you can use custom fonts in a Flutter project.
Another way to use fonts from Google Fonts is by using the google_fonts package. The google_font package can fetch the .ttf
or font files once via http
at runtime, and cache it in the app’s file system instead of storing it in the fonts
folder and declaring the font in the pubspec.yaml
. I’m excited to see what you all come up with all this learning.
Good luck! Happy Fluttering! 👨💻
If you have any questions, feel free to post them 👇.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Any feedback is welcome 😃.
If you enjoyed this article, you can support us by sharing it with your friends.
Get setup with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID.
- Install LogRocket via NPM or script tag.
LogRocket.init()
must be called client-side, not server-side. - (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- ngrx middleware
- Vuex plugin
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>