Why aren't web fonts working?

Delphine CURY posted 2015-07-22 15:27:19

Hello,
I am looking for a solution for my fonts are displayed correctly in my emailing on different email clients.
I tested several WebMail (Orange, Yahoo, Outlook, Gmail ...) But nothing is displayed correctly.
Can anyone help me?

I tested with @ font-face {}, withimport or with <link>.
I put everything in my "html" file.

Bonjour,
Je cherche une solution pour que mes polices s'affichent correctement dans mes emailing sur différens clients de messagerie.
J'ai testé sur plusieurs WebMail (Orange, Yahoo, Outlook, Gmail...) Mais rien ne s'affiche correctement.
Quelqu'un peut-il m'aider ?

J'ai testé avec @font-face { }, avec @import ou encore avec <link>.
J'ai tout mis dans mon fichier "html".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
@font-face {
    font-family: 'museo300';
    src: url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo300-regular-webfont.eot');
    src: url('../2015_JUILLET/ADX_FOIRFOUILLE_JUILLET2015/WebFontKit/museo300-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo300-regular-webfont.woff2') format('woff2'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo300-regular-webfont.woff') format('woff'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo300-regular-webfont.ttf') format('truetype'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo300-regular-webfont.svg#museo300') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo500';
    src: url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo500-regular-webfont.eot');
    src: url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo500-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../2015_JUILLET/ADX_FOIRFOUILLE_JUILLET2015/WebFontKit/museo500-regular-webfont.woff2') format('woff2'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo500-regular-webfont.woff') format('woff'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo500-regular-webfont.ttf') format('truetype'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo500-regular-webfont.svg#museo500') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo700';
    src: url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo700-regular-webfont.eot');
    src: url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo700-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../2015_JUILLET/ADX_FOIRFOUILLE_JUILLET2015/WebFontKit/museo700-regular-webfont.woff2') format('woff2'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo700-regular-webfont.woff') format('woff'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo700-regular-webfont.ttf') format('truetype'), url('http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/WebFontKit/museo700-regular-webfont.svg#museo700') format('svg');
    font-weight: normal;
    font-style: normal;
}


 /* Client-specific Styles */
         #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
         body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
         /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
         .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */
         #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
         img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
         a img {border:none;}
         .image_fix {display:block;}
         p {margin: 0px 0px !important;}
         h1, h2, h3, h4, h5, h6 {color: #6c7480 !important;}
         h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: #f17c72 !important;}
         h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
         color: red !important; 
         }
         h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
         color: purple !important; 
         }
         table td {border-collapse: collapse;}
         table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
         /*a {color: #f17c72;text-decoration: none;text-decoration:underline;!important;}*/
         /*STYLES*/



/*GENERAL*/
a {
    text-decoration: underline;
    color: #000000;
}
.prix{ color:#F00; font-weight:bold; font-size:20px;}
.td-standard { padding-top:10px; padding-bottom:10px;}
 @media only screen and (max-width: 599px) {
a[class=button-orange] {
    color: #FFFFFF !important;
    background-color: #F26C4F !important
}
span[class=span-orange] {
    color: #F26C4F !important
}
hr[class=mobile-hr] {
    width: 100% !important;
}
td[class=hide-on-mobile] {
    display: none !important;
}
table[class=responsive-resize] {
    width: 100% !important;
}
img[class=img-resize] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
td[class=w320-block-img] {
    display: block !important;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 70% !important;
}
td[class=w320-block-text] {
    display: block !important;
    margin: 0 auto;
!important
}
td[class=w320-block-text-footer] {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important
}
td[class=w320-block-text-center] {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important
}
td[class=w320-block-text-center-80percent] {
    display: block !important;
    margin: 0 auto;
    text-align: center !important;
    width: 80% !important;
}
td[class=w320-block-text-center-percent] {
    display: block !important;
    margin: 0 auto;
    text-align: center !important;
    width: 95% !important;
}
td[class=w320-block-text-nom] {
    display: block !important;
    margin: 0 auto;
    width: 100% !important;
    height: 120px;
!important
}
td[class=w320-block-other-button] {
    display: block !important;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 100% !important;
    height: 50px;
}
td[class=w320-block-other-text] {
    display: block !important;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 100% !important;
    height: 50px;
}
td[class=w320-block-info] {
    display: block !important;
    margin: 0 auto;
    width: 100% !important;
}
td[class=w320-block-footer-text] {
    display: block !important;
    margin: 0 auto;
    width: 100% !important;
    text-align: center !important;
    height: 70px !important;
}
td[class=w320-block-footer-icon] {
    display: block !important;
    margin: 0 auto;
    width: 100% !important;
    height: 30px !important;
    margin-bottom: 10px;
}
a[class=bout_phone] {
    border-radius: 10px;
    background-color: #0282A7;
    padding: 5px;
    color: #FFFFFF;
    font-size: 20px !important;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}




}
</style>
</head>
<body style="background-color: #CCCCCC;font-family: Arial, Helvetica, sans-serif; color:#000000; background:url(http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/Fond_FF_1euro.jpg);">

<!-- TABLE CONTENANTE -->
<table align="center" class="responsive-resize" border="0" cellspacing="0" bgcolor="#FFFFFF" cellpadding="0" width="650">
  <tr>
    <td class="w320-block-text" align="center" valign="middle" style="padding:10px;"><!-- TABLE CLIQUEZ -->

      <table align="center" class="responsive-resize" border="0" cellspacing="0" cellpadding="0" width="100%">
        <tbody>
          <tr>
            <td class="w320-block-text" align="center" valign="middle" bgcolor="#FFFFFF" style="padding:10px;font-size:10px; "> Si cet email ne s'affiche pas correctement, <a href="&&&" target="_blank" style="color:#000000">vous pouvez le visualiser gr&acirc;ce &agrave; ce lien.</a><br>
              <br>
              [EMV FIELD]HEADER[EMV /FIELD] </td>
          </tr>
        </tbody>
      </table>

      <!-- TABLE LOGO ET RESEAUX SOCIAUX -->

      <table align="center" class="responsive-resize" border="0" cellspacing="0" bgcolor="#FFFFFF" cellpadding="0" width="100%">
        <tr>
          <td class="w320-block-text" align="center" valign="middle"><table align="center" class="responsive-resize" border="0" cellspacing="0" bgcolor="#FFFFFF" cellpadding="0" width="100%">
              <tr> 
                <!-- IMAGE LOGO -->
                <td width="51%" align="center" valign="middle" class="w320-block-img" style="padding:10px;"><img src="http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/FoirfouilleLogo280px.png" width="280" height="88" class="img-resize" style="display:block;" border="0" alt=""></td>
                <!-- http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015 FACEBOOK & AUTRE  -->
                <td width="49%" align="center" valign="middle" class="w320-block-text" style="font-family: 'Avenir LT W01_55 Roman'; font-size:17px; color:#383838; line-height:14px;">Rejoignez-nous sur<br>
                <br/>
                <a href="https://www.facebook.com/pages/La-FoirFouille-La-Rochelle/1381060398808746" target="_blank"><img src="http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/FacebookLogo.png" alt="" width="50" height="50" class="txt-resize" style="border:0px;"></a><br>
                <br/>
                <span class="w320-block-text" style="font-family:'Museo700', 'Roboto Slab', 'Avenir LT W01_55 Roman'; ; font-size:17px; color:#383838;">La Rochelle / Puilboreau</span></td>
              </tr>
              <tr>
              <td width="51%" class="w320-block-text" align="center" valign="middle" style="padding:10px; font-family:'Museo700', 'Roboto Slab', 'Avenir LT W01_55 Roman', ; font-size:22px; color:#FF9933;">Jusqu'au 9 août 2015 </td>
              </tr>
            </table></td>
        </tr>
      </table>

      <!-- SEPARATEUR -->

      <table align="center" class="responsive-resize"  bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr>
          <td class="w320-block-info" align="center" valign="top" style="padding:0;"><img src="http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/bandeauMulticouleur.jpg" alt="Bandeau MultiCouleur Foir'Fouille" style="display:block; border:none" class="img-resize"></td>
        </tr>
      </table>

      <!-- PAVE 1 AVEC IMAGE ET NOM PROMO -->

      <table align="center" class="responsive-resize" border="0" cellspacing="0" bgcolor="#FFFFFF" cellpadding="0" width="100%">
        <tr>
          <td align="center" valign="top" class="w320-block-info" style="padding:0;"><img src="http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/OmbreAdresse_33.jpg" class="img-resize" border="0" style="display:block; " alt=""></td>
        </tr>
        <tr>
          <td align="center" valign="top" class="td-standard w320-block-info" style=" color:#FFFFFF; font-size:10px; font-family:Verdana, Geneva, sans-serif" bgcolor="#383838"><span style="font-weight:bold"> LA ROCHELLE / PUILBOREAU<br>
            T&eacute;l. <a href="tel:0546680968" style="color:#ffffff; text-decoration:none">05 46 68 09 68</a></span><span style="font-size:8px"><br>
            N&deg; SIREN 351 188 081</span></td>
        </tr>
        <tr>
          <td align="center" valign="top" class="w320-block-info" style="padding:0;"><img src="http://cdn.adrexodigit.fr/Juillet2015/ADX_FOIRFOUILLE_22072015/BandeaucouleurAdresse.jpg" alt="Bandeau Multicouleur FoirFouille" style="display:block; border:none" class="img-resize"></td>
        </tr>
      </table>

      <!--  PAVE 5 -->

      <table align="center" class="responsive-resize" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" width="100%">
        <tbody>
          <tr>
            <td valign="top" align="left" class="w320-block-text" style="padding:10px; font-size:10px;"> [EMV FIELD]FOOTER[EMV /FIELD] </td>
          </tr>
        </tbody>
      </table>

      <!-- SEPARATEUR -->

      <table align="center" class="responsive-resize"  bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr>
          <td class="w320-block-text" align="center" valign="top" style="padding:10px;"></td>
        </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Merci de votre aide, "Thank you"

Rémi Parmentier replied 2015-07-22 15:27:19

Bonjour Delphine ! Malheureusement, les web fonts ne sont pas bien supportées dans la majorité des clients mail (dont les webmails Gmail, Outlook et Yahoo). Je t'invite à consulter ce guide chez Campaign Monitor. Par contre, j'avais déjà fait des tests fonctionnels sur le webmail d'Orange. Le webmail d'Orange ne supporte pas la balise <link> ni @import mais supporte bien la déclaration @font-face dans une balise <style>. Par contre, afin de se conformer aux règles de sécurité des navigateurs, la police intégrée doit être appelée depuis une URL sécurisée en HTTPS. Le code suivant fonctionne par exemple :

<!doctype html>
<html>
<head>
    <title>@font-face in e-mail</title>
    <style>
        @font-face {
            font-family: 'Luckiest Guy';
            font-style: normal;
            font-weight: 400;
            src: local('Luckiest Guy'), local('LuckiestGuy-Regular'), url(https://fonts.gstatic.com/s/luckiestguy/v6/5718gH8nDy3hFVihOpkY5Bampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
        }
    </style>
</head>
<body>
    <h1 style="font:normal 1em 'Luckiest Guy', sans-serif; font-size:5vw; background:none; white-space:normal;">Luckiest Guy, Google Fonts, &lt;style&gt;</h1>
</body>
</html>

Translation for my non-french speaking fellows…

Unfortunately, web fonts are not well supported in the majority of email clients (including the webmail versions of Gmail, Outlook and Yahoo). I invite you to read this guide by Campaign Monitor. However, I previously made some functional tests on Orange's webmail. Orange's webmail doesn't support the <link> nor @import, but does support well the @font-face declarations in a <style> tag. However, in order to be compliant with browsers security rules, the font must be called from a secured URL in HTTPS. The previous code works on Orange for example.

Reply to Rémi Parmentier

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Why aren't web fonts working?

Sign in to Community

Join the Litmus Community

Sign up to Community

Forgot password