• 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 Google Fonts
      Google Fonts 700X400

      Flutter Google Fonts

      • Posted by Shivam Srivastava
      • Categories Flutter, Developers
      • Date May 6, 2020
      • Comments 0 comment
      Spread the love

      Introduction

      In recent months Google has announced the library of Google fonts, who helps developers a lot to modify the font of Flutter Text. The google_fonts package for Flutter allows you to easily use any of the 977 fonts (and their variants) from fonts.google.com in your Flutter app. The big thing is that you don’t have a need to add any .ttf or .otf file in the asset folder and mapped it with pubspec.yaml file. As I have already written another blog also about Flutter custom font, where you have to need to add your font file manually in the assets folder and mapped it with pubspec.yaml file.

      In this article, I’ll show you how to implement the google_fonts library in your flutter project and how to use the different fonts in it.

      Let’s begin

      Lets Begin

      Add dependency

      First, you have a need to add a google_fonts library in your pubspec.yaml file.

      dependencies:
        flutter:
          sdk: flutter
        google_fonts: <latest-version>

      Import files

      import 'package:google_fonts/google_fonts.dart';

      Now we are ready to code for UI components. I am using simple Text Widgets. You can also use other properties of the Text Widget as you used in TextStyle, it will not reflect your font and work fine. There have a many ways to apply google fonts in your flutter projects, some examples are given below.


      To use GoogleFonts with the default TextStyle:

      Text(
           "Hello World",
      	  style: GoogleFonts.astloch(fontSize: 20),
      ),

      To use GoogleFonts dynamically

      Text(
       'Hello World',
        style: GoogleFonts.getFont('Lato'),
      ),

      To use GoogleFonts with an existing TextStyle:

      Text(
        'Hello World',
        style: GoogleFonts.lato(
          textStyle: TextStyle(color: Colors.green),
        ),
      ),

      To use GoogleFonts with Theme

      Text(
        'Hello World',
        style: GoogleFonts.lato(textStyle: Theme.of(context).textTheme.display1),
      ),

      To override the properties

      Text(
        'Hello World',
        style: GoogleFonts.lato(
          textStyle: Theme.of(context).textTheme.display1,
          fontSize: 20
          fontWeight: FontWeight.bold
          fontStyle: FontStyle.italic,
        ),
      ),

      Done2 | Flutter Google Fonts
      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:flutter font documentation, flutter fonts docs, font google, google font api, roboto font

      • Share:
      author avatar
      Shivam Srivastava

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

      Previous post

      Flutter Custom Font
      May 6, 2020

      Next post

      Github Codespaces allows code in a web browser without any setup
      May 8, 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

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      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