Google NotoSans 字体在 Flutter Web 应用程序中的 iOS 上无法正确显示

Question

Situation : I am creating a flutter web app , which makes use of Google Fonts' NotoSans font to display English and Devanagari (Hindi) script. The app displays correctly on Chrome in MacOS.

Complication : On iOS (Iphone 11) text is not displaying correctly. See gif below:

I am using flutter 3.0.2 and this is a relevant excerpt from my pubspec.yaml file:

 # These dependencies get packaged with the app during build dependencies: flutter: sdk: flutter # For multilingual flutter_localizations: sdk: flutter intl: ^0.17.0 # Get access to many fancy fonts and icons google_fonts: ^3.0.1 # These dependencies do not get packaged with the app during build dev_dependencies: flutter_test: sdk: flutter # For clean formatting flutter_lints: ^2.0.1 # The following section is specific to Flutter. flutter: # Add icons from material design font uses-material-design: true # Internationalization generate: true # Add images assets: - assets/images/ - assets/images/brands/ - assets/images/flags/ - assets/icons/ - assets/videos/ - assets/fonts/ # Add personalized Strawmerry icons fonts: - family: NotoSans fonts: - asset: assets/fonts/NotoSansRegular.ttf - asset: assets/fonts/NotoSansBold.ttf weight: 700 - asset: assets/fonts/NotoSansItalic.ttf style: italic

This is an excerpt from my theme.dart file, in which I declare my text theme.

 class StrawmerryTheme { ThemeData get theme => ThemeData( textTheme: TextTheme( // Currently only used for starting page sub-title // titleSmall: GoogleFonts.notoSans( // fontSize: 34, // fontWeight: FontWeight.bold, // letterSpacing: 0.25, // color: Colors.black // ), titleSmall: const TextStyle( fontFamily: 'NotoSans', fontSize: 34, fontWeight: FontWeight.bold, letterSpacing: 0.25, color: Colors.black), // Currently used for page titles headlineLarge: TextStyle( fontFamily: 'NotoSans', fontSize: 34, fontWeight: FontWeight.bold, letterSpacing: 0.25, color: Colors.grey.shade800, ), // Currently used for page section titles headlineMedium: TextStyle( fontFamily: 'NotoSans', fontSize: 24, fontWeight: FontWeight.bold, letterSpacing: -1, color: Colors.grey.shade800, ), headlineSmall: TextStyle( fontFamily: 'NotoSans', fontSize: 20, fontWeight: FontWeight.bold, letterSpacing: 0.15, color: Colors.grey.shade800, ), // Main body text bodyMedium: TextStyle( fontFamily: 'NotoSans', fontSize: 16, fontWeight: FontWeight.normal, letterSpacing: 0.5, color: Colors.grey.shade800, ), // Used for units bodySmall: TextStyle( fontFamily: 'NotoSans', fontSize: 12, fontWeight: FontWeight.normal, letterSpacing: 0.4, color: Colors.grey.shade800, ), // Used for buttons labelMedium: const TextStyle( fontFamily: 'NotoSans', fontSize: 22, fontWeight: FontWeight.normal, letterSpacing: 1.0, color: Colors.white, ), ), ), }

Question : Any idea how to fix this?

Answer 1

I figured this one out. The problem only occurred for me when using the html web renderer when building, like such:

flutter build web --web-renderer html

After switching to canvaskit everything worked fine:

flutter build web --web-renderer canvaskit