Implement the Custom font in Jetpack Compose

Add the font into res/font folder

Screenshot 2024-02-13 at 4.42.25 PM.png

Create a font family and start using that Font family


@RequiresApi(Build.VERSION_CODES.Q)
val CustomFontFamily = FontFamily(
    Font(R.font.opensans_regular, FontWeight.Normal),
    Font(R.font.opensans_bold, FontWeight.Bold)
)


val Typography = Typography(
    displaySmall = TextStyle(
        fontFamily = CustomFontFamily,
        fontWeight = FontWeight.Bold,
        fontSize = 36.sp
    ),


@Composable
fun HeaderText(text: String) {
    Text(
        text = text,
        modifier = Modifier
            .fillMaxWidth(),
        style = MaterialTheme.typography.displaySmall
    )
}