Cannot include custom font into emails

3.1k Views Asked by Un1xCr3w At 21 August 2016 at 10:59

First of all I'm sending email to number of customers that maybe gonna be like 16,000 mails and unfortunately I found issue in my custom font. I can't load it into my mail page. I tried this:

With link tag in HTML

<link href='https://fonts.googleapis.com/css?family=Droid%20Arabic%20Kufi' rel='stylesheet' type='text/css'>

With @font-face in css:

@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
    src: url(https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
         url(https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
         url(https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
         url(https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}

With @import

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

Don't tell me make it images because I can't and the reason is the mail form gonna be generated via PHP.

Any help will be appreciated thanks a lot.

Original Q&A

There are 1 best solutions below

Ted Goas On 21 August 2016 at 16:59

Custom fonts are not well supported in email clients. It's currently not possible to display webfonts in Outlook, Gmail app, or any webmail client. However you can specify a webfont for clients that do support it, and system fallback fonts for those that don't.

Placing something like this inside your <head> will get you the best possible coverage:

<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
    <style>
        * {
            font-family: sans-serif !important;
        }
    </style>
<![endif]-->

<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->

More on webfont support in email on Style Campaign.

Cannot include custom font into emails

There are 1 best solutions below

Related Questions in HTML

Related Questions in HTML-EMAIL

Related Questions in EMAIL-CLIENT

Related Questions in RESPONSIVE-EMAILS

Trending Questions

Popular # Hahtags

Popular Questions