HTML Signature font Rendering Issue: Apple Mail Overrides Font-Family on Gmail Web Client

Question

I'm facing an issue where the font-family styling applied to text elements in an HTML email signature is being overridden when the email is sent from the iPhone's Apple Mail app to a Gmail web client. The desired font-family is removed from the text elements, causing them to render in a default serif font, which is not the intended style. Here's a snippet of my original code:

 <table cellspacing="0" cellpadding="0"
        style="font-family: Arial, Helvetica, sans-serif; border: none; padding-top: 24px; padding-right: 18px; padding-bottom: 18px; padding-left: 18px; background-color: white; border-collapse: separate; margin: 0;">
        <tr>
            <td style="width: 204px; max-width: 204px; vertical-align: top; padding-right: 12px;">
                <p style="font-size: 20px; font-style: normal; font-weight: 700; margin: 0 0 5px 0; padding: 0;">
                    My Name
                </p>
                <p style="color: #8F8F8F; font-size: 12px; font-weight: 400; margin: 0 0 35px 0;">
                    CEO
                </p>
            </td>
(.. and the code goes on)

And this is the browser's End Result Example: This is the structure that Apple Mail sends, which seems to be causing the issue:

<td style="width:204px;max-width:204px;vertical-align:top;padding-right:12px">
    <p style="font-weight:700;margin:0px 0px 5px;padding:0px">
        <font face="UICTFontTextStyleBody">
            <span style="background-color:rgba(255,255,255,0)">My Name</span>
        </font>
    </p>
    <p style="margin:0px 0px 35px">
        <font face="UICTFontTextStyleBody">
            <span style="background-color:rgba(255,255,255,0)">CEO</span>
        </font>
    </p>
</td>

I would appreciate some advice on how to further troubleshoot this, or at least to know that what I want is impossible to achieve, although I refuse to believe that I cannot send an email with a sans-serif typography from Iphone Apple Mail to Gmail Browser client.

BTW: ANY other test against any other case of use and the exact same code is fine.

Workarounds tried and didn't work:

• Inlining the font-family style on the text elements themselves, like:

 <p style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-style: normal; font-weight: 700; margin: 0 0 5px 0; padding: 0;">My Name</p>

• Using web-safe font stacks with generic font families as fallbacks (as I'm currently doing).

• Attempting to override the face attribute injected by Apple Mail with the desired font-family like so:

<td style="width: 204px; max-width: 204px; vertical-align: top; padding-right: 12px;">
    <p style="font-weight: 700; margin: 0 0 5px; padding: 0;">
        <font face="Arial, Helvetica, sans-serif">
            <span>My Name</span>
        </font>
    </p>
    <p style="margin: 0 0 35px;">
        <font face="Arial, Helvetica, sans-serif">
            <span>CEO</span>
        </font>
    </p>
</td>

• I even explored weird techniques like CSS counters and SVG for text rendering (I know how this would never work, but this is how clueless I am:

<td style="width: 204px; max-width: 204px; vertical-align: top; padding-right: 12px;">
    <style>
        .name-counter:after {
            content: "My Name";
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 700;
        }

        .title-counter:after {
            content: "CEO";
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 400;
        }
    </style>
    <p
        style="font-weight: 700; margin: 0 0 5px; padding: 0; font-family: Arial, Helvetica, sans-serif; position: relative;">
        <span class="name-counter"></span>
    </p>
    <p style="margin: 0 0 35px; font-family: Arial, Helvetica, sans-serif; color: #8F8F8F; position: relative;">
        <span class="title-counter"></span>
    </p>
</td>

• Of course I also tried to inline the css with an !important:

 <table cellspacing="0" cellpadding="0"
        style="font-family: Arial, Helvetica, sans-serif!important; border: none; padding-top: 24px; padding-right: 18px; padding-bottom: 18px; padding-left: 18px; background-color: white; border-collapse: separate; margin: 0;">
        <tr>
            <td style="width: 204px; max-width: 204px; vertical-align: top; padding-right: 12px;">
                <p
                    style="font-family: Arial, Helvetica, sans-serif!important; font-size: 20px; font-style: normal; font-weight: 700; margin: 0 0 5px 0; padding: 0;">
                    My Name
                </p>
                <p
                    style="font-family: Arial, Helvetica, sans-serif!important; color: #8F8F8F; font-size: 12px; font-weight: 400; margin: 0 0 35px 0;">
                    CEO
                </p>
            </td>

None of these approaches have been successful in resolving the font rendering issue across both Apple Mail and Gmail.