Typography & Custom Fonts in Jetpack Compose

#android #kotlin #jetpackcompose #mobile

Custom typography and font management in Compose enhance app branding and readability.

FontFamily with Custom Fonts

Import custom fonts from assets and define FontFamily:

// ui/theme/Type.kt
val RobotoFont = FontFamily(
    Font(R.font.roboto_light, FontWeight.Light),
    Font(R.font.roboto_regular, FontWeight.Normal),
    Font(R.font.roboto_bold, FontWeight.Bold)
)

val Typography = Typography(
    headlineSmall = TextStyle(
        fontFamily = RobotoFont,
        fontWeight = FontWeight.Bold,
        fontSize = 24.sp
    ),
    bodyMedium = TextStyle(
        fontFamily = RobotoFont,
        fontSize = 14.sp
    )
)

Typography Definition

Define comprehensive typography scales:

val AppTypography = Typography(
    displayLarge = TextStyle(fontSize = 57.sp, fontWeight = FontWeight.Bold),
    headlineSmall = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.SemiBold),
    bodyLarge = TextStyle(fontSize = 16.sp, lineHeight = 24.sp),
    labelSmall = TextStyle(fontSize = 11.sp, fontWeight = FontWeight.Medium)
)

Google Fonts Provider

Use Google Fonts directly in Compose:

val GoogleFontFamily = FontFamily(
    Font(googleFont = GoogleFont("Poppins"), provider = GoogleProvider)
)

Dynamic Font Sizes

Adjust font sizes based on device size:

val isCompact = maxWidth < 600.dp

Text(
    text = "Title",
    fontSize = if (isCompact) 24.sp else 32.sp,
    style = MaterialTheme.typography.headlineSmall
)