Google font

[rabeeaali]

• Maizzle Version: 4
• Node.js Version: last one

I have added Google font as follows:

in tailwind.config.js:

fontFamily: {
        "ibm-plex-sans-arabic": ['"IBM Plex Sans Arabic"', "sans-serif"],
        "noto-sans-arabic": ['"Noto Sans Arabic"', "sans-serif"],
        zain: ["Zain", "sans-serif"],
      },

in main.html:

....
<if condition="page.title">
    <title>{{{ page.title }}}</title>
  </if>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300&family=Noto+Sans+Arabic:wght@300&family=Zain:wght@200;300;400;700;800;900&display=swap" rel="stylesheet">

  <style>
    {{{ page.css }}}
  </style>
.....

in otp.html:

<x-main>
  <div class="bg-slate-50 sm:px-4 font-zain">
  ....
</div>
</x-main>

in localhost, the font is working fine but when I deploy it on the server and send an email using Gmail the font does not work and take sans-serif

[cossssmin]

Most email clients do not support web fonts, see support here:

https://www.caniemail.com/features/css-at-font-face/