Outlook 2010 Not Respecting CSS, Even <Font> Tags for Every Text

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 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.

Fall-Back Fonts Outlook 2019--Approach is not working

I'm not 100% sure why Times New Roman (TNR) isn't loading for scenario 1 as normally you shouldn't wrap web friendly fonts in apostrophes but that doesn't seem to be the deciding factor here.
Also, your method of fall back for web fonts isn't quite complete for Outlook.

Unfortunately Outlook doesn't follow the front-end & email industry standards to fall back to the next possible font declared. Instead when a web or non-web friendly font is encountered, Outlook will simply break the font declaration and apply TNR.
Now I would agree that this doesn't make sense since your scenario 1 doesn't follow this condition, but I think there may be something going awry with the declarations, TNR being wrapped in apostrophes or Outlook is confused by your web font naming.

Anyhow, the final piece of defining a fall back for Outlook clients on Windows machines is:

<!--[if mso]>
    <style type="text/css">
    h1,h2,h3,h4,h5,h6,p,a,span,td,strong,li {
        font-family:Times New Roman,serif !important;
    }
    </style>
<![endif]-->

Text in Outlook doesn't use line-height

You need to use the mso style "mso-line-height-rule". This is used to force Outlook to respect the line height rule. Please note this needs to be added PRIOR to the declared line-height or it will not work. See below:

<td background="images/11-text-1--alpha-d3c29e.jpg" 
bgcolor="#d3c29e" width="514" height="460"  valign="top" style="margin:0;padding:0;font-family:'Courier New',Courier,monospace; font-size:14px;font-weight:bold;color:#000000;mso-line-height-rule:exactly; line-height:15px;">        
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" 
    style="width:514px;height:460px;">
    <v:fill type="tile" src="images/11-text-1--alpha-d3c29e.jpg" color="d3c29e" />
    <v:textbox inset="0,0,0,0">
    <![endif]-->   
            #TEXT
    <!--[if gte mso 9]>     </v:textbox>   </v:rect>   <![endif]-->
</td>

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'); 
    }

iOS Outlook App only allowing a single media query in HTML email

The issue is due to a bug in their implementation, as documented here: https://github.com/hteumeuleu/email-bugs/issues/92

The easiest solution, since perhaps your minifying code may be removing whitespace and creating the double curly braces, }}, is to close the style block and start a new one, i.e.:

<style>
@media only screen and (max-width:600px) {
.para {
    font-size: 18px !important;
}
}
</style>
<style>
@media only screen and (max-width:445px) {
  .para {
    font-size: 20px !important;
}
}
</style>

Outlook 2010 Not Respecting CSS, Even <Font> Tags for Every Text