Getting Google font to load correctly into an HTML email in Outlook

3
votes

Hello all– I've found several web pages addressing this, but I'm still not having success. I want to load a google font (in this case, Fira Sans) into an html email so that it actually appears in Outlook.

I'm opening the .html file in a browser, where it looks good (but maybe because I have the fonts installed locally), but when I copy it to Outlook it displays as the fallback font, Helvetica.

Here's the code I've cobbled together from various sources, but still no luck:

IN HEAD (tried two things)

1.

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Fira+Sans:300,500,500italic" type="text/css">

<style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,500,500italic);
</style>

IN BODY

<td width=300 valign=bottom style="width:225.0pt; padding:0in 5.4pt 0in 5.4pt; font-family: 'Fira Sans', Helvetica , Arial, sans-serif;">
<p class=MsoNormal><i><span style="font-size:22.0pt; font-family:'Fira Sans', Arial, Helvetica, sans-serif !important; font-weight:500!important; color:#7030A0; font-style:italic;"><font face="'Fira Sans', Helvetica, Arial, sans-serif;">Joining Together</font></span></i></p>
</td>

Thanks!

2
htmlcssemailoutlook

2 Answers

0
votes

Your Url is wrong. Use any one of the below:

<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,500;1,500&display=swap');
</style>

OR

<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,500;1,500&display=swap" rel="stylesheet">
0
votes

The Outlooks on Windows don't support web fonts (and thus Google fonts). Well, almost… They do read the @font-face declaration, but they won't be able to actually load the distant font file. The Outlooks (from 2007 to 2016) will fall back to a serif font even if you have something else declared in your font stack because they use a different mecanism for fallback fonts (with the properties mso-generic-font-family and mso-font-alt, set directly in the @font-face declaration). See support for @font-face in Can I email and read more about those specific Outlook properties here.

A common way to tackle this is to hide your font declarations to Outlook by using conditional comments. Here’s what it’d look like in your case:

<!--[if !mso]><!-->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Fira+Sans:300,500,500italic" type="text/css">
<!--<![endif]-->