# Custom fonts formatting, the simple way

**Date**15 October 2016

The problem: given HTML formatted input, display the normal text with a custom font and special tags with another custom font.

To apply custom fonts [Calligraphy](https://github.com/chrisjenx/Calligraphy) is my preferred helper library.

It works great to apply one font to one TextView. It has CalligraphyTypefaceSpan to apply fonts to a range of characters. It has all the tools you need, you just need to know how to use them.

If you happen to know the position of the text you want to highlight, just follow the example Calligraphy provides:

```plaintext
SpannableStringBuilder sBuilder = new SpannableStringBuilder(); sBuilder.append("Hello!") // Bold this .append("I use Calligraphy"); // Default TextView font. // Create the Typeface you want to apply to certain text CalligraphyTypefaceSpan typefaceSpan = new CalligraphyTypefaceSpan(TypefaceUtils.load(getAssets(), "fonts/Roboto-Bold.ttf")); // Apply typeface to the Spannable 0 - 6 "Hello!" This can of course by dynamic. sBuilder.setSpan(typefaceSpan, 0, 6, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); setText(sBuilder, TextView.BufferType.SPANNABLE)
```

Having the input in HTML means you have to locate the formatting, get the position of the characters you need to highlight, remove the formatting, adjust the position, apply spans to the characters.

Doable, but terribly inefficient. Much better to do piggy back on the standard android HTML parsing and just adjust the parts you want.

```html
Spanned spanned = null; if(Build.VERSION.SDK_INT < Build.VERSION_CODES.N) { spanned = Html.fromHtml(getString(R.string.android_html_text)); } else { spanned = Html.fromHtml(getString(R.string.android_html_text), Html.FROM_HTML_MODE_COMPACT); } SpannableStringBuilder builder = new SpannableStringBuilder(spanned);
```

The [SpannableStringBuilder](https://developer.android.com/reference/android/text/SpannableStringBuilder.html) allows easy editing of all of Android’s spans. For a full list of spans, see subclasses in [CharacterStyle](https://developer.android.com/reference/android/text/style/CharacterStyle.html).

Grab the spans you are want to adjust from [SpannableStringBuilder](https://developer.android.com/reference/android/text/SpannableStringBuilder.html).

```html
StyleSpan[] styleSpanArray = builder.getSpans(0, builder.length(), StyleSpan.class); SuperscriptSpan[] superscriptSpanArray = builder.getSpans(0, builder.length(), SuperscriptSpan.class);
```

[StyleSpan](https://developer.android.com/reference/android/text/style/StyleSpan.html) formats the font, With a custom font it’s creating fake bold and fake italic characters from the regular characters. If kept, it would apply extra weight to your already bold font. It must go and be replaced by CalligraphyTypefaceSpan.

```plaintext
private void mCustomiseStyleSpan(StyleSpan[] spanArray, SpannableStringBuilder builder) { for(StyleSpan styleSpan : spanArray) { int start = builder.getSpanStart(styleSpan); int end = builder.getSpanEnd(styleSpan); CalligraphyTypefaceSpan typefaceSpan = null; switch (styleSpan.getStyle()) { case Typeface.NORMAL: typefaceSpan = new CalligraphyTypefaceSpan(mRegularTypeface); break; case Typeface.BOLD: typefaceSpan = new CalligraphyTypefaceSpan(mBoldTypeface); break; case Typeface.ITALIC: typefaceSpan = new CalligraphyTypefaceSpan(mItalicTypeface); break; case Typeface.BOLD_ITALIC: typefaceSpan = new CalligraphyTypefaceSpan(mBoldItalicTypeface); break; } builder.removeSpan(styleSpan); builder.setSpan(typefaceSpan, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); } }
```

Other spans can be kept, you add extra formatting on top. In the example we make SuperscriptSpan have a smaller font size by adding RelativeSizeSpan to the same characters.

```plaintext
private void mCustomiseScriptSpan(MetricAffectingSpan[] spanArray, SpannableStringBuilder builder) { for(MetricAffectingSpan metricAffectingSpan : spanArray) { int start = builder.getSpanStart(metricAffectingSpan); int end = builder.getSpanEnd(metricAffectingSpan); RelativeSizeSpan sizeSpan = new RelativeSizeSpan(0.6f); builder.setSpan(sizeSpan, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); builder.setSpan(new CalligraphyTypefaceSpan(mBoldItalicTypeface), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); } }
```

Full example at <https://github.com/andrei-egeniq/android-tibits/tree/master/StyleSpan>

[Back to overview](/en/events-publications)  Link copied to clipboard

### Need help with Android text styling?

Dawn Technology solves complex Android UI challenges with clean, maintainable solutions. No hacks. No shortcuts.

<a id="subscribe"></a>## Curious about our latest updates?

Stay up-to-date in the digital landscape with our newsletter. Enrol and get the latest updates in your mail