[안드로이드] 커스텀 폰트 라이브러리 Calligraphy vs. Typekit

안드로이드에서 커스텀 폰트를 사용할 수 있는 라이브러리는 생각보다 많다. 가장 대표적인 라이브러리는 Calligraphy인데 여러 폰트 라이브러리들이 지향하는 방향은 다르고 내 프로젝트에 적합한 라이브러리도 때에 따라 다르다. 그래서 또다른 폰트 라이브러리 Typekit과 Calligraphy의 사용법과 특징을 분석해보는 것이 이 글의 목적이다. 

Typekit 라이브러리 시작하기

안드로이드 애플리케이션의 기본 폰트를 빠르게 바꿀 수 있도록 돕는 라이브러리다. 커스텀뷰나 현재 xml 레이아웃 파일에 태그를 추가할 필요도 없다. application 클래스를 빠르게 설정해서 폰트를 변경할 수 있다.

방법

1. 의존성 설정하기

app의 build.gradle 파일에 typekit 의존성을 설정한다.

dependencies {
  compile 'com.tsengvn:typekit:1.0.1'
}

2. base Activity를 오버라이드해서 다음 코드를 추가하기

프로젝트의 모든 액티비티에 적용하는 보편적인 방법은 BaseActivity 추상 클래스 또는 클래스를 만들어 모든 액티비티에서 상속하는 것이다. BaseActivity에서 attachBaseContext를 오버라이드해 액티비티를 TypekitContextWrapper로 래핑해준다.

@Override
protected void attachBaseContext(Context newBase) {
 super.attachBaseContext(TypekitContextWrapper.wrap(newBase)); 
}

3. 커스텀 application class에 폰트 설정하기

typekit의 커스텀 폰트는 프로젝트의 application 클래스에서 모두 정의한다. addNormal은 기본 폰트, addBold는 bold 스타일, 그 외에 Custom 폰트를 설정할 수 있다.

Typekit.getInstance()
                .addNormal(Typekit.createFromAsset(this, "Wedding Chardonnay.ttf"))
                .addBold(Typekit.createFromAsset(this, "Double_Bubble_shadow.otf"))
                .addItalic(Typekit.createFromAsset(this, "Double_Bubble_shadow_italic.otf"))
                .addBoldItalic(Typekit.createFromAsset(this, "Double_Bubble_shadow_italic.otf"))
                .addCustom1(Typekit.createFromAsset(this, "soopafre.ttf"))
                .add("breakit",Typekit.createFromAsset(this, "Break It Down.ttf"));
​

여기까지 하면 TextView의 모든 서브클래스는 커스텀 폰트를 쓸 준비가 완료된다.

4. 폰트 적용하기

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Wedding Chardonnay"
  android:textColor="@android:color/black"
  android:textSize="18sp"/><!--아무 폰트도 지정해주지 않으면 기본 폰트가 적용된다.-->
​
<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Double_Bubble_shadow"
  android:textColor="@android:color/black"
  android:textSize="18sp"
  android:textStyle="bold"/>
​
<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Double_Bubble_shadow_italic"
  android:textColor="@android:color/black"
  android:textSize="18sp"
  android:textStyle="bold|italic"/><!--기본 스타일에 있는 bold,italic은 android 네임스페이스를 그대로 써주면 된다.-->
​
<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="soopafre"
  android:textColor="@android:color/black"
  android:textSize="18sp"
  app:font="custom1"/>
  
<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Break It Down"
  android:textColor="@android:color/black"
  android:textSize="18sp"
  app:font="breakit"/><!-- app:font를 사용해 커스텀 폰트이름을 적용할 수 있다.-->
​

어쩐 일인지 Custom1, Custom2로 설정한 폰트는 적용되지 않았다. 어짜피 custom이라는 용어 자체가 의미가 없기 때문에 설정할 때 addCustom 보다는 add로 폰트 이름을 직접 지정해 주는 것이 더 나을 것 같다.

Calligraphy 라이브러리 시작하기

1. 의존성 설정하기

dependencies {
  compile 'uk.co.chrisjenx:calligraphy:2.2.0'
}

2. 폰트 추가하기

커스텀 폰트는 assets/ 폴더에 추가한다. 모든 폰트 정의는 이 경로로 연결이 된다.

Gradle을 사용한다면 src/main/아래 assets 디렉토리를 생성해야 한다. Gradle에서는 멀티 프로젝트 빌드를 사용하는 것이 인기있기 때문에 경로는 보통 app/src/main/assets/ 이다.

3. 설정

기본 폰트를 프로젝트의 Application 클래스의 onCreate 메서드에서 CalligraphyConfig를 사용해서 설정할 수 있다.

@Override
public void onCreate() {
  super.onCreate();
  CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
    .setDefaultFontPath("fonts/Roboto-RobotoRegular.ttf")
    .setFontAttrId(R.attr.fontPath)
    .build()
);
  //...
}

주의: CalligraphyConfig를 꼭 설정해야 할 필요는 없지만 라이브러리가 디폴트 폰트가 없이 적용될 것이고 R.attr.fontPath의 디폴트 속성을 사용할 것이다.

4. Context에 주입하기

Typekit에서와 마찬가지로 BaseActivity에 CalligraphyContextWrapper로 래핑한다.

@Override
protected void attachBaseContext(Context newBase){
  super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}

어떻게 사용할까요?

1. TextView 마다 커스텀폰트 적용하기

<TextView
          android:text="@string/hello_world"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          fontPath="fonts/Roboto-Bold.ttf"/>

주의: 아마 인텔리제이에서는 제대로 했더라도 fontPath는 에러 처리될 것이다.

아마 이 에러를 피하기 위해 tools:ignore="MissingPrefix"를 뷰나 부모 뷰그룹에 추가할 수도 있다. 그러기위해선 tools 네임스페이스가 필요하다. xmlns:tools="http://schemas.android.com/tools"

2. TextAppearance에서 커스텀 폰트 적용하기

<style name="TextAppearance.FontPath" parent="android:TextApperance">
  <!-- Custom Attr-->
  <item name="fontPath">fonts/RobotoCondensed-Regular.ttf</item>
</style>

<TextView
          android:text="@string/hello_world"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="@style/TextApperance.FontPath"/>

3. Styles에서 커스텀 폰트 적용하기

<style name="TextViewCustomFont">
  <item name="fontPath">fonts/RobotoCondensed-Regular.ttf</item>
</style>

4. Theme에서 커스텀 폰트 적용하기

<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
  <item name="android:textViewStyle">@style/AppTheme.Widget.TextView</item>
</style>
​
<style name="AppTheme.Widget"/>
​
<style name="AppTheme.Widget.TextView" parent="android:Widget.Holo.Light.TextView">
  <item name="fontPath">fonts/Roboto-ThinItalic.ttf</item>
</style>

분석

기본적인 설정, 사용법은 두 라이브러리 모두 비슷했다. Calligraphy는 폰트를 TextView뿐만 아니라 TextApearance, Style, Theme 를 지원하는 것으로 Typekit에 비해 여러 가지 사용 옵션을 준다. 한편 Typekit은 Bold, Italic과 같은 기본 폰트 스타일을 설정할 수 있어서 Bold, Italic 적용이 간편하고 TextView에서 폰트를 설정하는 방법 또한 커스텀 폰트 이름을 지정할 수 있어서 Calligraphy보다는 깔끔해 보인다. 이 외에 Calligraphy는 한 TextView안에 여러 개의 Typeface를 설정할 수 있는 기능도 제공한다.

결론

개인적인 결론으로는 커스텀 폰트를 쓰지만 여러 종류를 쓰지 않는 간단하고 작은 프로젝트에서는 Typekit으로 깔끔하게 적용할 수 있을 것 같다. 커스텀 폰트를 여러 종류 사용한다고 해도 특정 위치에서만 사용한다면 그정도는 지원한다. TextAppearance나 style, theme 또는 커스텀 뷰에 폰트를 설정하거나 한 뷰에 여러 폰트를 사용하고자 할 때는 Calligraphy가 적절하다.