[Android] Android Font 직접 적용

안녕하세요. 점냥입니다:)

안드로이드에서 제공해주는 폰트 대신 디자이너가 요구하는 폰트를 적용해야 할 때가 생깁니다.

안드로이드 폰트를 적용하는 방법으로 두 가지가 존재한다고 하여 각각의 방법으로 포스팅을 진행하려고 해요!

 

Font Resource

Android 8.0(API 수준 26)부터 Font 리소스가 추가되었다고 합니다.

res/font 경로에 폰트와 관련된 리소스 파일을 생성하고 R 파일에 의해 접근이 가능하다고 해요. ex) R.font.my_font

 

Q. Android 8.0부터 지원한다고 한다면 그 이전 버전에서는 사용할 수 없는 건가요?

아니에요. 가능합니다!

 

Support Libaray를 이용해 Android 4.1(API 수준 14) 이상부터는 Font를 사용할 수 있어요.

자세한 방법으로는 아래에서 한번 더 이야기해보겠습니다.

 

Font Resource 폴더 생성

우선 폰트 리소스를 추가하기 위해 폴더를 만들어야 합니다.

프로젝트 res로 이동 후, New > Android resource directory 후, font 폴더를 생성해주세요.

 

Font 파일 다운로드 후 적용

Font는 저작권을 주의해서 사용해야 해요. 무료로 사용할 수 있는 글꼴인지 확인하고 프로젝트에 필요한 글꼴을 다운로드하여 font 폴더에 추가해주세요. 저는 Google 무료 폰트인 Noto Sans KR 글꼴을 적용하려고 합니다.  다운로드 링크 

 

Font 파일의 이름은 소문자로만 구성해야 올바르게 인식한다고 해요!

 

 

 

XML에서 폰트 적용하기

 

XML에서 폰트를 적용하는 방법은 굉장히 쉬워요!

android:fontFamily 속성에서 Font 리소스를 불러오면 됩니다.

 

 

 

Font Family 만들기

하나의 폰트에는 다양한 스타일, 굵기가 존재해서 Bold, Light 글씨체로 나뉘기도 하고 여러 다양한 폰트를 앱에서 사용 중일 때 이를 파일 하나에 묶어 리소스 형태로 정의해 놓으면 TextView가 상황에 따라 자동으로 전환된다고 해요.

 

font 폴더로 이동한 다음 New > Font resource file을 수행해서 파일을 생성해주세요.

 

    <?xml version="1.0" encoding="utf-8"?>
    <font-family xmlns:android="http://schemas.android.com/apk/res/android">
        <font
            android:fontStyle="normal"
            android:fontWeight="400"
            android:font="@font/lobster_normal"
            app:fontStyle="normal"
            app:fontWeight="400"
            app:font="@font/lobster_regular"/>
        <font
            android:fontStyle="normal"
            android:fontWeight="700"
            android:font="@font/lobster_bold" />
    </font-family>
    

Android 4.1 (API 수준 14)에서 폰트를 지원하기 위해서 app namespace를 사용해야 한다고 해요.

 

font-fmaily 상위 태그로 구성되어 있는 Font Family 파일은 여러 폰트로 구성되어 있습니다.

 

• font : 폰트 파일을 의미합니다. 확장자로. ttf,. otf,. xml 등이 올 수 있다고 해요.
• fontStyle :  normal과 italic 2개의 속성을 정의합니다. italic는 기울어진 글꼴을 의미해요.
• fontWeight : 폰트의 글씨 굵기를 설정합니다. 속성의 값으로 100~900 사이의 값이 올 수 있으며, 100 배수에 해당하는 정수만을 정의할 수 있습니다.

 

 

참고: FontWeight

100    Extra Light or Ultra Light
200    Light or Thin
300    Book or Demi
400    Normal or Regular
500    Medium
600    Semibold, Demibold
700    Bold
800    Black, Extra Bold or Heavy
900    Extra Black, Fat, Poster or Ultra Black

 

 

Font 프로젝트 전역으로 설정

이제 TextView 등 모든 위젯에서 Font를 적용하려면 fontFamily 속성을 사용해야 하죠.

만약 적용할 폰트가 다양하지 않다면 이 작업은 단순 반복되는 작업일 겁니다. 이럴 때 Style을 생성하여 전역으로 font를 설정할 수 있어요.

 

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Custom font 적용 -->
    <style name="customTextViewFontStyle" parent="@android:style/Widget.DeviceDefault.TextView">
        <item name="android:fontFamily">@font/custom_font_family</item>
    </style>

    <style name="customButtonFontStyle" parent="@android:style/Widget.DeviceDefault.Button.Borderless">
        <item name="android:fontFamily">@font/custom_font_family</item>
    </style>

    <style name="customEditTextFontStyle" parent="@android:style/Widget.DeviceDefault.EditText">
        <item name="android:fontFamily">@font/custom_font_family</item>
    </style>

    <style name="customRadioButtonFontStyle" parent="@android:style/Widget.DeviceDefault.CompoundButton.RadioButton">
        <item name="android:fontFamily">@font/custom_font_family</item>
    </style>

    <style name="customCheckboxFontStyle" parent="@android:style/Widget.DeviceDefault.CompoundButton.CheckBox">
        <item name="android:fontFamily">@font/custom_font_family</item>
    </style>

</resources>

 

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!--custom font-family 적용-->
        <item name="android:textViewStyle">@style/customTextViewFontStyle</item>
        <item name="android:buttonStyle">@style/customButtonFontStyle</item>
        <item name="android:editTextStyle">@style/customEditTextFontStyle</item>
        <item name="android:radioButtonStyle">@style/customRadioButtonFontStyle</item>
        <item name="android:checkboxStyle">@style/customCheckboxFontStyle</item>
        
    </style>

 

이후, XMl에서 textStyle만 설정한다면 쉽게 font를 설정할 수 있어요.

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textStyle="bold"
        android:text="Bold 적용"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textStyle="normal"
        android:text="normal 적용"/>