본문 바로가기
Android Jetpack Compose/Jetpack Compose

Android Default Font 지정하는 방법 정리 # Theme Jetpack Compose

by Developer88 2023. 4. 30.
반응형

요즘 개발하는 앱들은 Custom 폰트들을 적용하는 경우가 많은데요.

Android 개발하면서 매번 폰트를 지정하는 일은 매우 비효율적인 일입니다.

오늘은 Android 의 Jetpack Compose 에서, 

Default font를 지정하는 방법에 대해서 정리해 보도록 하겠습니다.

 

1. Custom 폰트 저장

가장 먼저 default 로 지정할 font 를,

font 폴더에 저장해 주어야 합니다.

 

먼저, 아래와 같이 New> resource directory를 선택해서 폰트를 넣을 디렉토리를 선택해 주구요.

 

 

 

아래와 같이 폰트디렉토리를 생성하고 나서,

이 곳에 폰트 파일을 복사해 줍니다.

 

 

폰트제작사에서는 otf 혹은 ttf 타입의 파일을 제공해주는데요.

보통은 안드로이드 기준으로 otf 파일이 용량이 더 적으면서도, 가독성도 떨어지지 않습니다.

 

2. FontFamily 함수 작성

아래와 같이 FontFamily 객체를 얻을 수 있는 함수를 fontUtil 같이 특정파일에 작성해 둡니다.

아래에서 "R.font." 다음 부분은 실제 다운로드한 폰트와 매칭시켜주면 됩니다.

 

fun getTestFontFamily(): FontFamily = FontFamily(
    Font(R.font.test_font_regular, FontWeight.Normal),
    Font(R.font.test_font_light, FontWeight.Light),
    Font(R.font.test_font_bold, FontWeight.Bold),
    Font(R.font.test_font_heavy, FontWeight.Bold),
)

 

 

다음으로 Typography 객체도 생성해 줍니다.

defaultFontFamily만 넣어주면 됩니다.

 

val myTypography = Typography(
    defaultFontFamily = getTestFontFamily()
)

 

3. Theme.kt 파일에 적용

이제 위에서 만든 topography 객체를 MaterialTheme()안에 넣어주기만 하면 됩니다. 

보통 Theme.kt파일에는 아래와 같이 설정이 되어 있는데요.

 

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = myTypography,
        shapes = Shapes,
        content = content
    )
}

 

 

이제 Activity 의 setContent 안에 MyAppTheme 이 아래와 같이 적용되어 있는지만 확인해 주면 됩니다.

앱을 개발하면서 초반에 제거하지 않았다면, 대부분 아래와 같이 되어있을 것 입니다.

없다면, 아래와 같이 적용해 주면 되구요.

 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                // app content
            }
        }
    }
}

 

앱을 다시 실행해 보면 모든 화면에 지정한 폰트가 적용된 것을 볼 수 있습니다.

 

728x90

댓글