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

Question

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?

Put these fonts to the diffrerent font locale with the same name and use in your app. — Liem Vo, Nov 05 '21 at 07:13
Thanks for your response, but I didn't get it! Can you explane in more detailed? — Mohammad Derakhshan, Nov 06 '21 at 04:44

score 3 · Accepted Answer · answered Nov 06 '21 at 07:20

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:

I've done this but font doesn't change till application restart, any solutions? https://stackoverflow.com/questions/76498248/font-resources-doesnt-change-after-changing-locale-in-jetpack-compose — Mohsen Einhesari, Jun 19 '23 at 11:32

score 0 · Answer 2 · answered Nov 05 '21 at 07:17

Not sure if there is any better approach, but I think can implement it using simple Strategy Pattern.
Create an interface for the fontFamily, i.e.

interface MyFont {
    fun getBody1FontFamily()
    fun getButtonFontFamily()
}

and then implement it i.e.

class EnglishFont: MyFont {
   fun getBody1FontFamily() = // font for body1 on English locale
   fun getButtonFontFamily() = // font for button on English locale
}

class KoreanFont: MyFont {
   fun getBody1FontFamily() = // font for body1 on Korean locale
   fun getButtonFontFamily() = // font for button on Korean locale
}

Then, in your composable function you can create your myFont object based on the locale and inject the object to Typography

val Typography = Typography(
    body1 = TextStyle(
        fontFamily = myFont.getBody1FontFamily(),
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    button = TextStyle(
        fontFamily = myFont.getButtonFontFamily(),
        fontWeight = FontWeight.SemiBold,
        fontSize = 14.sp
    ),
    defaultFontFamily = MyFont
)

Thanks for your response. But are you sure I can check the locale inside the `type` file? I tried to use `Locale.getDefault()`, but I got a warning, and it seems it doesn't work correctly. Do you have any idea to achieve local? — Mohammad Derakhshan, Nov 05 '21 at 18:00

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

2 Answers2