Post
Ask Question

Custom Fonts in Android

Every application in android uses there on fonts to make the UI better. Here i am going to tell you how we can use custom fonts in our application. For adding custom font in our application, we need to first copy our fonts in to the asset folder. In Android studio there won't be Asset folder by default, for creating it right click on the app folder go to New->Folder->Asset Folder this will create the asset folder in our Android Studio application. Now copy all your fonts in to the asset folder that you have created.

We don't need to load font every time for setting from the asset folder, this will create memory leak. For avoiding this we need to create singleton class that will load the fonts only one time and we can apply this fonts to our ui views directly by the java code. First create your activity like the following , here i have two textviews, in this textviews i am trying to apply my custom fonts.

  1. <RelativeLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:paddingBottom="@dimen/activity_vertical_margin"  
  7.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  8.     android:paddingRight="@dimen/activity_horizontal_margin"  
  9.     android:paddingTop="@dimen/activity_vertical_margin"  
  10.     tools:context=".MainActivity">  
  11.     <TextView  
  12.         android:id="@+id/titleTxt"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="@string/hello_world" />  
  16.     <TextView  
  17.         android:id="@+id/summaryTxt"  
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         android:text="@string/hello_world" />  
  21. </RelativeLayout>  
Bind the views in to java class.
  1. TextView titleTxt = (TextView) findViewById(R.id.titleTxt);  
  2. TextView summaryTxt = (TextView) findViewById(R.id.summaryTxt);  
Now create the singleton class for loading and setting the fonts, defining the static variables and paths for the fonts in this class like the following,
  1. private static Typeface regularTypeFace = null;  
  2. private static Typeface boldTypeFace = null;  
  3. private static Typeface boldItalicTypeFace = null;  
  4. private static Typeface extraBoldTypeFace = null;  
  5. private static Typeface italicTypeFace = null;  
  6. private static Typeface lightTypeFace = null;  
  7. private static Typeface semiBoldTypeFace = null;  
  8. private static final String REGULAR_FONT = "Fonts/OpenSans-Regular.ttf";  
  9. private static final String BOLD_FONT = "Fonts/OpenSans-Bold.ttf";  
  10. private static final String BOLD_ITALIC_FONT = "Fonts/OpenSans-BoldItalic.ttf";  
  11. private static final String EXTRA_BOLD_FONT = "Fonts/OpenSans-ExtraBold.ttf";  
  12. private static final String ITALIC_FONT = "Fonts/OpenSans-Italic.ttf";  
  13. private static final String LIGHT_FONT = "Fonts/OpenSans-Light.ttf";  
  14. private static final String SEMI_BOLD_FONT = "Fonts/OpenSans-Semibold.ttf";  
  15. private FontUtils(Context mContext2)  
  16. {  
  17.     mContext = mContext2;  
  18. }  
  19. public synchronized static FontUtils getInstance(Context mContext)  
  20. {  
  21.     if (instance == null)  
  22.     {  
  23.         instance = new FontUtils(mContext);  
  24.     }  
  25.     return instance;  
  26. }  
  27. public Typeface getRegularTypeFace()  
  28. {  
  29.     if (regularTypeFace == null)  
  30.     {  
  31.         regularTypeFace = Typeface.createFromAsset(mContext.getAssets(), REGULAR_FONT);  
  32.     }  
  33.     return regularTypeFace;  
  34. }  
  35. public Typeface getBoldTypeFace()  
  36. {  
  37.     if (boldTypeFace == null)  
  38.     {  
  39.         boldTypeFace = Typeface.createFromAsset(mContext.getAssets(), BOLD_FONT);  
  40.     }  
  41.     return boldTypeFace;  
  42. }  
  43. public Typeface getBoldItalicTypeFace()  
  44. {  
  45.     if (boldItalicTypeFace == null)  
  46.     {  
  47.         boldItalicTypeFace = Typeface.createFromAsset(mContext.getAssets(), BOLD_ITALIC_FONT);  
  48.     }  
  49.     return boldItalicTypeFace;  
  50. }  
  51. public Typeface getExtraBoldTypeFace()  
  52. {  
  53.     if (extraBoldTypeFace == null)  
  54.     {  
  55.         extraBoldTypeFace = Typeface.createFromAsset(mContext.getAssets(), EXTRA_BOLD_FONT);  
  56.     }  
  57.     return extraBoldTypeFace;  
  58. }  
  59. public Typeface getItalicTypeFace()  
  60. {  
  61.     if (italicTypeFace == null)  
  62.     {  
  63.         italicTypeFace = Typeface.createFromAsset(mContext.getAssets(), ITALIC_FONT);  
  64.     }  
  65.     return italicTypeFace;  
  66. }  
  67. public Typeface getLightTypeFace()  
  68. {  
  69.     if (lightTypeFace == null)  
  70.     {  
  71.         lightTypeFace = Typeface.createFromAsset(mContext.getAssets(), LIGHT_FONT);  
  72.     }  
  73.     return lightTypeFace;  
  74. }  
  75. public Typeface getSemiBoldTypeFace()  
  76. {  
  77.     if (semiBoldTypeFace == null)  
  78.     {  
  79.         semiBoldTypeFace = Typeface.createFromAsset(mContext.getAssets(), SEMI_BOLD_FONT);  
  80.     }  
  81.     return semiBoldTypeFace;  
  82. }  
Now we need to set the fonts what ever we wants in to the main activity by following,
  1. titleTxt.setTypeface(FontUtils.getInstance(this).getBoldItalicTypeFace());  
  2. summaryTxt.setTypeface(FontUtils.getInstance(this).getLightTypeFace());  
Screen shots are below,