CODEWITHSUNDEEP
flutterfontspackage
Tofiq Samali
Tofiq Samali

Reputation: 261

The Google Fonts Package in Flutter app is not working

First, I added the google_fonts package to your pubspec dependencies.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  google_fonts: ^0.2.0

Then 

import 'package:google_fonts/google_fonts.dart';

and apply to a Text widget

        Text(
          'This is Google Fonts',
          style: GoogleFonts.lato(fontSize: 40),
        ),
        Text(
          'This is Google Fonts',
          style: GoogleFonts.adventPro(fontSize: 40),
        ),

enter image description here

Upvotes: 13

Views: 21702

Answers (7)

Agita
Agita

Reputation: 170

Unless you store the fonts in your assets, you need to define explicitly that runtime fetching is enabled for Google Fonts:

GoogleFonts.config.allowRuntimeFetching = true;

Alternatively, you can disallow fetching fonts at runtime with

GoogleFonts.config.allowRuntimeFetching = false;

Upvotes: 1

user21172488
user21172488

Reputation:

If you are using an emulator or simulator, then it probably may not be an issue of internet connection. It's only when you are using a physical device. In the case of an emulator, it's just an IDE glitch. Invalidate cache in Android Studio or IntelliJ and you are good to go.

Upvotes: 0

Howard J
Howard J

Reputation: 421

To use the Google Fonts in offline mode:

Visit the https://fonts.google.com/ and download the required fonts.
At the root directory, create a directory called google_fonts.
Copy-Paste [font].ttf file into the google_fonts folder.
Open the pubspec.yaml file, Under the assets: section add the -google_fonts/

NOTE: Make sure you don’t change the name of the font file.

Upvotes: 0

krishnaacharyaa
krishnaacharyaa

Reputation: 24980

Google Fonts are fetched from the internet in the runtime. So you observe this behaviour

To overcome this, download the font from google font and make it available in the asset folder by following the steps below.

  1. Visit the https://fonts.google.com/ and download the lato font.
  2. At the root directory, create a directory called google_fonts.
  3. Copy-Paste lato.ttf file into the google_fonts folder.
  4. Open the pubspec.yaml file, Under the assets: section add the -google_fonts/

And change the code from

// Online Mode
Text(
  'This is hammersmithOne from Google Font'
  style: GoogleFonts.lato(),
),

to

// Offline Mode
Text(
  'This is hammersmithOne from Google Font',
   style: TextStyle(fontFamily: 'lato') // This is loaded from assets
),

For futher reference refer this article.

Refer these stackoverflow answers aswell:

Upvotes: 3

Maruf Hassan
Maruf Hassan

Reputation: 1248

I fixed mine by deleting the emulator and installing a new one. My older emulator was not connecting to the internet for some reason and reinstalling it fixed it for me.

Upvotes: 0

Uday Chauhan
Uday Chauhan

Reputation: 1148

After adding the dependency pubspec.yaml file 

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  google_fonts: ^0.2.0

run the command in terminal\cmd console as :

> flutter packages get

this will fetch the dependency into your workspace.

Upvotes: 1

dhanasekar
dhanasekar

Reputation: 1323

Please check internet connection- your emulator does not have internet connectivity. google fonts need internet connection on device/emulator.

Upvotes: 9

Related Questions