• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Flutter

      • Home
      • Blog
      • Flutter
      • Flutter Custom Font
      Flutter Custm Font 700X400

      Flutter Custom Font

      • Posted by Shivam Srivastava
      • Categories Flutter
      • Date May 6, 2020
      Spread the love

      Introduction

      In this article, I’ll explain all the steps, in brief, to know how to include your own font in the Flutter project, and also make a sample project and apply some fonts on Text Widgets. So don’t skip any point to better understanding. This article helps you a lot to make your Flutter app more attractive and good looking.

      Let’s Begin

      Ready1 | Flutter Custom Font

      Import the font files

      First, you need to download fonts for use in the project, you can download the fonts from www.fonts.google.com. Now you need to import the font files into the project. I am putting my font files inside assets/ fonts folder you change the directory name.


      Screenshot From 2020 05 05 20 05 41 | Flutter Custom Font

      Mention the font in the

      pubspec.yaml

      Screenshot From 2020 05 05 20 14 29 | Flutter Custom Font

      Now we are ready to code for UI components. I am using simple Text Widgets. You also can use other properties of the Text Widget, it will not reflect your font and work fine.


      main.dart


      Make sure value you provided to fontFamily must match the family a name declared in the pubspec.yaml file, else the font not reflected in your project.

      Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    "DancingScript-VariableFont_wght",
                    style: TextStyle(fontFamily: 'DancingScript', fontSize: 20),
                  ),
                  Text(
                    "Dosis-VariableFont_wght",
                    style: TextStyle(fontFamily: 'Dosis', fontSize: 20),
                  ),
                  Text(
                    "Modak-Regular",
                    style: TextStyle(fontFamily: 'Modak', fontSize: 20),
                  ),
                  Text(
                    "Pacifico-Regular",
                    style: TextStyle(fontFamily: 'Pacifico', fontSize: 20),
                  ),
                  Text(
                    "Raleway-MediumItalic",
                    style: TextStyle(fontFamily: 'Raleway', fontSize: 20),
                  ),
                  Text(
                    "RobotoMono-Italic",
                    style: TextStyle(fontFamily: 'RobotoMono', fontSize: 20),
                  ),
                  Text(
                    "ShadowsIntoLight-Regular",
                    style: TextStyle(fontFamily: 'ShadowsIntoLight', fontSize: 20),
                  ),
                ],
              ),

      Now run the project.

      Imageedit 5 8642120923 | Flutter Custom Font

      Get the complete source code on Github.

      If you have any queries related to this article, ask me freely in the comment section below.

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:apply font flutter, best font for mobile app, flutter available fonts, flutter font family, flutter ios font, flutter monospace font, flutter pubspec font, font google, google fonts list

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      Google Search now shows YouTube Music links on album queries
      May 6, 2020

      Next post

      Flutter Google Fonts
      May 6, 2020

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now