[Android Compose Resource] 1. Android Compose에서 FontFamily 만들기. - Text에 Font 적용시키기

FontFamily란?

FontFamily란 같은 폰트의 모음으로 같은 폰트에 대해 다양한 스타일(굵기)을 포함하는 번들을 뜻한다.

 

Compose에서 FontFamily 만들기

기존 xml 기반의 안드로에서 리소스 시스템에서는 xml에 모든 리소스를 정의했는데 FontFamily도 그 중 하나였다. 하지만, Compose에서는 Color, Shape,Theme, Type에 이어 FontFamily 리소스 또한 코드 상에서 정의하기 때문에 기존과 정의 방식이 달라졌다. 따라서 이번 글에서는 변경된 방식에 맞게 FontFamily를 정의하는 방법을 설명하고자 한다.

 

준비사항

Compose에서 FontFamily를 만들기 위해서는 2가지 준비사항이 필요하다. 

1. Font 다운로드
2. Android Project에 font 리소스 폴더 만들고 1에서 다운받은 폰트들 넣기

 

1. Font 다운로드

먼저 아래 사이트에서 noto sans 폰트를 다운 받는다. 

https://fonts.google.com/noto/specimen/Noto+Sans+KR

Google Fonts

그림1. 폰트 받기

 

2. Android Project에 font 리소스 폴더 만들기

1) res를 오른쪽 마우스 클릭하여 New->Android Resource Directory를 선택한다.

그림2. 리소스 디렉터리 생성1

2) Resource Type에러 font를 찾아 누른 후 오른쪽 아래 OK 버튼을 누른다.

그림3. 폰트 디렉터리 생성

3) [1. Font 다운로드]에서 다운받은 폰트의 이름을 변경한다. 이름을 다음과 같이 변경하지 않으면 안드로이드 리소스 명명 규칙으로 인해 인식이 안되기 때문이다.

그림4. 이름 변경

4) 위의 폰트들을 font폴더로 이동시킨다.

그림5. 폰트를 리소스 폴더로 이동

자 이제 준비가 완료되었다! 이제 FontFamily를 만들어보자.

 

FontFamily만들기

FontFamily는 다음과 같이 생성할 수 있다. FontFamily의 인자로 Font들을 FontWeight와 FontStyle을 정의해 넘기는 방식으로 만들어진다.

val notosanskr = FontFamily(
    Font(R.font.notosanskr_bold, FontWeight.Bold, FontStyle.Normal),
    Font(R.font.notosanskr_medium, FontWeight.Medium, FontStyle.Normal),
    Font(R.font.notosanskr_regular, FontWeight.Normal, FontStyle.Normal),
    Font(R.font.notosanskr_light, FontWeight.Light, FontStyle.Normal),
    Font(R.font.notosanskr_thin, FontWeight.Thin, FontStyle.Normal)
)

 

Font는 파라미터로 Resource Id, FontWeight, FontStyle을 설정할 수 있다.

fun Font(
    resId: Int,
    weight: FontWeight = FontWeight.Normal,
    style: FontStyle = FontStyle.Normal
): Font = ResourceFont(resId, weight, style)

• Resource Id : 폰트가 있는 위치를 설정한다(위치가 Id 값으로 나타내진다)
• FontWeight : 폰트의 굵기를 결정한다. Thin, Light, Normal, Medium, Bold를 값으로 가질 수 있다.
• FontStyle : 폰트의 스타일을 결정한다. Normal과 Italic을 값으로 가질 수 있다.

 

이제 우리가 설정한 Resource Id에 해당하는 폰트는 해당 Weight와 Style이 폰트가 사용되는 곳에서 불렸을 때 로드된다. 아래 Text예제를 통해 살펴보자.

 

 

Text에 FontFamily 적용하기

Text에 FontFamily를 적용하려면 위에서 설정한 FontFamily를 Text의 fontFamily Parameter로 넣어준다. 우리는 FontFamily에 FontWeight만 설정하였으므로 FontWeight만 다르게 해서 출력해보도록 한다.

val notosanskr = FontFamily(
    Font(R.font.notosanskr_bold, FontWeight.Bold, FontStyle.Normal),
    Font(R.font.notosanskr_medium, FontWeight.Medium, FontStyle.Normal),
    Font(R.font.notosanskr_regular, FontWeight.Normal, FontStyle.Normal),
    Font(R.font.notosanskr_light, FontWeight.Light, FontStyle.Normal),
    Font(R.font.notosanskr_thin, FontWeight.Thin, FontStyle.Normal)
)

@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldFont() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text(text = "Kotlin World", fontFamily = notosanskr, fontWeight = FontWeight.Bold)
        Text(text = "Kotlin World", fontFamily = notosanskr, fontWeight = FontWeight.Medium)
        Text(text = "Kotlin World", fontFamily = notosanskr, fontWeight = FontWeight.Normal)
        Text(text = "Kotlin World", fontFamily = notosanskr, fontWeight = FontWeight.Light)
        Text(text = "Kotlin World", fontFamily = notosanskr, fontWeight = FontWeight.Thin)
    }
}

 

그림6. FontFamily 적용 완료

 

그림6과 같이 각 FontWeight에 맞게 Font가 출력된 것을 확인할 수 있다. 구글 폰트 사이트에서 테스트한 폰트와 같게 나오는 것을 확인할 수 있다.

그림7. 구글 폰트사이트와 비교