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

Question

I am using Google Font Libre Caslon Text for the body of our email and a fall-back font of Times New Roman. The results are weird.

When I use this inline style font-family: 'Libre Caslon Text','Times New Roman',serif; Neither font works in Outlook 2019.

However, if I use this inline style font-family: 'Libre Caslon','Times New Roman',serif; Times New Roman Works in Outlook 2019.

What am I missing?

Answer 1

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

You can tailor the element labels to your specific use case or just use a broad set of selections like I use above.

Add this in and give both scenarios another test run and let us know how it goes.