Can Outlook 2010 Use a Web Font in an HTML Email

Outlook 2010 overriding font-family from Arial to Times New Roman

Even if you set font-family: arial to table, it still wont work. You need to specifically set the font for each td inside your table to get it right.

CSS font stack substitution issues in Outlook when using Google Webfonts

UPDATE: Here is a
technique
to call webfonts with fallback to the font stack in all versions of
Outlook that break

Try declaring your webfont if NOT Outlook instead. The webfont might be problematic for Outlook, so not calling it at all might work. Worth a try...

Edit:

This issue has occured before with Outlook breaking when your first declared font is in quotes. This seems like an Outlook bug/limitation that is unavoidable unfortunately.

Outlook 2007 / 2013 not rendering CSS font-family declarations

I traced the issue to my STYLE declaration, which uses the @font-face to pull in a custom font file for supporting clients (i.e. Apple). Apparently, something about this use of the @font-face declaration breaks in Outlook 2007 - 20013.

<style>
@font-face {
    font-family: proxima-nova;
    src: url('http://assets/ProximaNova-Reg.otf');
}
@font-face {
    font-family: proxima-nova-blk;
    src: url('http://assets/ProximaNova-Black.otf');
}
</style>

I needed to get MS Outlook to ignore this STYLE tag, so I wrapped the entire block with the [if !mso] tag:

<!--[if !mso]><!-->
<style>
@font-face {
...  
}
</style>
<!--<![endif]-->

Wow, that was driving me crazy.

Outlook 2010 not respecting CSS, even font tags for every text

This will solve your problem:

<style type="text/css">
    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
    table td {border-collapse: collapse;}
</style>
<!--[if gte mso 9]>
    <style>.outlook { font-family: arial, sans-serif; }</style>
<![endif]-->
</head>
<body>

    <table align="center" width="95%" cellpadding="8" cellspacing="8">
        <tr>
            <td class="hide-on-small" align="center" valign="middle" style="border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 14px; color: #999999;">
                <span class="outlook">Rummy & Bingo Monthly</span>
        </td>
        </tr>
    </table>
</body>

I removed the unnecessary reiterations of your font-style declaration. There's no need to declare it anywhere other than the TD.
I moved your font-style declaration from the span to the TD along with your CSS class assignment of "hide-on-small".

The font-style was separated from the specifically to fix your Outlook problem.
- In the head, below any other CSS you may have declared, I added a conditional comment which will only be read by Outlook. Within this comment is a CSS class which will tell outlook that the font is Arial. Therefore Outlook will completely ignore the fact that your using a font that isn't available, thus negating any reason for it to find its own substitution.

Also, pulled out your inline CSS border-collapse declaration because you can just declare that in the head and in the body, give all your tables an attribute of border="0". Instead of writing style="border-collapse:none;" a dozen or more times.

Outlook 2010 html footer font family not applying after being sent

Calibri is only available on Windows as standard fonts, so all other recipients using MAC or Linux doesn't have Calibri installed and therefore shows your text in default font of that system.

Font issue on outlook email template

Here is a example. Hope this work.

Background Image Example:

<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <tr>
        <td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
        <td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="80" align="center" valign="top">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
        <td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
    </tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <tr>
        <td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
    </tr>
</table>

Font Example:

    @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat-Regular'), 
    url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-
   _WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff'); 
    }

Is there a way to use Google Web Fonts in an HTML email?

If the font is absolutely necessary, you will have to go with the text as image solution. As of December, only iOS Mail, Mail.app, Lotus Notes 8, default Mail on Android, Outlook 2000, and Thunderbird support the use of an external custom font.

See:
http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

Edit 2/10/2014: Since this is one of my most popular answers, here is the updated link on best practice of web fonts in emails:

http://www.campaignmonitor.com/resources/will-it-work/webfonts/