title: Google NotoSans font not displaying correctly on iOS in flutter web app
body: <p><strong>Situation</strong>: 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.</p>
  <p><strong>Complication</strong>: On iOS (Iphone 11) text is not displaying correctly. See gif below:
  <a href="https://i.stack.imgur.com/RqlsL.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RqlsL.gif" alt="enter image description here" /></a></p>
  <p>I am using flutter 3.0.2 and this is a relevant excerpt from my pubspec.yaml file:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code># 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</code></pre>
  </div>
  </div>
  </p>
  <p>This is an excerpt from my theme.dart file, in which I declare my text theme.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>class StrawmerryTheme {
    ThemeData get theme =&gt; 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,
        ),
      ),
    ),
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Question</strong>: Any idea how to fix this?</p>