Use OTF instead of TTF - custom font anti-aliasing for Android
In a recent react native project, a custom font file in .ttf that merged a Chinese typeface and an English typeface looks blurry on Android while the same font file works well on iOS.
It reads like the printer was running out of ink. Strokes vary on thickness.
Upon testing different fonts shapes by updating fonts’ ascend and descend properties through the hhea.xml files and by installing the original font otf file, it proves that the original Chinese font file renders well with the OTF format and the problem should be with the merged font file.
Finally, by converting the .ttf font into .otf format, the converted .otf file renders well with anti-aliasing result.
It sounds like an easy solution. However, as of we were lack of enough custom font format knowledge for Android rendering, it took weeks to find out what’s wrong.
In the digital world, developers and designers should work like one detective to figure out cases.
Reference
OTF is more likely to be a “better” font, as it supports more advanced typesetting features (smallcaps, alternates, ligatures and so on actually inside the font rather than in fiddly separate expert set fonts). It can also contain either spline (TTF-style) or Bezier (PostScript Type 1-style) curves, so hopefully you’re getting the shapes the font was originally designed in and not a potentially-poorer-quality conversion.
