CC2
Cannot Get Google Webfonts to Work
Hi all, I'm trying to use the seemingly simple Google webfonts technique of adding the link tag to the head but nothing seems to work. I created a barebones email to test it, so can anyone tell me why this does not work? (I realize webfonts are fully supported but I can't see it in any client when running a Litmus test.)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Font Test</title>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<table cellpadding="0" cellspacing ="0" border="0">
<tr>
<td style="color: #444444; font-family: 'Lobster', Arial, sans-serif; font-size: 24px; line-height: 24px;">
This is a Web Font Test Q
</td>
</tr>
</table>
</body>
</html>
If you put the
<link>method as the very first thing under your<head>tag, that method should work. You may want to consider wrapping it in conditional code to force Outlook to use your fallback (instead of displaying in Times New Roman).<!--[if !mso]><!-- -->
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--<![endif]-->
I use this method too because I have trouble with
@importchoking and default Outlook to Times New Roman. However I've run into issues when templates using this code are run through an inliner.I recommend you avoid the
<link>tag entirely. You'll get the widest compatibility if you do the work of the<link>tag and put Google's CSS into your email directly. Open the URL provided by Google (e.g.https://fonts.googleapis.com/css?family=Lobster) and then copy-and-paste the source into your header styles. For example:I haven't seen the Times Roman fallback problem that Kellie mentions but adding conditional
if !msoprobably can't hurt although I've never had to use it. An additional benefit of this method is that its one less external connection necessary to display your email. Cheers!Definitely agree with this approach, but you can take it one step further and avoid the need for MSO conditionals to take care of Times New Roman by just wrapping the
@font-facedeclarations in a blank media query. Here's what we've been using lately. Simple, clean, works well.This is actually a great way to go about it, will have to give it a try. The cleaner the better, imo. Thanks.
Just wanted to add that when using Webfonts you need to take into account of Outlook's glitches and this method seems to work best IMHO
https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman#comment-6488
Thanks. Yeah I have the MSO conditional fallback like you mentioned, but I'm going to give Jason's comment a try, actually, because it might be simpler.
Just figured it out... I had to use the
@importmethod in the<style>tag ... Every article written on this, however, says to use the<link>method but that doesn't seem to work.Here you can find my solution for Google fonts and fallback for it together with all required fixes to get maximum coverage across diferent email clients:
https://litmus.com/community/snippets/80-google-fonts-fallback-all-needed-fixes
Try removing the single quotes in your font family. It might be your ESP that doesn't support single quotes within double quotes.