[Impeller] fonts are blurry

[delfme]

I have found out an issue with rendering custom fonts.
Tested it on master 3.7.0-15.0.pre.16, ios 16.1, iphone 13 pro.

Steps to Reproduce

Sample repo available here, font files are inside assets folder.
https://github.com/delfme/impeller-custom-fonts

Main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'Poppins',
      ),
      home: const MyHomePage(title: 'Flutter Custom Fonts issue'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              children: const [
                Text(
                  'Custom Fonts rendering issue:\nSF Pro Text, Poppins, Arial rounded',
                  style: TextStyle(
                    color: Colors.red,
                  ),
                ),
                SizedBox(height: 20),

                ///[SF Pro]
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.w800,
                    fontFamily: 'SF-Pro-Text',
                  ),
                ),
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontFamily: 'SF-Pro-Text',
                  ),
                ),
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontFamily: 'SF-Pro-Text',
                  ),
                ),
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontFamily: 'SF-Pro-Text',
                    fontWeight: FontWeight.w400,
                  ),
                ),

                SizedBox(height: 50),

                ///[Poppins]
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.w700,
                  ),
                ),
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.w600,
                  ),
                ),
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Text("Hello World"),
                SizedBox(height: 50),

                ///[Arial rounded]
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontFamily: 'Arial',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Expected results:
Font should be rendered in high definition as in pic below (Impeller is not enabled)

Actual results:
Font is rendered in poor definition as in pic below (Impeller is enabled)

Flutter doctor:

[✓] Flutter (Channel master, 3.7.0-15.0.pre.16, on macOS 12.2 21D49 darwin-arm64, locale en-IT)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

[darshankawar]

Thanks for the report. Seeing same behavior as reported.

master flutter doctor -v

[!] Flutter (Channel master, 3.7.0-22.0.pre.9, on macOS 12.2.1 21D62 darwin-x64,
    locale en-GB)
    • Flutter version 3.7.0-22.0.pre.9 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 780563ce05 (4 hours ago), 2023-01-18 09:55:33 +0900
    • Engine revision f790304409
    • Dart version 3.0.0 (build 3.0.0-122.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[jonahwilliams]

Thanks for the report, we're tracking this issue in the following bug

Duplicate of #117428

[jonahwilliams]

Actually the issue in #117428 is slightly different, I'll leave this one open

[jonahwilliams]

We suspect this is due to a combination of linear sampling from the glyph atlas and potentially needing to "nudge" text boxes to lineup on physical pixels

[chinmaygarde]

From Sync: cc @bdero who said he'd take a look into this and has a good handle on whats happening.

[vital-edu]

I have also same issue, please have a look below image.

This issue was not fixed with the hotfix 3.7.1

I am having the same issue and this was mentioned on #119489 as well.

flutter doctor -v

[✓] Flutter (Channel stable, 3.7.1, on macOS 13.0.1 22A400 darwin-arm64, locale en-EE)
    • Flutter version 3.7.1 on channel stable at /Users/eduardo.cunha/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7048ed95a5 (20 hours ago), 2023-02-01 09:07:31 -0800
    • Engine revision 800594f1f4
    • Dart version 2.19.1
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/eduardo.cunha/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/eduardo.cunha/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2022.1)
    • Android Studio at /Users/eduardo.cunha/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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 11.0.15+0-b2043.56-8887301)

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

[✓] Connected device (3 available)
    • iPhone SE (3rd generation) (mobile) • B1355D90-2B3D-484F-98CF-F462899578BD • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)                     • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm64
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome 109.0.5414.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[flodaniel]

Still seeing this on 3.7.1

Without Impeller:

Impeller on 3.7.0

Impeller on 3.7.1

[felix-mittermeier]

Still seeing this on 3.7.1

Without Impeller:

Impeller on 3.7.0

Impeller on 3.7.1

Same for me. I wonder if #119292 really has been merged into 3.7.1 🤔

[jordanliu]

I have also same issue, please have a look below image.

This issue was not fixed with the hotfix 3.7.1

I am having the same issue and this was mentioned on #119489 as well.

flutter doctor -v

Same for me, it's not as blurry but it's still a very noticeable difference.

[bdero]

The thick text problem is being tracked here: #119234
The weird individual glyph transform problem is being tracked here: #119489

[github-actions]

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.