how to set specific font family for each locale in jetpack compose

mohammad Published at Dev

Mohammad

In Jetpack Compose, you can set your specific font by editing the type file:

val MyFont= FontFamily(
    Font(R.font.myfont, FontWeight.Normal)
)

// Set of Material typography styles to start with
val Typography = Typography(
    body1 = TextStyle(
        fontFamily = MyFont,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    button = TextStyle(
        fontFamily = MyFont,
        fontWeight = FontWeight.SemiBold,
        fontSize = 14.sp
    ),
    defaultFontFamily = MyFont
)

But my problem is that I have multiple locales, and I want to set the specific font for each one.

Before using Compose, my approach was to create a style.xml file in each language values folder and edit the style.xml in a way that changes the font family. but this approach won't work when using Compose.

So how can I have a different font family for each locale?

Liem Vo

If you want to achieve this you need to follow some steps as below:

These fonts should be the same name and put in the different font locale folder.

Define FontFamily with that font name

val myFontFamily = FontFamily(
    Font(R.font.lato_light, FontWeight.Light),
    Font(R.font.lato_regular, FontWeight.Normal),
    Font(R.font.lato_italic, FontWeight.Normal, FontStyle.Italic),
    Font(R.font.lato_regular, FontWeight.Medium),
    Font(R.font.lato_bold, FontWeight.Bold)
)

Use in your Text

val text = "Hello Android Developers"
Column(Modifier.fillMaxWidth().padding(16.dp)) {
    Text(text, fontFamily = myFontFamily, fontWeight = FontWeight.Light)
    Text(text, fontFamily = myFontFamily, fontWeight = FontWeight.Medium)
    Text(text, fontFamily = myFontFamily, fontStyle = FontStyle.Italic)
}

The result of English and Spanish locale as below: