{
  "$type": "site.standard.document",
  "canonicalUrl": "https://segunfamisa.com/posts/custom-fonts-with-android-support-library",
  "description": "Exploring how to implement custom fonts on Android by backporting fonts in XML using the support library",
  "path": "/posts/custom-fonts-with-android-support-library",
  "publishedAt": "2017-09-04T10:00:00.000Z",
  "site": "at://did:plc:a5mekodp4afxadlpr4hp2wci/site.standard.publication/3mm2oa7vz5327",
  "tags": [
    "android",
    "tutorial",
    "fonts",
    "support library",
    "oreo"
  ],
  "textContent": "Android Oreo was officially unveiled a couple of weeks ago, and it introduces a lot\nof new and exciting features. If you haven't already, you should check the developers website\nfor the list of what's new in Android O.\n\nOne of the really interesting features for developers is the new way to apply fonts\nright there in your XML files.\n\nThat's great right? Yup. Except that it works out of the box for only API 26 (Android O).\n\nIn this post, we will look at how to backport this awesome feature to older versions - down to API 14 using the Support Library 26.\n\nCustom Fonts on Android - Old Ways.\n\nPreviously on Android, there were limited ways to use custom fonts on Android. The following techniques are the ones I consider the most popular ways of implementing custom fonts in Android:\n\n1. Custom Views\nOne would typically need a custom view that extends the equivalent view where trying to apply a font to. In the custom view, one would create a Typeface\nand then call setTypeface (or a similar method, that, sets the typeface).\nOne would also need to have the font file placed in the assets folder.\n\nThe code in the custom view typically looks like:\n\n2. Calligraphy Library\nThanks to some awesome developers, there is another approach to having custom fonts\nin your apps - and the library is called Calligraphy - https://github.com/chrisjenx/Calligraphy.\nThe usage is fairly straightforward, and the pitfalls are clearly identified. But\nas with every library, it comes with the penalty of adding extra dependencies thereby\nincreasing method count.\n\nCustom Fonts with Support Library - The New Way.\nThanks to the good folk at Google and their work on Android Support Library 26 it is now possible to declare fonts in XML - something\ncalled font families, and also programmatically without the need of an extra library\nbesides the support library (which you most likely already use in your app anyway).\n\nHow to\nIn order to implement this feature using the support library, there are a number of short and precise steps one has to go through.\n\ni. Add the fonts to the fonts resource directory\nJust like string and drawable resources, the fonts are now available as resources.\nFirst step in making this happen is to add the font files to the res/font folder\nin your project. This ensures that they are packaged as resources, and are easily\naccessible in a similar way we access other types of resources: @font/niceFont in XML\nor as R.font.niceFont in code.\n\nii. Create a font family\nFont family is something that was introduced in Android, and it is used to define\na group of fonts and their corresponding style. So the system can determine what\nfont resource to use for regular, bold and italic styles and weight configurations. A typical font family looks like this:\n\nNote\nA really important thing to note is that we had to define attributes using both android and app namespaces.\nThe app namespace is what ensures that the feature is backward compatible.\n\niii. Using the fonts\nNow that we have defined the fonts, we could either use it programmatically, directly in XML layouts, or via a style that will be applied to the view in the layout.\n\nLet's have a look at how we could use the custom fonts in each case.\n\na. Using the font programmatically\nWe can decide to use this font programmatically in a way quite similar to how we\nhave always been doing, except that we're not creating this Typeface\nfrom an \"asset\". Rather, we'll be getting it as a resource. Doing this programmatically\n(for backward compatibility) will look like:\n\nb. Using the font-family directly in the layout file\nYou can apply this font family created in step ii above directly in the layout file.\nUsing it will look something like this:\n\n{% highlight xml %}\n<TextView\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:text=\"Text\"\n    android:textStyle=\"bold\"\n    android:fontFamily=\"@font/app_font\" />\n{% endhighlight %}\n\nSomething worth noting here is that it appears that one can specify the fontFamily\nattribute using either the android or app namespace.\n\nThe catch here is that the\nandroid:fontFamily attribute is not available for API levels below API 16, while we're\ntrying to backport this feature all the way to API 14.\n\nTo go around this, gotcha, we can use the app namespace instead. However, there seems to\nbe another interesting discovery: Android Studio flags the app:fontFamily attribute as \"Unexpected namespace prefix app found for tag TextView\" as seen in the screenshot below,\nbut it seems to work for me regardless of what AS is saying.\n(Dear reader, I'd love to get your feedback if you're able to reproduce this weird behaviour too).\n\n<p align=\"center\">\n\t<img src=\"/images/textview-xml-font-as-error.png\"\n  alt=\"Android Studio showing app:fontFamily as error\">\n</p>\n\nc. Using the font-family via a style\nAnother usage of the font family is via a style (or text appearance). We could specify\nthe fontFamily attribute to use the font family created in step ii, and then in turn\nuse that as a text appearance or even style in the layout. Defining this in the styles.xml\nfile will look something like:\n\nWe can now use this TextAppearance style as a text appearance on our textviews accross the app. The usages will look something like:\n\nIt's interesting to note that the system is able to pick the appropriate font defined in the\n@font/app_font font family resource file that best fits the textStyle given to the view.\n\nResources and further reading\n Font resource (Android Developer website)\n Fonts in XML\n Downloadable fonts\n\nSummary\nIn summary, in this post, we have looked at how to implement backward compatible custom\nfonts in Android using the Support library 26.\n\n Want actual code? I have written a sample code that demonstrates everything approach discussed in this post.\nFeel free to check it out at https://github.com/segunfamisa/android-fonts-xml-sample.\n\n* Another font-related improvement in Android O worth looking at, in my opinion is the\ndownloadable fonts. This is really cool because it means you won't have to bundle the\nfont files with the app. Instead, you will specify which font provider (like Google Fonts) you want to retrieve them from, and apply the typeface on the desired view. Check the\nresources and further reading section for a direct link to the official docs.\n\nThank you so much for reading this post, please feel free to share if you found it helpful.\nAlso, please feel free to make corrections, suggestions and ask questions in the comment section at the bottom of the page.\n\nThanks to Efe, Michael and Moyin for reviewing this post. :tada:\n\nThanks,\nSegun.",
  "title": "Custom Fonts on Android with Android Support Library"
}