All children of the a compose app's material theme must follow the typography defined in that theme, mustn't they?

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DraftNotebookTheme {
                Surface(color = MaterialTheme.colors.background) {
                    MyButton("Android")
                }
            }
        }
    }
}

@Composable
fun MyButton(label: String) {
    Button(onClick = {}) {
        Text(label)
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    DraftNotebookTheme {
        MyButton("سلام دنیا")
    }
}

When doing preview, the text shown on the button does not follow the font family I have set in the theme. Is this a bug?

Whats the definition for

DraftNotebookTheme

@efemoney

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

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

val typography = Typography(
        body1 = TextStyle(
                fontFamily = fontFamily(font(R.font.iransans)),
                fontWeight = FontWeight.Normal,
                fontSize = 12.sp,
                textDirection = TextDirection.Rtl
        )
)

You can look at the code for

Button

to confirm but thats correct behavior. You are setting fontFamily for only

body1

, meanwhile

Button

composable provides

MaterialTheme.typography.button

as textStyle. If you look at the constructor for

Typography

it has default values for the rest that uses the default font family passed. The fix is to set the

defaultFontFamily

while constructing your

Typography

Actually this is not a bug. For some reason, different types of composables use different text styles (e.g. buttons vs. body text). In my theme, no custom font was defined for buttons. After adding a text style for the

button

parameter of typography, the button is following the theme font.

val myFont = fontFamily(font(R.font.iransans))

val typography = Typography(

        body1 = TextStyle(
                fontFamily = fontFamily(myFont),
                fontWeight = FontWeight.Normal,
                fontSize = 12.sp,
                textDirection = TextDirection.Rtl
        ),
override
    button = TextStyle(
        fontFamily = fontFamily(myFont),
        fontWeight = FontWeight.W500,
        fontSize = 14.sp
    ),
)

That is what I explained above 🙂, apologies if I wasnt clear enough. I would recommend to also define the

defaultFontFamily

if not you’ll still use the system default for components that dont use

body1

or

button

styles