Search code examples
iosfontsflutter-web

Google NotoSans font not displaying correctly on iOS in flutter web app

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: enter image description here

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?

Solution

  • 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