Japanese Email Webfont

I've been working on an email template with Japanese characters and annoyed for days about this issue.

The problem is, my desired output for font rendering on an email template is not achieved. I'm trying to use Noto Sans JP font as it is free on Google Font but the output in the email provider (tested on: Gmail and Yahoo) is different.

So, is there any workaround about this if I insist on using Noto Sans JP font or do I have to abandon the thought of using it and try another font? And is there any webfont for Japanese that is good for email?

I'm testing my html-email validity here: https://www.htmlemailcheck.com/check/. Send email test here: https://putsmail.com/tests/new

Please check my code below also:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ジャパン</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
        <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap&subset=japanese" rel="stylesheet">
    </head>
    <body style="font-family: 'Noto Sans JP', Roboto; font-weight: 400">
        <table role="presentation" cellpadding="0" cellspacing="0" style="width: 740px;max-width: 100%;margin: 0 auto;padding: 0 10px;font-weight: 400;line-height: 1.3em;position: relative;color: #646464;">
        <tr>
            <td class="section" style="padding: 50px;">
                <h1 style="font-family: 'Noto Sans JP', Roboto;font-size: 28px;color: #505050;margin:0 0 13px; mso-line-height-rule:exactly;font-weight: 700;">お問い合わせを</h1>
                <h2 style="font-family: 'Noto Sans JP', Roboto;font-size: 28px;color: #505050;margin:0 0 35px; mso-line-height-rule:exactly;font-weight: 400;">受け付けました。</h2>
                <p style="font-family: 'Noto Sans JP', Roboto;font-size: 14px;color: #646464;font-weight: 400;margin:0;">こんにちは。
                    <b style="font-weight: 700;">マーク</b>様
                </p>
                <p style="font-family: 'Noto Sans JP', Roboto;font-size: 14px;color: #646464;font-weight: 400;margin:0;">お問い合わせいただきありがとうございます。</p>
                <p style="font-family: 'Noto Sans JP', Roboto;font-size: 14px;color: #646464;font-weight: 400;margin:0;">通常、翌営業日内までに担当スタッフより回答をご案内しております。</p>
                <p style="font-family: 'Noto Sans JP', Roboto;font-size: 14px;color: #646464;font-weight: 400;margin:0;">今しばらくお待ちください。</p>
            </td>
        </tr>
    </table>
    </body>
</html>

Solution

@MattHamer5 mentioned this in a comment already but it seems to have been brushed passed. The article he referenced also mentions this - https://litmus.com/blog/the-ultimate-guide-to-web-fonts

Custom fonts won't work in some email clients. One big one they won't work in, Gmail. Seems odd since their parent company runs Google Fonts.
Trust me, we've all gone round in circles asking why this feature isn't integrated into Gmail, but no word from Gmail on this.

No amount CSS font imports will fix this issue. It's a basic lack of integration in Gmail (unless you have the font installed on your machine/device).

Typically, we rely on fallback web safe fonts such as Arial, Helvetica, Verdana, Georgia etc, to allow any email clients that do not support custom fonts, to gracefully fallback to a font that works best for our design/brand.
So your font declaration could read like this:

font-family: 'Noto Sans JP', Helvetica, Arial, sans-serif;

Or it'll be optimised to declare the web safe fonts that work best for Japanese characters.