Flutter Fonts are not rendering correctly, Antialiasing is doubled on desktop

[SuperGNUS]

Steps to Reproduce

Use the code below in a widget to render the text in MacOS, Web and compare to Photoshop or Sketch rendering of the text.

Details

Render text with Kerning is not working and rendering system is double sampling antialiasing on fonts on MacOS at least.
Kerning is not working on web rendering either.

The following screen shot shows the difference, the top text is from the Sketch app and rendered at size on a Mac.

The second set of text is rendered in the MacOS APP generated code. My guess is that the TTF font is being rendered with antialiasing to a texture and then the image is placed BLIT'd as a texture also with antialiasing resulting in thicker font. This is pretty clear on the 'our' of 'Your' at the top of each letter and also does not happen with the web renderer. This oversampling causes blurred letters.

The third line of text is the web rendered code and you can see the Kerning is not correct and is ignored but at least the sampling is correct.

Expected results:

All text in the fonts should match layout and kerning.

        Positioned(
          left: 16.895999999999958,
          bottom: 69.69599999999997,
          child: Container(
              width: 229.00,
              height: 19.01,
              child: Text(
                'Your Genius Token address:',
                style: TextStyle(
                  fontFamily: 'Prompt',
                  fontSize: 12.672,
                  fontWeight: FontWeight.w500,
                  fontStyle: FontStyle.normal,
                  letterSpacing: 0.32,
                  color: Colors.white,
                ),
                textAlign: TextAlign.left,
              )),
        ),

[TahaTesser]

Hi @GeniusVentures
Can you please provide your flutter doctor -v your flutter run --verbose and a complete reproducible minimal code sample
Thank you

[AleksMx]

I have an error with fonts from > flutter-1.20-candidate.8 version to. Compare fonts between 1.20 and 1.22 versions in the latest Chrome.

Good 1.20 version:

Bad 1.22 version:

I don't understand why it was necessary to change the font from Roboto to Segoe UI.

[SuperGNUS]

Hi @GeniusVentures
Can you please provide your flutter doctor -v your flutter run --verbose and a complete reproducible minimal code sample
Thank you

flutter doctor -v

[✓] Flutter (Channel unknown, 1.20.0, on Mac OS X 10.14.6 18G87, locale en-US)
    • Flutter version 1.20.0 at /thirdparty/flutter
    • Framework revision 9d58a87066 (4 months ago), 2020-05-22 22:37:01 -0700
    • Engine revision 9ce1e5c5c7
    • Dart version 2.9.0 (build 2.9.0-10.0.dev 7706afbcf5)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /SSDevelopment/Development/ThirdParty/Android
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME =/ThirdParty/Android
    • Java binary at: /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_265-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3.1, Build version 11C504
    • CocoaPods version 1.9.3

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

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] IntelliJ IDEA Ultimate Edition (version 2020.2.2)
    • IntelliJ at /Users/<user>/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 49.0.4
    • Dart plugin version 202.7319.5

[!] VS Code (version 1.49.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (5 available)
    • Android SDK built for x86 64 • emulator-5554                        • android-x64    • Android 6.0 (API 23) (emulator)
    • iPhone 11 Pro Max            • 587F01B8-3759-4D54-ACF9-3548CDB943F8 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)
    • macOS                        • macOS                                • darwin-x64     • Mac OS X 10.14.6 18G87
    • Web Server                   • web-server                           • web-javascript • Flutter Tools
    • Chrome                       • chrome                               • web-javascript • Google Chrome 85.0.4183.121

Complete project is here: https://github.com/genius-ventures/FontTest, it includes the sketch app file that the code was derived from.

All 4 app runs where in Intellij, so there isn't any run command with verbose output, but here's a screen shot of the 4 devices that where launched to show the issues

Left to Right Images

Android x86/64 Pixel XL API 23 (looks correct for Antialiasing and possibly kerning),
iPhone X11 ((looks correct for Antialiasing and possibly kerning).
MacOS version (Antialiasing is doubled and can be seen with Thin and Extra light font is thicker as a result of 2nd AntiAlias step, Kerning can cause extra space on right side if font rectangle is tightly wrapped to font)
Chrome/Web ( (Antialiasing is doubled and can be seen with Thin and Extra light font is thicker as a result of 2nd AntiAlias step, Kerning can cause extra space on right side if font rectangle and is clipping some of the fonts. is tightly wrapped to font)

This is a zoom in of the fonts between iPhone X11 and MacOS, showing the double antialiasing on Desktop, hence causing the font to look heavier because of the double sampling.

[SuperGNUS]

Here's the 4 device runs with flutter -v -d <devicename> > <devicename>-verbose.txt

macos-verbose.txt
iPhone-verbose.txt
chrome-verbose.txt
android-verbose.txt

[TahaTesser]

I can reproduce the difference on the lateststable

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.0, on Mac OS X 10.15.7 19H2, locale en-GB)
    • Flutter version 1.22.0 at /Users/tahatesser/Code/flutter_stable
    • Framework revision d408d302e2 (6 days ago), 2020-09-29 11:49:17 -0700
    • Engine revision 5babba6c4d
    • Dart version 2.10.0

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 50.0.1
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

[yjbanov]

On the web, when rendering to HTML we don't have much control over this. The behavior is mostly browser-specific.

We can control this in the CanvasKit renderer. However, this is not web-specific, so we'll probably go with whatever Flutter+Skia decides for mobile/desktop.

[gspencergoog]

We should test these fonts look like in Chrome, but not in a Flutter app, on the same platform to see if this is just Skia behavior, or if Flutter is doing something different (and wrong).

[SuperGNUS]

The web is not doubling the antialiasing as far as I could tell. I would focus on the Skia behavior as mentioned. I'm an expert at 3d graphics (wrote my own 3d engine, worked for nVidia for years). I might clone the skia repo and see if I can find the problem. I've fixed a bunch of these in the past with cocos2d-x and other games, so I can probably find and fix it fairly quickly.

[SuperGNUS]

OK, this seems to be a skia issue maybe, and possibly only on OSX, skia is using CoreText to render fonts and not FreeType or other systems like Android, Linux, etc.

I looked at the code briefly, but can't get it to compile, but they are probably setting some sort of edge antialiasing or sub-pixel accurate anti-aliasing. Here's the difference between a flutter osx app and another app rendering the same text. You can see the fonts are much thicker looking because of the double anti-aliasing.

I guess it should go to the skia folks.

[rydmike]

I have noticed this issue with the slight variation in font rendering sharpness on Windows platform as well.

With DomCanvas Web fonts being the most fuzzy version, SKIA fonts on Web CanvasKit next in line, followed by SKIA fonts on Windows desktop and finally just Windows system fonts being the sharpest.

If it is of any use and interest I could try to produce some zoomed examples of them all as well.

Generally though I am glad the issue is now recognized.

The Skia fonts on Web and Windows Desktop are pretty good, almost passable, but the DomCanvas Web font renderings are still imo too fuzzy, they used to be even worse, they are better now than they were in earlier days, but I can still usually tell just by looking at the render of the text if an app running on Windows in a browser was built with DomCanvas or CanvasKit.

[Aurora12]

Hey guys, any progress on this? Any ideas?

This is a blocker for our project because we need to present a lot of text and the font is rendered very differently to how it looks in other apps on MacOS.

We've come across a project that apparently dates back to the experimental days of flutter embedding: https://feather-apps.com/ . If you take a look at the test app there, you can see a typography test. The text is rendered perfectly fine within that app.

This is what it looks like in the feather app:

[seanmc86]

Experiencing the same issue deploying to macOS, and this is definitely a blocker for us.

I have tested with a sample application using three variations:

1. Fonts from included assets in the pubspec
2. Fonts without the included assets
3. Google Fonts package to download at runtime

All of the text on screen is notably blurred relative to the same text shown in something like Figma. Here is an example screenshot of the findings below. The first line explains what font is being used, the second is how this font looks in the Flutter application, and the third line is how the equivalent looks in Figma. All of these examples are asset fonts, with the exception of Lato_regular and Roboto_regular, which are from GoogleFonts. Interestingly also, the SF Pro Display text seems to have much different letter spacing (it's using 0.0 in the application, but equates to roughly 6.2% in Figma).

[feinstein]

I am also seeing this on Windows.

[TahaTesser]

Preview

windows	macos	linux

Reproduced the issue using the following minimal code sample

minimal code sample

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.alarm,
              ),
              Icon(
                Icons.alarm_on,
              ),
              Icon(
                Icons.alarm_off,
              ),
              Icon(
                Icons.alarm_add,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Reproduced on the following channels

stable	master
✅	✅

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.6, on macOS 11.3 20E232 darwin-x64, locale
    en-GB)
    • Flutter version 2.0.6 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 1d9032c7e1 (13 days ago), 2021-04-29 17:37:58 -0700
    • Engine revision 05e680e202
    • Dart version 2.12.3
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1
[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/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.8+10-b944.6916264)
[✓] VS Code (version 1.56.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.22.0
[✓] Connected device (3 available)
    • Taha's iPhone (mobile) • 00008020-001059882212002E • ios            • iOS
      14.5.1
    • macOS (desktop)        • macos                     • darwin-x64     •
      macOS 11.3 20E232 darwin-x64
    • Chrome (web)           • chrome                    • web-javascript •
      Google Chrome 90.0.4430.212
    ! Error: Taha's iPhone is busy: Copying cache files from device. Xcode will
      continue when Taha's iPhone is finished. (code -10)
• No issues found!

[✓] Flutter (Channel master, 2.3.0-2.0.pre.163, on macOS 11.3 20E232 darwin-x64,
    locale en-GB)
    • Flutter version 2.3.0-2.0.pre.163 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 298f18b592 (7 hours ago), 2021-05-12 20:50:14 -0700
    • Engine revision a339374296
    • Dart version 2.14.0 (build 2.14.0-109.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1
[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/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.8+10-b944.6916264)
[✓] IntelliJ IDEA Community Edition (version 2021.1.1)
    • IntelliJ at /Volumes/Extreme/IntelliJ IDEA CE.app
    • Flutter plugin version 55.1.5
    • Dart plugin version 211.7233
[✓] VS Code (version 1.56.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.22.0
[✓] Connected device (3 available)
    • Taha's iPhone (mobile) • 00008020-001059882212002E • ios            • iOS
      14.5.1
    • macOS (desktop)        • macos                     • darwin-x64     •
      macOS 11.3 20E232 darwin-x64
    • Chrome (web)           • chrome                    • web-javascript •
      Google Chrome 90.0.4430.212
    ! Error: Taha's iPhone is busy: Copying cache files from device. Xcode will
      continue when Taha's iPhone is finished. (code -10)
• No issues found!

[mateusfccp]

I noticed this when making our fonts .otf. Previously, when we were using icons directly with SVG, they were rendered properly. When I generated an .otf to use with IconData, it seemed like it was bold when testing on macOS.

Fortunately, we are not deploying to desktop, so it's not a huge problem.

[Lootwig]

This issue makes widget tests with golden images useless when not running on the platform the goldens were created on.

I.e. flutter test --update-goldens on windows -> flutter test succeeds on windows, fails on mac

[pouyakary]

I've been running into a rendering problem with the Lexend font and our custom icon font in which some things are lighter or bolder. I don't know if it's this problem exactly but if you look at this screen shot, there are two problems: Lexend is rendered lighter (by I guess 50~70 units) on every size, and then our custom font has its engravings rendered lighter if you look which is kinda this issue but feels the oppsite:

• 1 Icon Fonts
• 2 XD design files
• 3 Flutter app

[yhojann-cl]

Any update? same issue on GNU/Linux, the texts are blurred in desktop and mobile versions but works fine in web version.

[pouyakary]

Yeah, this bug seems like a pretty great deal. Everything we design eventually gets crushed when coded and all of them get to look broken.

[amirjani]

please fix this, it's a pretty big problem when you face corrupted fonts on different devices.

[pouyakary]

So, a very ironic thing. We discovered that while the fonts are usually rendered heavier, on the iPad they are rendered lighter 🙃 So I had to decrease each typeface weight by one hundred units so that when Flutter rendered them wrong, they look like the design we had. Now on iPad they are rendered a hundred units lighter and not heavier :)) thus we having them set a hounded units lighter has resulted our designs to be two hounded units lighter :)))) some of them are becoming invisible to naked eye!

I honestly have no idea what should we do here :))) but I'm sure it'll take some huge refactoring. Please do think about something here!

[parthjshah95]

Is there an update on this? I have a web-app where the fonts look fine on desktop browsers, but looks very different (thinner or bolder) on iOS and Android mobile browsers. Possibly because it uses html renderer on mobile browsers instead of canvas kit? It makes my website looks broken, please help!