Error: google_fonts was unable to load font

Question

I'm trying to use GoogleFonts to test my UI but I'm getting this strange error error: google_fonts was unable to load font.

Thats occurs with any single font.

This is my setup VsCode Flutter 1.12.13+hf9 Windows 10

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.4.0

Code

import 'package:google_fonts/google_fonts.dart';
Text('data2', style: GoogleFonts.mcLaren())

Error

I/flutter ( 5069): error: google_fonts was unable to load font McLaren-Regular because the following exception occured I/flutter ( 5069): Exception: Failed to load font with url: https://fonts.gstatic.com/s/a/ca48a5e17b0201057453d49c4271d139e5824b553505ad1c6fbbd7cbbbf4d1dc.ttf

[√] Flutter (Channel stable, v1.12.13+hotfix.9, on Microsoft Windows, locale pt-BR)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] Android Studio (not installed)
[√] VS Code, 64-bit edition (version 1.44.0)
[√] Connected device (1 available)

! Doctor found issues in 1 category.

rubStackOverflow · Accepted Answer · 2020-04-24T01:45:29.283

33

My mistake, I figure out that:

Emulator/device needs internet connectivity.
Google fonts need internet connection on device/emulator.

edited Apr 24 '20 at 01:45

answered Apr 10 '20 at 14:16

rubStackOverflow

5,615
2
29
43

score 7 · Answer 2 · answered Feb 03 '21 at 13:21

7

You need to add Internet permission in the AndroidManifest.xml. <uses-permission android:name="android.permission.INTERNET"/>

answered Feb 03 '21 at 13:21

Poujhit

116
2
5

That solved my months of struggling. I didn't expect it to solve my problem because I was already using Firebase libraries which needs internet connectivity. – Ataberk Oct 22 '21 at 23:01
3

@Ataberk Flutter project uses different AndroidManifest.xml for different modes(debug, profile and release). The release AndroidMainfest.xml file will not have internet permission. But the debug and profile mode's AndroidManifest.xml file will have coz Flutter needs it to communicate with the running application to allow setting breakpoints, to provide hot reload, etc. That is why in debug mode it would work properly but when you build the app for release, it wouldn't work properly. – Poujhit Oct 28 '21 at 07:27
That makes sense but problem exists in ios – Ataberk Oct 28 '21 at 14:13
After adding permission mine didnt work until I uninstalled and reinstalled the app again. So you can add the permission and try reinstalling the app – Don May 29 '23 at 13:45
So this is for IOS you are talking about right @Don – Poujhit May 30 '23 at 15:57
No ... not iOS, on Android. I dont know for iOS. You can try that too on iOS – Don May 31 '23 at 14:21

score 1 · Answer 3 · answered Apr 10 '20 at 04:20

There could be few possible reasons for it:

Have you installed the Google Font library using PubSpec Assist ?https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist. Initially when I installed the plugin using this extension, it did not work (it should work but strangely it did not). So I installed the plugin in the usual way.
You need to restart your app in order for changes to take place. The changes in pubspec.yaml will not reflect on mere Hot Reload / Hot Restart.
You can rebuild the app using flutter clean first.

I'm not using `PubSpec Assist`,`flutter clean` and restart all, windows, vscode and the problem continues. — rubStackOverflow, Apr 10 '20 at 13:29

score 1 · Answer 4 · answered Apr 10 '20 at 15:30

1

Removing the app from the device and reinstalling it might solve your problem. It solved for me, when i was facing the same problem.

answered Apr 10 '20 at 15:30

Bagghi Daku

652
10
15

score 0 · Answer 5 · answered Oct 13 '22 at 04:36

0

The following worked for me.

Go to: File Select Invalidate Caches.. Wait for Dialog and check:

Clear file ...... Clear VCS Log ..... then press: Invalidate and Restart

Wait 5 or 10 minutes and be done.

answered Oct 13 '22 at 04:36

JhonaCode

51
4

score 0 · Answer 6 · answered Nov 05 '22 at 17:50

I faced this issue when setting the global font for the app. I set font style to app Theme like below.

void main(){
  runApp(
    MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: ThemeConstants.themeColorMaterial,
            textTheme: GoogleFonts.poppinsTextTheme(),
          ),
        ),
     ),
  }

The reason is google_fonts package works fetch on HTTP. Normally cannot happen async functions in the main method. So that we need to tell main method there are some asynchronous processes happening. For that, we can add the below code inside main method

WidgetsFlutterBinding.ensureInitialized();

======= after applying solution ========

void main() {
  WidgetsFlutterBinding.ensureInitialized(); //important

  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: ThemeConstants.themeColorMaterial,
        textTheme: GoogleFonts.poppinsTextTheme(),
      ),
    ),
  );
}

resources: https://stackoverflow.com/a/57775690/10827515

score 0 · Answer 7 · answered Jan 29 '23 at 15:58

0

For Android and MacOS network permission need to be explicitly added. And since google-fonts fetches data over the internet, it is required to add it.

Check out this URL: https://docs.flutter.dev/development/data-and-backend/networking#platform-notes

answered Jan 29 '23 at 15:58

Reitenator

1,075
13
13

Error: google_fonts was unable to load font

7 Answers7

The following worked for me.