[Web][CanvasKit]: Failed to load font Roboto at https://fonts.gstatic.com error

I created project before flutter 2 and was running on mobile but didn't test on web but now when flutter 2 came out I upgraded and tried to test on chrome but got uncolored screen with my two text fields but texts doesn't show, so I created new project and runned the same issue came up, the FloatingActionButton is showing but the centered text is not showing but in emulator is working fine. You can get the real project I wanted to run here and the new flutter project here

my flutter doctor -v
[✓] Flutter (Channel stable, 2.0.1, on Mac OS X 10.15.7 19H114 darwin-x64, locale en-US)
• Flutter version 2.0.1 at /Users/addow/Developer/flutter
• Framework revision c5a4b40 (4 days ago), 2021-03-04 09:47:48 -0800
• Engine revision 40441de
• Dart version 2.12.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
• Android SDK at /Users/addow/Library/Android/sdk
• Platform android-30, build-tools 30.0.1
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.1, Build version 12A7403
• CocoaPods version 1.10.1

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 50.0.1
• Dart plugin version 193.7547
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.53.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.20.0

[✓] Connected device (2 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)
• Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.82

• No issues found!

@EngAddow
Cloned your real project and ran it using latest stable (2.0.1) which rendered the screen properly without any issues for both (canvaskit and html):

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.1, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.0.1 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision c5a4b4029c (4 days ago), 2021-03-04 09:47:48 -0800
    • Engine revision 40441def69
    • Dart version 2.12.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.54.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (3 available)
    • SM A260G (mobile) • 5200763ebcfa861f • android-arm    • Android 8.1.0 (API
      27)
    • macOS (desktop)   • macos            • darwin-x64     • Mac OS X 10.15.4
      19E2269 darwin-x64
    • Chrome (web)      • chrome           • web-javascript • Google Chrome
      88.0.4324.192

! Doctor found issues in 1 category.

Try to run flutter clean or flutter pub cache repairand thenflutter run -d chrome` to see if it helps.

I runned flutter clean and re-run again but the result is same but vs code stops at breakpoint , the following is vs code log.

log

packages/flutter_secure_storage/flutter_secure_storage.dart 46:18                read
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54               runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5               _async
packages/flutter_secure_storage/flutter_secure_storage.dart 40:23                read
packages/credentials_management/src/blocs/auth/auth_bloc.dart 54:42              _getToken
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54               runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5               _async
packages/credentials_management/src/blocs/auth/auth_bloc.dart 53:27              [_getToken]
packages/credentials_management/src/blocs/auth/auth_bloc.dart 20:27              mapEventToState
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 330:40              runBody
dart-sdk/lib/async/schedule_microtask.dart 40:11                                 _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                                  _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15              <fn>
    at Object.throw_ [as throw] (http://localhost:50306/dart_sdk.js:5032:11)
    at http://localhost:50306/packages/bloc/src/bloc_observer.dart.lib.js:222:21
    at auth_bloc.AuthenticationBloc.new.onError (http://localhost:50306/packages/bloc/src/bloc_observer.dart.lib.js:223:28)
    at _RootZone.runBinaryGuarded (http://localhost:50306/dart_sdk.js:37034:11)
    at sendError (http://localhost:50306/dart_sdk.js:30966:26)
    at _BroadcastSubscription.new.[_sendError] (http://localhost:50306/dart_sdk.js:30983:11)
    at _BroadcastSubscription.new.[_addError] (http://localhost:50306/dart_sdk.js:30909:27)
    at http://localhost:50306/dart_sdk.js:31609:34
    at _SyncBroadcastStreamController.new.[_forEachListener] (http://localhost:50306/dart_sdk.js:31459:13)
    at _SyncBroadcastStreamController.new.[_sendError] (http://localhost:50306/dart_sdk.js:31608:31)
    at _SyncBroadcastStreamController.new.[_addError] (http://localhost:50306/dart_sdk.js:31437:25)
    at _RootZone.runBinaryGuarded (http://localhost:50306/dart_sdk.js:37034:11)
    at sendError (http://localhost:50306/dart_sdk.js:30966:26)
    at _ForwardingStreamSubscription.new.[_sendError] (http://localhost:50306/dart_sdk.js:30983:11)
    at _ForwardingStreamSubscription.new.[_addError] (http://localhost:50306/dart_sdk.js:30909:27)
    at _ForwardingStreamSubscription.new.[_addError] (http://localhost:50306/dart_sdk.js:34968:25)
    at _MapStream.new.[_handleError] (http://localhost:50306/dart_sdk.js:34926:24)
    at _ForwardingStreamSubscription.new.[_handleError] (http://localhost:50306/dart_sdk.js:34993:38)
    at _RootZone.runBinaryGuarded (http://localhost:50306/dart_sdk.js:37034:11)
    at sendError (http://localhost:50306/dart_sdk.js:30966:26)
    at _ControllerSubscription.new.[_sendError] (http://localhost:50306/dart_sdk.js:30983:11)
    at async._DelayedError.new.perform (http://localhost:50306/dart_sdk.js:34251:27)
    at _StreamImplEvents.new.handleNext (http://localhost:50306/dart_sdk.js:34328:15)
    at async._AsyncCallbackEntry.new.callback (http://localhost:50306/dart_sdk.js:34089:16)
    at Object._microtaskLoop (http://localhost:50306/dart_sdk.js:37333:13)
    at _startMicrotaskLoop (http://localhost:50306/dart_sdk.js:37339:13)
    at http://localhost:50306/dart_sdk.js:33110:9

@EngAddow
On what channel did you create the project before upgrading to Flutter 2 ? Does your same project work on latest master, dev or beta or get same issue on all channels ?

I created with stable and tested on master too but didn't test web that time,now mobile is fine but the web is the new and the problem and the flutter starter project is created with flutter. 2.0.1 stable and has the same issue.

@EngAddow
Can you try following:

flutter run -d chrome and flutter run -d chrome --web-renderer html directly from terminal instead of from vscode and see if issue still persists ?
Just to confirm if there's a pattern to this issue, can you create a new project and run on mobile browser first and then on desktop browser to see if you get same issue ?

Looking at https://github.com/flutter/engine/blob/d930dce5b4cf8013710a67e9411e45189fac2349/lib/web_ui/lib/src/engine/canvaskit/fonts.dart#L150

It turns out a local version of the font can be used by downloading it from google fonts and adding it as a font family to package.yaml (here I just downloaded the zip from https://fonts.google.com/specimen/Roboto and extracted it to google_fonts/)
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: google_fonts/Roboto-Regular.ttf

it works for me . thanks

Looking at https://github.com/flutter/engine/blob/d930dce5b4cf8013710a67e9411e45189fac2349/lib/web_ui/lib/src/engine/canvaskit/fonts.dart#L150

It turns out a local version of the font can be used by downloading it from google fonts and adding it as a font family to package.yaml (here I just downloaded the zip from https://fonts.google.com/specimen/Roboto and extracted it to google_fonts/)
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: google_fonts/Roboto-Regular.ttf

I am currently working on a Flutter web application that needs to be deployed to a client's IIS server. The deployment process was straightforward, similar to deploying a normal website. However, we have encountered an issue where the app does not load when the client's machine is not connected to the internet.

Upon investigation, I noticed that Flutter is fetching fonts from the internet by default, specifically from the URL: https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf. This external font dependency is causing the app to fail to load on the client's machine when there is no internet connection.

I am currently working on a Flutter web application that needs to be deployed to a client's IIS server. The deployment process was straightforward, similar to deploying a normal website. However, we have encountered an issue where the app does not load when the client's machine is not connected to the internet.

Upon investigation, I noticed that Flutter is fetching fonts from the internet by default, specifically from the URL: https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf. This external font dependency is causing the app to fail to load on the client's machine when there is no internet connection. Please guys help me because my client would use my app in LAN environment without internet connection.

This is the screenshot:

@harryterkelsen

This issue is assigned to @harryterkelsen but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

@harryterkelsen

This issue was assigned to @harryterkelsen but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.

The original issue reported was fixed recently. The extra issue of loading apps offline is covered in other issues already. I'm going to close this one as it's no longer actionable.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

[Web][CanvasKit]: Failed to load font Roboto at https://fonts.gstatic.com error #77580

37 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Web][CanvasKit]: Failed to load font Roboto at https://fonts.gstatic.com error #77580

Description

Activity

darshankawar commented on Mar 8, 2021

Add00w commented on Mar 8, 2021

darshankawar commented on Mar 9, 2021

Add00w commented on Mar 9, 2021

darshankawar commented on Mar 9, 2021

Add00w commented on Mar 9, 2021

darshankawar commented on Mar 9, 2021

37 remaining items

guopp commented on May 26, 2022

AtifShahzed commented on Oct 2, 2023

AtifShahzed commented on Oct 2, 2023

flutter-triage-bot commented on Nov 25, 2023

flutter-triage-bot commented on Feb 3, 2024

yjbanov commented on Feb 22, 2024

github-actions commented on Mar 8, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions