Compose Multiplatform中MaterialTheme自定义字体不生效求助

核心原因 #

你仅在Typography的displaySmall样式中配置了自定义字体，但你的Text组件默认使用的是MaterialTheme.typography.bodyLarge（或其他未被你修改的主题样式），因此全局样式未生效。直接给Text传fontFamily是绕过主题样式直接指定，所以能正常显示。

解决方案 #

有两种方式实现全局字体应用：

方案1：设置默认字体家族 #

通过Typography的defaultFontFamily属性，为所有未单独指定字体的文本样式统一设置默认字体，需要加粗的样式再单独覆盖：

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val fontFamilyNunitoRegular = fontFamilyResource(MR.fonts.Nunito.regular)
    val fontFamilyNunitoBold = fontFamilyResource(MR.fonts.Nunito.bold)

    MaterialTheme(
        typography = Typography(
            defaultFontFamily = fontFamilyNunitoRegular, // 全局默认字体
            displaySmall = TextStyle(
                fontFamily = fontFamilyNunitoBold,
                fontWeight = FontWeight.Bold,
                fontSize = 24.sp
            ),
            titleLarge = TextStyle(
                fontFamily = fontFamilyNunitoBold,
                fontWeight = FontWeight.Bold,
                fontSize = 22.sp
            )
            // 根据需求覆盖其他需要自定义的样式
        ),
        content = content
    )
}

此时，未指定style的Text会自动使用默认字体：

Text(text = "默认样式文本") // 自动应用NunitoRegular

方案2：逐一覆盖所有需要用到的文本样式 #

如果你需要为不同样式指定不同字体，确保覆盖所有你在项目中使用的主题样式（比如bodyLarge、titleMedium、labelSmall等）：

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val fontFamilyNunitoRegular = fontFamilyResource(MR.fonts.Nunito.regular)
    val fontFamilyNunitoBold = fontFamilyResource(MR.fonts.Nunito.bold)

    MaterialTheme(
        typography = Typography(
            bodyLarge = TextStyle(
                fontFamily = fontFamilyNunitoRegular,
                fontSize = 16.sp,
                lineHeight = 24.sp
            ),
            displaySmall = TextStyle(
                fontFamily = fontFamilyNunitoBold,
                fontWeight = FontWeight.Bold,
                fontSize = 24.sp
            ),
            titleMedium = TextStyle(
                fontFamily = fontFamilyNunitoBold,
                fontWeight = FontWeight.SemiBold,
                fontSize = 18.sp
            )
            // 覆盖其他所有你需要的文本样式
        ),
        content = content
    )
}

使用时需确保Text应用对应的主题样式：

Text(
    text = "标题文本",
    style = MaterialTheme.typography.titleMedium
)

额外检查点 #

• 确认根可组合项确实被AppTheme包裹，且没有子组件重新设置MaterialTheme导致样式覆盖
• 确保Text组件没有硬编码fontFamily属性（除非是特殊需求），否则会覆盖主题样式

内容的提问来源于stack exchange，提问作者Ishita Garg