안드로이드 스튜디오에서 기본으로 제공하는 폰트가 아닌 다른 폰트를 적용할 경우가 생긴다. 필자도 그랬다. 그래서 폰트 적용 방법을 소개하려고 한다.

1. font directory 생성

  • 폰트 추가를 위해서는 디렉토리를 먼저 생성해야 한다.
  • res/font 폴더를 만든다.

2. 원하는 font 넣기

  • 적용하고 싶은 font 파일을 font 디렉토리 안에 넣는다.
  • https://noonnu.cc/ 이 곳에서 무료로 이용할 수 있는 폰트를 다운받을 수 있다. 그러므로 필요한 폰트를 다운받도록 하자!
  • 주의할 점은 font 파일 이름은 모두 소문자로 바꿔줘야 한다는 것이다.

3. 필요한 곳에 font 적용하기

  • 우리가 원하는 곳에 font를 적용해보자. 보통 font를 적용한다고 하면 한 곳에만 적용하기 보다 통일성을 유지하면서 Title, Description 등에 폰트를 적용할 것이다.
  • font 디렉토리 아래에 font resource file을 생성한다.
  • 필자는 app_font.xml이다. (2번의 사진을 참고하면 된다.)

4. font resource file 구현

  • font resource file은 API 26 이상부터 지원하기 때문에 이보다 낮은 버전에서도 적용하기 위해 app namesapce를 사용한다.
  • font : 사용할 글꼴 파일 위치
  • fontStyle : 해당 글꼴의 스타일
  • fontWeight : 글꼴의 굵기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="UnusedAttribute,ResourceCycle">

    <!--demi light-->
    <font
        android:font="@font/noto_sans_demi_light"
        android:fontStyle="normal"
        android:fontWeight="300"
        app:font="@font/noto_sans_demi_light"
        app:fontStyle="normal"
        app:fontWeight="300" />

    <!--regular-->
    <font
        android:font="@font/noto_sans_regular"
        android:fontStyle="normal"
        android:fontWeight="500"
        app:font="@font/noto_sans_regular"
        app:fontStyle="normal"
        app:fontWeight="500" />

    <!--medium-->
    <font
        android:font="@font/noto_sans_medium"
        android:fontStyle="normal"
        android:fontWeight="1000"
        app:font="@font/noto_sans_medium"
        app:fontStyle="normal"
        app:fontWeight="1000" />

</font-family>

5. style.xml에 custom font family 적용

  • 여기서 폰트를 일괄 적용시키는 방법은 2가지다.
    1. 위젯의 기본테마를 상속받아서 해당 위젯을 사용하는 곳에서는 폰트를 무조건 사용하도록 한다.
    2. TextAppearance를 상속받은 스타일을 만들어 그 스타일을 적용하는 위젯만 폰트를 사용하도록 한다.
  • 필자는 2번의 방식으로 적용했기 때문에 2번을 기준으로 설명하겠다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style name="Text.RankStyle" parent="android:TextAppearance">
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">@dimen/text_size_14</item>
        <item name="android:textColor">@color/colorGray</item>
        <item name="android:fontFamily">@font/app_font</item>
        <item name="android:includeFontPadding">false</item>
    </style>

<style name="Text.TitleStyle" parent="android:TextAppearance">
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">@dimen/text_size_16</item>
        <item name="android:textColor">@color/colorBlack</item>
        <item name="android:fontFamily">@font/app_font</item>
        <item name="android:includeFontPadding">false</item>
    </style>
  • 위의 xml처럼 필요한 스타일을 정의하고, 그에 맞는 폰트를 지정해준다. textStyle을 normal, bold처럼 수정하여 원하는 글꼴을 사용할 수 있다.

6. 글꼴 적용

  • 이제 원하는 TextView에서 정의된 style을 적용하여 글꼴을 적용할 수 있다.
1
2
3
4
5
6
7
8
9
10
<TextView
    android:id="@+id/itemTextName"
    style="@style/Text.TitleStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/margin_16"
    android:hint="@string/dummy_name"
    android:text="@{model.name}"
    app:layout_constraintStart_toEndOf="@id/itemImageShop"
    app:layout_constraintTop_toTopOf="@id/itemImageShop" />

예시 사진

  • 로즈베이에 bold하면서 원하는 글꼴이 적용된 것을 볼 수 있다.

Reference