fontFamily and fontWeight not working in TextAppearance

Question

I am trying to add multiple font-families in my app. Following is code that adds "inter" font.

Here's values/typography.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="textAppearanceDisplayLargeBold" format="reference" />
    <attr name="textAppearanceDisplayLargeSemiBold" format="reference" />
    <attr name="textAppearanceDisplayLargeMediumBold" format="reference" />

    <style name="TextAppearance.App.DisplayLarge" parent="TextAppearance.Material3.DisplayLarge">
        <item name="fontFamily">@font/inter_font_family</item>
        <item name="fontWeight">400</item>
    </style>

    <style name="TextAppearance.App.DisplayLarge.Bold">
        <item name="fontWeight">700</item>
    </style>

    <style name="TextAppearance.App.DisplayLarge.SemiBold">
        <item name="fontWeight">600</item>
    </style>

    <style name="TextAppearance.App.DisplayLarge.Medium">
        <item name="fontWeight">500</item>
    </style>

</resources>

Here's font/inter_font_family.xml

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font
        app:font="@font/inter_regular"
        app:fontStyle="normal"
        app:fontWeight="400" />
    <font
        app:font="@font/inter_medium"
        app:fontStyle="normal"
        app:fontWeight="500" />
    <font
        app:font="@font/inter_semibold"
        app:fontStyle="normal"
        app:fontWeight="600" />
    <font
        app:font="@font/inter_bold"
        app:fontStyle="normal"
        app:fontWeight="700" />
</font-family>

Here's themes.xml

<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">

    <item name="textAppearanceDisplayLarge">@style/TextAppearance.App.DisplayLarge</item>
    <item name="textAppearanceDisplayLargeBold">
        @style/TextAppearance.App.DisplayLarge.Bold
    </item>
    <item name="textAppearanceDisplayLargeSemiBold">
        @style/TextAppearance.App.DisplayLarge.SemiBold
    </item>
    <item name="textAppearanceDisplayLargeMediumBold">
        @style/TextAppearance.App.DisplayLarge.Medium
    </item>
</style>

My primary problem is that fontWeight has no effect in TextAppearance styles. If I set individual fonts (inter_bold, inter_light, etc) in TextAppearance styles, it works and shows correct fonts.

Answer 1

Unfortunately, the fontWeight attribute might not be applied correctly when specifying a font family in the TextAppearance style.

By the way, you can define separate styles for each font weight in your typography.xml file. See bellow:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TextAppearance.App.DisplayLarge" parent="TextAppearance.Material3.DisplayLarge">
        <item name="fontFamily">@font/inter_regular</item>
    </style>

    <style name="TextAppearance.App.DisplayLarge.Bold">
        <item name="fontFamily">@font/inter_bold</item>
    </style>

    <style name="TextAppearance.App.DisplayLarge.SemiBold">
        <item name="fontFamily">@font/inter_semibold</item>
    </style>

    <style name="TextAppearance.App.DisplayLarge.Medium">
        <item name="fontFamily">@font/inter_medium</item>
    </style>
</resources>

In this example, each TextAppearance style explicitly specifies the desired font file. This way, the fontWeight attribute should have the expected effect since it's now applied to a specific font file.

Ensure to update the themes.xml file to incorporate these styles:

<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="textAppearanceDisplayLarge">@style/TextAppearance.App.DisplayLarge</item>
    <item name="textAppearanceDisplayLargeBold">@style/TextAppearance.App.DisplayLarge.Bold</item>
    <item name="textAppearanceDisplayLargeSemiBold">@style/TextAppearance.App.DisplayLarge.SemiBold</item>
    <item name="textAppearanceDisplayLargeMediumBold">@style/TextAppearance.App.DisplayLarge.Medium</item>
</style>

This should resolve the issue with the fontWeight attribute not taking effect. Each TextAppearance style now explicitly specifies the font file, allowing you to control both the font family and weight.

Hope it helps!