QML font rendering incorrectly - missing fine details

Question

So as the title says, i have font rendering issue with QML project, using macOS.

Image example

The font is in assets/fonts (local folder), and it's being added in main.qml through FontLoader, like 3 other fonts. All fonts but this one are rendering correctly, and as you can see in screenshot above, my system reads font correctly. All fonts i've loaded are .otf, i don't know if that is relevant to my issue.

Expected result:

My sample QML code is:

Text { 
    id: welcomeMessageTop 
    color: "blue" 
    text: "ASDFGHJKLT" 
    font.family : 
    fontLoaded.name 
    font.pixelSize: 110 
    font.letterSpacing: -0.4 
} 

Thanks

Answer 1

I suspect this may have something to do with the default approach to efficienty render dynamically resizable text in QML, which is via distance fields. It is a great way to have smoothly resizing raster graphics and get almost vector graphics like results, but it does eat away small details that do not stand out enough relative to the character size.

You should try setting renderType: Text.NativeRendering for the Text element to see if that helps.

Also, IIRC native text rendering looks pretty bad if your text is dynamic - if it is animated, rotated or its size changes dynamically. It is mostly useful for static stuff, but I suppose the text can be rendered at a larger size to an invisible item, and that item can be used as a shader source which then you can apply dynamic behavior and get results that are not horrific.

In the case you are going to be resizing or rotating the text, note that there are also some env vars that can be modified to tweak the distance field generation and get a better result:

  qputenv("QT_DISTANCEFIELD_DEFAULT_BASEFONTSIZE", "64");
  qputenv("QT_DISTANCEFIELD_DEFAULT_SCALE", "16");
  qputenv("QT_DISTANCEFIELD_DEFAULT_RADIUS", "80");

The problem with that is it doesn't seem to be possible to tweak on a per-font basis, so if you increase the distance field resolution, it will end up eating more memory even for fonts that don't need it.