Custom Font in Android renders differently in different APIs

benjamin davis picture benjamin davis · Jun 8, 2012 · Viewed 8k times · Source

I am using a custom .ttf font in my android app. I load it the usual way:

myTypeface = Typeface.createFromAsset( getAssets(), "myTypeface.ttf");

then I assign my typeface within my activity... pretty straightforward stuff:

TextView tv = (TextView) findViewById(R.id.sample_text);
tv.setTextSize(12);
tv.setTypeface(App.myTypeface);

The problem I'm running into is that on some devices using later APIs (I've specifically noticed it in an emulator for the Asus Transformer), the text looks slightly bolder, less uniform in width, and more jumbled in vertical alignment. By that last part I mean that some characters are placed vertically a bit higher or lower than others, giving a little bit of a roller-coaster feel to the text.

Consider the screen shots below

This is text rendered on an emulator with the same resolution and dpi as a Transformer, but using Google API level 8.

i45.tinypic.com/142toud.png

Looks pretty standard, right?

Now consider the text rendered in an emulator with the same resolution and dpi, but using Google API level 15:

i47.tinypic.com/24zhekn.png

At first the text may look similar, though you might notice it seems a bit bolder. However, look at the "c" in "quick". You will notice that it sits lower, and is taller, than the "c" in the first rendering. You will also notice that if you look at the bottom of the characters in the word "quick", they are not aligned on the bottom.

These issues may seem small, but on screens with lots of text, it starts to look really unprofessional.

Anybody seen this, or have an explanation? I'd love to make the text look uniform in later APIs.

Thanks so much for your time!

Answer

Kevin Coppock picture Kevin Coppock · Jun 8, 2012

Okay, so it seems to have just the following flags applied in both instances:

Paint.DEV_KERN_TEXT_FLAG
Paint.ANTI_ALIAS_FLAG

Try doing this, and see if the results are any different (not necessarily improved, but even noticeable at all):

textView.setPaintFlags(textView.getPaintFlags() | Paint.SUBPIXEL_TEXT_FLAG);