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>