Custom Typeface in Android

Introduction

Although it would have been appreciated there is no easy way to set a default custom font in your Android application. Android as of Ice Cream Sandwich comes with a default typeface called Roboto, which in my opinion is a very good and appealing typeface. That being said there is often the situation where a custom typeface is required to give your application that particular look or branding. This post aims to show how to setup up a custom typeface for your application and what to think about while doing so. This post will be divided into these sections:

  • 1. Before we start
  • 2. Example
  • 3. Final thoughts
  • 4. References

1. Before we start

Hinder Memory Leaks

Loading the typface from assets everytime you want to use it will make you application leak memory unnecessarily.  A simple solution to this problem is to instantiate your fonts once using the singleton pattern. One logical location to instansiate your fonts is in your Application object. The instantiation of your typeface inside that class could look something like below:

private static Typeface customTypeface;

public Typeface getCustomTypeface() {
    if(customTypeface == null){
        //Only do this once for each typeface used
        //or we will leak unnecessary memory.
        customTypeface = Typeface.createFromAsset(getAssets(), PATH_TYPEFACE_CUSTOM);
    }
    return customTypeface;
}

Utility Class

My second tip would be to create a custom class Utility class to set fonts for your Views/TextViews. Often you end up with the situation where you want to set the typeface to several views or a view group. My utility class which you will find in the referenced source, has these two methods which pretty much is all I need:

public void setTypeFace(Typeface typeFace, TextView ... views);
public void setTypeFace(Typeface typeFace, ViewGroup parent);

Sub-Pixel Rendering

When you have set the custom font and look at it in the application it usually does not look very nice. That is because there is no sub-pixel renderings. This can easily be solved by setting a custom paint flag:

myTextView.setPaintFlags(tv.getPaintFlags() | Paint.SUBPIXEL_TEXT_FLAG);

Assets folder

The ideal place to put your typefaces would be in the assets folder as hinted by the load method Typeface.createFromAsset(,). To my satisfaction the Android API  can load both .otf and .ttf files. I place my typface files as shown in the screenshot below. Although there is ni requirement to place it in a subfolder as I did.

2. Example Implementation

Setting custom fonts for all textviews in a static layout

@Override
public void OnCreate(){
    super.onCreate();
    ViewGroup vg = (ViewGroup)getWindow().getDecoratorView();
    setTypeFace(MyApplication.defaultTypeface, vg);
}

public static void setTypeFace(Typeface typeFace, ViewGroup parent){
    for (int i = 0; i < parent.getChildCount(); i++) {
        View v = parent.getChildAt(i);
        if (v instanceof ViewGroup) {
            setTypeFace(typeFace, (ViewGroup) v);
        } else if (v instanceof TextView) {
            TextView tv = (TextView) v;
            tv.setTypeface(typeFace);
            //For making the font anti-aliased.
            tv.setPaintFlags(tv.getPaintFlags() | Paint.SUBPIXEL_TEXT_FLAG);
        }
    }
}

These images show what the difference Paint.SUBPIXEL_TEXT_FLAG make. I would advice you downloading these images and switching between them in a previewer to see the differences as it is hard to distinguish in images below.

Subpixel Rendering On
Subpixel Rendering Off
Subpixel Rendering Mix

3. Final Thoughts

The effect of using the paint flag [Paint.SUBPIXEL_TEXT_FLAG]might not be that apparent in these screenshots at first glance, but if you download the images and flip between them it is more noticeable. Worth noting is that a higher density display will gain less from using subpixel rendering, that being said my Samsung Galaxy S3 still gets a noticeable improvement most typefaces. I hope my experiences have shed some light on the topic. Feel free to to share your feedback as well as lessons you’ve learnt on this topic.

Side Note: Typeface or Font?

I noticed that there is a confusion between these two, not only among other but I had to look it up myself. Since I looked it up I though I could share my short explanation: A typeface is synonymous with font family, where as  a font is a specific version of that typeface. Example: Typeface: Helvetica Font: Helvetica-regular or Helvetica-bold There are other analogies for font and typeface but this one worked for me. With the age of computers where a font can be generated at any size from a mathematically defined typeface the need to distinguish these two has faded away. This is however not true for the so called bitmap fonts for obvious reasons. If you want a more thorough explanation wikipedia serves one here: http://en.wikipedia.org/wiki/Font

4. References

Example application: https://github.com/jayway/android-typeface-example.git

This Post Has 13 Comments

  1. Great article. It is good that you mentioned about memory leaks with custom font text views which caused by native implementation of loading font.

    BTW. From now, I’ll track yours blogs articles, because they are great.

    1. Nice to see that you made a Chinese translation. I hope more people can benefit from this that way.

  2. On font vs. typeface:

    Typeface refers to a design on a font, e.g. Helvetica as you say, whereas font refers to a specific ‘implementation’, for instance a set of metal pieces for printing, or a .ttf-file. It doesn’t refer to a specific point size however.

    An analogy could be a song vs. an mp3-file or physical recording.

    1. Yes you got a good point there. I will update the post accordingly.
      I think a good example could be:
      Helvetica = Typeface
      Helvetica-Bold, Helvetica-Italic = Fonts

      1. Helvetica bold and Helvetica italic are different type faces, but part of the same type-family :)

        At one point in time, a font referred to a specific font size, but this was at the point of metal type, with subtle differences in various point sizes.

        Post-desktop publishing, font typically refers to the _implementation_ of a specific style/width.

        This is all pretty confusing, but what we should all agree on at least is: Helvetica is a nice typeface, not a nice font!

  3. Very great post. I just stumbled upon your blog and wanted to say that I’ve truly enjoyed browsing your weblog posts. In any case I will be subscribing for your rss feed and I’m hoping you write once more soon!

  4. a quick note: not quite sure what you are referring to in your article is a “memory leak”. to be inefficient with memory is not the same thing as to have a “memory leak”.

    … but thanks for the article

  5. I like your suggestion about using the Application class to avoid leaking TypeFaces. But why are you setting these variable instances as static? Static would cause leaks in and of themselves.

Leave a Reply

Close Menu