Skip to content

flutter web: use the device's default font instead of loading the large font filet from fonts.gstatic.com #163823

@2000calories

Description

@2000calories

Steps to reproduce

Image

Using flutter build web , the web app will load a 6.3MB notosanssc font file (a Chinese font) from fonts.gstatic.com.

Using flutter build web --web-renderer html can achieve this, the notosanssc font file is not loaded in this mode, althought the UI is a bit different using html render.

Start from flutter 3.29, the html render is removed. How to use the device's default font instead of loading the large notosanssc font from fonts.gstatic.com.

I know edit flutter_bootstrap.js can change fonts.gstatic.com to other source, but the font file is large, is there a way to stop loading the font?

onEntrypointLoaded: function (engineInitializer) {
    engineInitializer.initializeEngine({
      // Load local fallback fonts if needed.
      fontFallbackBaseUrl: ''
    }).then(function (appRunner) {
      appRunner.runApp();
    });
  }

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      locale: Locale('zh'),
      home: Scaffold(
        body: Center(
          child: Text('你好'),
        ),
      ),
    );
  }
}

What target platforms are you seeing this bug on?

Web

OS/Browser name and version | Device information

Google Chrome Version 133.0.6943.99 (Official Build) (arm64)

Does the problem occur on emulator/simulator as well as on physical devices?

Yes

Logs

No response

Flutter Doctor output

[✓] Flutter (Channel stable, 3.27.4, on macOS 15.1.1 24B91 darwin-arm64, locale en-HK)
• Flutter version 3.27.4 on channel stable at /Users/huangyongchang/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision d8a9f9a (3 weeks ago), 2025-01-31 16:07:18 -0500
• Engine revision 82bd5b7209
• Dart version 3.6.2
• DevTools version 2.40.3

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /Users/huangyongchang/Library/Android/sdk
• Platform android-34-ext8, build-tools 33.0.1
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16C5032a
• CocoaPods version 1.15.2

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

[✓] Android Studio (version 2024.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 17.0.11+0-17.0.11b1207.24-11852314)

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

[✓] Connected device (3 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 15.1.1 24B91 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.1.1 24B91 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 133.0.6943.99

[✓] Network resources
• All expected network resources are available.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: buildBuilding flutter applications with the toolplatform-webWeb applications specificallyteam-webOwned by Web platform teamtoolAffects the "flutter" command-line tool. See also t: labels.triaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions