Skip to content

[Impeller] fonts are blurry #118613

@delfme

Description

@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)
IMG_good

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

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

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work liste: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.7Found to occur in 3.7has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

Relationships

None yet

Development

No branches or pull requests

Issue actions