Custom font in @font-face not working

Question

I'm going mad. I'm trying to use a purchased font in my emailers, and I can't debug what's wrong / why it isn't working. This is the current head and DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">

I then also do a style declaration where I use @font-face to define this custom font. (I've stripped out the cloudapp links below since they're shortened, but I've checked the listings themselves against this example https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-face_rule_bold to see if the links work (by replacing mine into theirs) and it holds up there too.

<style type="text/css">

@font-face {
font-family:'montreal-regularregular';        
src:url([the actual Url hosted on cloudapp]) format("woff2"),
    url([the actual Url hosted on cloudapp]) format("woff")
    url([the actual Url hosted on cloudapp])  format('truetype');        font-weight:normal;        font-style:normal;}

@font-face {
font-family:'montreal-boldregular';        
src:url([the actual Url hosted on cloudapp]) format("woff2"),
url([the actual Url hosted on cloudapp]) format("woff");        font-weight:normal;        font-style:normal;}

@font-face {
font-family:'montreal-mediumregular' !important;        
src:url([the actual Url hosted on cloudapp]) format("woff2") !important,
url([the actual Url hosted on cloudapp]) format("woff")!important,
url([the actual Url hosted on cloudapp])  format('truetype')!important;        font-weight:normal;        font-style:normal;}

@font-face {
font-family:'montreal-demiboldregular';        
src:url([the actual Url hosted on cloudapp]) format("woff2"),
url([the actual Url hosted on cloudapp]) format("woff")
url([the actual Url hosted on cloudapp]) format("truetype");        font-weight:normal;        font-style:normal;}

You'll see that I've included !important (although it looks like that's not useful either). And then when I reference the font later in the <td> I do this:

<body style="font-family: montreal-regularregular,Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; margin: 0">
<table align="center" style="max-width:600px;min-width:360px;width:100%;background:#ffffff;padding-bottom:30px;" border="0" cellpadding="0" cellspacing="0">

<tr>
      <td colspan="2" style="padding:20px 30px 5px 30px;text-align:center;">

<p style="margin:0 20px;font-family:montreal-mediumregular, Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; color:#000000;font-size:15px;line-height:25px;padding:20px 0px 25px 0px;text-align:left;">
         Welcome back to the weekend  If you’re looking for a break from the boring weekday work vibes, then why not try something new?


        </p>

So you'll see there are SO many times that I'm trying to include it, but still no luck. Any idea what I'm messing up?

You're not posting your actual html code, so it's impossible to test it on our own to see what the issue might be. You don't mention what email clients do not work, so we can't easily tell you that custom fonts don't work on that client. — gwally, Apr 16 '18 at 14:40
Code supplied above is missing closing style, head, closing body and HTML. Apart from that the code seems to work as I have the fonts on my machine? Try closing elements/tags and your fonts are missing single quotes (without it the codes works as well). Also you have regular twice after `montreal-regular`. — Syfer, Apr 17 '18 at 05:11

Matthias Seifert · Answer 1 · 2018-04-17T06:30:05.570

Does it work, when you open the Email Template in your browser? The thing is, that HTML Mails are a tricky thing, especially when it comes to CSS standards, which are supported by all browsers for years. Only a handful of mail clients (see below) have support for @font-face at the moment, so this may be the reason, why this does not work, since I dont know what's your target client. Note, that some of the most common clients, like GMail, Inbox, the latest Outlook for Windows, or Yahoo Mail don't support this (in April 2018)!

Clients supporting @font-face

Desktop

AOL Desktop
Apple Mail 10
Outlook 2000-03
Outlook for Mac
Postbox (partially)
Thunderbird (partially)

Mobile

Android 4.4.4 Mail
AOL Alto
iOS10 (or newer) Mailapp
Outlook for Android
Sparrow

Webmail

AOL Mail

Source

Writing HTML mail templates can be really painful, so you may want to take a look at the page I linked above, to find out what you can actually use safely. Sadly, it wont be as much as modern browsers support, but you should avoid things like CSS Declarations in <head> (Always use inline CSS for HTML Mail, that is the only thng ever, where I recommend this), use <table> for layouts (I see, you actually do this), and always check the CSS Rules you want to apply.

So if you want to use your purchased font for headlines, you may can use an image for this. But this is actually not a good idea, if you want to use it as a body font.

score 0 · Answer 2 · answered Apr 16 '18 at 11:57

Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.

You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don't have to write your own).

Also:

@font-face {
  font-family: 'MyWebFont';/*a name to be used later*/
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

or better still for modern browsers

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

Meanwhile, please make sure you use single-quote or double-quote while referencing your custom font. e.g.

p{ font-family: 'montreal-mediumregular', Lucida Grande, Lucida Sans Unicode, Tahoma, sans-serif;}

This should work.

score 0 · Answer 3 · answered Apr 17 '18 at 05:19

Here is an example using your code with Google fonts. Hope this gives you an idea as to where you went wrong in your code. NOTE: Web fonts do not work on all email clients. For support check @Mattias' listing above.

/* latin-ext */
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: local('Signika Regular'), local('Signika-Regular'), url(https://fonts.gstatic.com/s/signika/v8/vEFR2_JTCgwQ5ejvG18mBkho.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: local('Signika Regular'), local('Signika-Regular'), url(https://fonts.gstatic.com/s/signika/v8/vEFR2_JTCgwQ5ejvG1EmBg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
      <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
  </head>
 <body style="font-family: 'Signika',Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; margin: 0">
    <table align="center" style="max-width:600px;min-width:360px;width:100%;background:#ffffff;padding-bottom:30px;" border="0" cellpadding="0" cellspacing="0">

    <tr>
          <td colspan="2" style="padding:20px 30px 5px 30px;text-align:center;">

    <p style="margin:0 20px;font-family:'Signika', Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; color:#000000;font-size:15px;line-height:25px;padding:20px 0px 25px 0px;text-align:left;">
             Welcome back to the weekend  If you’re looking for a break from the boring weekday work vibes, then why not try something new?

             
            </p>
  </td>
  </tr>
  </table>
  </body>
</html>

Cheers

Custom font in @font-face not working

3 Answers3