Font Resources Look Different When Using Font Family

I have created a font family for the Arial font as follows:

<?xml version="1.0" encoding="utf-8" ?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <font android:font="@font/arial"
                android:fontStyle="normal"
                android:fontWeight="400"
                app:font="@font/arial"
                app:fontStyle="normal"
                app:fontWeight="400"/>
    <font android:font="@font/arialbd"
                android:fontStyle="normal"
                android:fontWeight="700"
                app:font="@font/arialbd"
                app:fontStyle="normal"
                app:fontWeight="700"/>
    <font android:font="@font/ariali"
                android:fontStyle="italic"
                android:fontWeight="400"
                app:font="@font/ariali"
                app:fontStyle="italic"
                app:fontWeight="400"/>
    <font android:font="@font/arialbi"
                android:fontStyle="italic"
                android:fontWeight="700"
                app:font="@font/arialbi"
                app:fontStyle="italic"
                app:fontWeight="700"/>
</font-family>

I have also created the following style resource:

<style name="EntryButton">
    <item name="android:layout_width">60dp</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:background">@color/Silver</item>
    <item name="android:textColor">@color/Black</item>
    <item name="android:layout_margin">2dp</item>
    <item name="android:textSize">40dp</item>
    <item name="android:fontFamily">@font/arialfamily</item>
    <item name="android:textStyle">bold</item>
</style>

In my code, I have the following Button elements:

<Button style="@style/EntryButton" android:text="5" android:textStyle="normal"/>
<Button style="@style/EntryButton" android:text="5" android:textStyle="bold"/>
<Button style="@style/EntryButton" android:text="5" android:textStyle="italic"/>
<Button style="@style/EntryButton" android:text="5" android:textStyle="bold|italic"/>
<Button style="@style/EntryButton" android:text="5" android:textStyle="italic|bold"/>
<Button style="@style/EntryButton" android:text="5" android:fontFamily="@font/arial" app:fontFamily="@font/arial"/>
<Button style="@style/EntryButton" android:text="5" android:fontFamily="@font/arialbd" app:fontFamily="@font/arialbd"/>
<Button style="@style/EntryButton" android:text="5" android:fontFamily="@font/ariali" app:fontFamily="@font/ariali"/>
<Button style="@style/EntryButton" android:text="5" android:fontFamily="@font/arialbi" app:fontFamily="@font/arialbi"/>
<Button style="@style/EntryButton" android:text="5" android:fontFamily="@font/arialbi" app:fontFamily="@font/arialbi"/>

This displays the following:

I would have expected the first & second 5 Button(s) to look the same, but notice the slight differences, even though they use the same font resources. Why do they look different when using a font family?