I am using the following code in emails to import the font 'Open sans' but it shows to users only who have the font already in their systems else it shows the arial font.
#import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
body {
font-family: 'Open Sans', sans-serif;
}
table,
td,
tr,
th {
font-family: 'Open Sans', sans-serif;
}
h2,
p,
div {
font-family: 'Open Sans', sans-serif;
}
what am I doing wrong?
Custom fonts are not supported in all email clients. It's currently not possible to display webfonts in Outlook, Gmail app, or any webmail client. Be aware that fallback system fonts will display in some email clients no matter what's coded in the email.
However you can specify a webfont for clients that do support it, and system fallback fonts for those that don't. Placing something like this inside your <head> will get you the best possible coverage:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<!--<![endif]-->
More on webfont support in email on Style Campaign and Litmus.
Related
I used SourceSansPro to match the font in design, FF, Safari seem ok. Chrome and IE 11 have issue.
Here is the design for the font (due to proxy, cannot upload, but have a look at FF and Safari)
Here is code:
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet"
type="text/css"
/>
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
It seems the bold is quite different in IE and Chrome.
In summary, need to make the font style in IE and Chrome, same as FF and Safari.
By default, the code you're using there only include the 400-weight font, and browsers have different reactions when trying to get a bold version of a lighter font - some make it bold themselves, or just load a different font. In order to load the font weights you want (along with italic versions), you can use a line like this:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
With the versions/weights separated with commas.
If you go to the Google Font page for this, you can click "Customize" to select which fonts to include, and it'll generate the embed code for you.
You can use this code
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet" type="text/css" />
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
I have an HTML email code as given in the below link:
https://privatebin.net/?1ca92ace7be6c777#LLNgtdGPXCC4Si0Ui7jsEt7P/g+PsZ1gRq08qBTOljo=
The issue is the fonts linked by link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet" type="text/css" is not displayed correctly even though I have added inline styles to all tags.
Also an underline is displayed for the renew button. I tried by adding text-decoration:none style with !important. but was of no use.
Any opinions?
you asked a few questions here so I'll do my best to answer them separately.
Web fonts, as mentioned by others, are not supported in all email clients. It's currently not possible to display web fonts in Outlook, Gmail app, or any webmail client. Be aware that fallback system fonts will display in some email clients no matter how the email is coded.
For clients that do support web fonts, something like this inside your <head> will get you the best possible coverage:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
More on web font support in email on Style Campaign and Litmus.
Regarding the underline in the button, sometimes email clients place the default (and sometimes blue) underline in links within buttons. This can be reset by targeting a <span> inside the <a href=""> button:
CSS
<head>
<style>
.button-link {
text-decoration: none !important;
}
</style>
</head>
HTML
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 110%; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;">
<span style="color:#ffffff;" class="button-link">Button Text</span>
</a>
</td>
</tr>
</table>
Actually, I didn't get you what exactly you're trying I think you want this applying text-decoration: none; to an anchor. try like this
a:hover { text-decoration:none; }
And if you want font to the body then apply this
body{ font-family: 'Source Sans Pro', sans-serif;}
Web fonts do not work in all email clients. Some of the clients where they do not work include Gmail, Yahoo, some fonts do not work in Outlook and in email clients for Android devices.
You need to choose a backup font which will be used when Open Sans is not supported. I suggest Trebuchet or Arial or what meets your clients expectations for a fallback font. Something like this:
font-family: "Open Sans, Trebuchet, sans-serif;";
These links will give you a better understanding of web fonts and how to use them in email.
https://www.campaignmonitor.com/css/text-fonts/font-face/
https://www.cssfontstack.com
https://www.cssfontstack.com/Open-Sans
https://litmus.com/blog/the-ultimate-guide-to-web-fonts
Your Button Issue
Your button only shows an underline in Windows Mail. However, the button shows up as Times New Roman in Outlook because you're using single quotes '' in the font-family description. It sees that as an error and defaults to Times. You should address this.
You are having display problems with iPhone 5 and Android you should address before you send out the email.
Good luck.
I know this has been asked everywhere online and I've exhausted most of the solutions I've come across. I am trying to set the font-family on all of the elements within the body of an email.
It works across everything fine (Outlook Mac, Gmail, Yahoo) using this CSS:
<style>
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
but not on Outlook Windows...
I tried to set the font-family inline on every single element in my email like the snippet below and it's still reverting to Times New Roman. Any advice on this would be much appreciated.
<h2><span style="font-family: arial, helvetica, sans-serif;">EMAIL HEADING TEXT GOES HERE</span></h2>
Many thanks.
Try this code, you need to wrap your style for MS Outlook. For more details click here
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
you have to wrap your style like this
<!--[if !mso]>
<style type=”text/css”>
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
as i remember outlook will fallback to time new roman if you use style
I've tried several things, including wrapping the css. Any ideas on how to get an html email Outlook 2010 to use a webfont and not default to a preinstalled font?
Here is some of the stuff I've tried:
<style type="text/css">
#font-face {
font-family: 'thegirlnextdoor';
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
</style>
The following technique does not require repetitive use of conditional comments. I have tested this extensively:
Inline your web-safe font family as usual, but with an extra classname on the element. (If you're using an automatic CSS inliner, it's OK to specify your web-safe fonts with the rest of your CSS using the .webfont classname.)
<td style="font-family: arial, sans-serif;" class="webfont">Text</td>
In the <head>, override the web-safe font family with your webfont like so:
<style type="text/css">
#import url(http://mysuperjazzywebfont.com/webfont.css);
#media screen { /* hides this rule from unsupported clients */
.webfont {
font-family: "Super Jazzy Webfont", arial, sans-serif !important;
}
}
</style>
Note: wrapping the .webfont class in the simple #media screen query simply prevents Outlook 07, 10 and 13 from mistakenly using Times New Roman instead of your fallback fonts. Reference
These clients display the web font:
Apple Mail
iOS Mail
Android 4.2 Stock Mail Client
Lotus Notes 8
Outlook 2000
Outlook 2011
AOL Webmail (in browsers that support #media)
The following Outlook versions get Arial:
Outlook 2002
Outlook 2003
Outlook 2007 (instead of Times New Roman)
Outlook 2010 (instead of Times New Roman)
Outlook 2013 (instead of Times New Roman)
... and numerous other more predictable clients get Arial.
Outlook '03, '07, '10 and '13 do not support webfonts. Outlook '00 and '11 do.
You also have to be mindful of the fallback. If you put in a quoted font declaration, or a webfont in the stack, unsupported Outlook versions will revert to Times New Roman, completely ignoring your font stack. After much testing, this seems to be the best solution across all clients.
Put this in your header style tag:
#import url(http://fonts.googleapis.com/css?family=Lobster);
Use it like this:
<font style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;">
<!--[if (!mso 14)&(!mso 15)]><!--><font style="font-family: Lobster, 'Lobster', Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;"><!--<![endif]-->
Your text here
<!--[if (!mso 14)&(!mso 15)]><!--></font><!--<![endif]-->
</font>
This should work in clients that support webfonts, and gracefully fall back to the font-stack in the rest. You could also declare your outer stack in a <td> if you prefer.
Yes I know, Lobster is an ugly webfont, but it worked well for testing...
I really like Zougen Moriver's answer. Although I worry about the <head> being stripped.
I tried hiding the font stack in a conditional statement but it didn't work for me. Neither did the #import. So I wrapped each block of copy with a font tag like so:
<span style="font-family: ProximaNova-Reg, Arial, sans-serif; font-size: 16px; color: #333333; mso-line-height-rule: exactly; line-height: 20px; text-align:left;"><font face="Arial, sans-serif;">It’s an unforgettable night of friends, thrills, memories and laughs topped off with a performance by TBD on the Music Plaza stage. No senior should miss this once-in-a-lifetime experience.</font></span>
It worked during testing.
This way if the <head> ever gets stripped then the fall back to Aril remains intact.
The down side is that it's tedious work to put that <font> around every block of copy.
I like Josh Harrison's answer. But do you have to repeat this on 'mobile' breakpoints? i.e. have
#media screen {
h1 { font-family: Merriweather,Georgia,serif !important; }
h2 { font-family: Merriweather,arial,sans-serif !important; }
p { font-family: Merriweather,arial,sans-serif !important; }
}
#media screen and (max-width: 660px){
#main_table { width:92% !important; }
h1 { font-family: Merriweather,Georgia,serif !important; }
h2 { font-family: Merriweather,arial,sans-serif !important; }
p { font-family: Merriweather,arial,sans-serif !important; }
}
I personally have never tried to do this, but since you have defined the font face, I would try the following to see if it will get applied:
html, body{
font-family: 'thegirlnextdoor', sans-serif !important;
}
If you have additional preferences to the font-family on 'thegirlnextdoor' not downloading properly, you can add it after it like I have done with adding the sans-serif font-family.
Do note that if using this in a web mail client, the snippet my have undesirable effects. If that is the case, you will need to find the section to apply it to. For example, only apply it to p tags. In most case, it would probably be safest to define a class and apply it yourself:
<style>
#font-face {
font-family: 'thegirlnextdoor';
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot? #iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
.fancy-font {
font-family: 'thegirlnextdoor', sans-serif !important;
}
</style>
And apply it like so:
<span class="fancy-font">My e-mail title</span>
Edit
Upon finding this link and glancing over it, #font-face isn't supported by Word or Outlook. If you really want to use the font, odds are you will have to install the font to all computers that could receive the e-mail and have a suitable fallback in-case it isn't installed.
Using Google Webfonts in an HTML email I ran into font substitution issues in Outlook (2007,2010, etc.) that didn't occur prior to incorporating webfonts.It ignores the font stacks and goes right to Times.
This happens despite using inline fallback font stacks.
I've noticed similar issues that have been posted here before, but only as a general question, not tied to the use of webfonts. Previously all of the font fallbacks worked correctly. I'm using Litmus to conduct the email testing.
Does anyone know why this might be happening?
Link to Litmus: https://litmus.com/pub/53a33c7/screenshots
Originally linked fonts in CSS like so:
<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'>
I also tried using #font-face and self hosted files after seeing a possible solution in another answer, but it didn't work (I updated class names too):
Except from font-face attempted workaround:
<!--[if !mso]><!-->
#font-face {
font-family: 'droid_serif';
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
Outlook specific override CSS seems to work, but there are priority issues. I don't believe Outlook recognizes the !important declaration so I've been working towards more specific selections. However, I still don't understand why this is happening and if there is a simpler fix.
Outlook Font Override Excerpt:
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
h1 { font-family: 'Georgia',serif !important; font-weight:normal; }
h1 a { font-family: 'Georgia',serif !important; font-weight:normal; }
h2 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; font-weight:normal; }
h3 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.cover,img.cover,a.cover {
display: block;
visibility: visible;
td { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.droid { font-family: 'Georgia', serif; }
}
</style>
<![endif]-->
Example of problematic code:
<td height="30" colspan="3" align="left" valign="middle" class="featured">
<h2 style="text-align: left; padding: 0; margin: 0; color: #00799f; font-family: 'Roboto',arial, helvetica, sans-serif; font-size: 21px; font-weight: 100; background: none; border-bottom: 1px solid #b1d6e2; text-decoration: none; line-height: 36px; mso-line-height-rule: exactly;">cover story</h2>
</td>
UPDATE:
I've tried the suggestion in the answers to put the webfont import code inside conditional tags that exclude Outlook to no avail.
<!--[if !mso]><!-- -->
#import url(http://www.example.css);
<!--<![endif]-->
AND
<!--[if !mso]><!-- -->
#import url(http://fonts.googleapis.com/css?family=Oxygen);
<!--<![endif]-->
UPDATE II (SOLUTION):
With all the help offered it's clear a number of seemingly minor issue all could cause this problem. The font-face method seems to be preferable to #import. Having the webfont name not be the same as the local font can cause the same issue, but that's just not what was happening with this particular email.
I had tried conditional code early on to hide the webfont import code from Outlook <!--[if !mso]><!--> altogether.
The problem was I did this within a CSS style tag in the head section. Simply placing this code in its own style tag as shown below made the difference.
I confirmed it's working as I was able to remove the extra workaround CSS code I had used to detect for version of Outlook 2007 and greater to restore h1, h2 values to the standard font stack.
<!--[if !mso]><!-->
<style type="text/css">
#font-face {
font-family: 'oxygenlight';
src: url('http://www----/fonts/oxygen-light-webfont.eot');
src: url('http://www.----/fonts/oxygen-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.-----/fonts/oxygen-light-webfont.woff') format('woff'),
url('http://www.-----/fonts/oxygen-light-webfont.ttf') format('truetype'),
url('http://www.-----/fonts/oxygen-light-webfont.svg#oxygenlightlight') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<!--<![endif]-->
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.
To get Outlook to use your font-stack instead of substituting your web-font with whatever font Outlook chooses add add a conditional comment which will only be read by Outlook to assign your font-stack backup fonts. Define your web-font but do not define it in the conditional comment so Outlook will ignore the web-font, go straight for it's conditional comment and just display Arial.
<style>
#import url('http://www.yourdomain.com/webfont.css');
</style>
<!--[if gte mso 9]>
<style>
.webfontsubstitute { font-family: arial, sans-serif; }
</style>
<![endif]-->
</head>
<body>
<a href="#" target="_blank" style="font-family:superwebfont,arial,sans-serif;">
<span class="webfontsubstitute">WEB FONT STYLED TEXT HERE</span></a>
I've been having this problem too and have just found quite a simple fix. Once you've imported your web font, #media screen { } can be used to single out clients which support media queries, and these happen to be the ones which support web fonts. Thus, simply specifying the font-family declaration inside and outside of this selector lets you hide specific fonts from email clients such as Outlook, so your next appropriate fallback font will be displayed, and your web font will appear nicely in clients that support it.
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
.h1 { font-family: 'Arial', 'Helvetica', sans-serif }
#media screen {
.h1 {
font-family: Open Sans, 'Arial', 'Helvetica', sans-serif
}
}
Incidentally, Campaign Monitor suggests that #import is better than #font-face in emails in general.
I remember having a similar issue awhile back. In the end I think it was the #import causing the problem and I had to use a different method to pull in the fonts.
Instead of using the #import go with a #font-face method.
#font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'), local('Oxygen-Regular'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/eAWT4YudG0otf3rlsJD6zOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
Then use the font as you would normally:
h1 {
font-family: 'Oxygen', sans-serif;
}
The issue is probably occurring because your user has locally installed version of the fonts and there is a conflict.
Try #font-face import (this is the way Google WebFonts works anyways), and simply rename the font-family to something different.
E.g.
#font-face {
font-family: 'droid_serif';
to:
#font-face {
font-family: 'droid_serif_alt';
Be sure to reflect the change in the rest of your markup!
You have to use "mso-font-alt" for Font-Fallback (Outlook 2010,2013,2016):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
....
<style type="text/css">
#font-face {
font-family: 'droid_serif';
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
mso-font-alt: 'Arial';
}
...
</style>
</head>
Another trick to override custom css declarations:
<!--[if mso]>
<style>
body,table tr,table td,table th,a,span,table.MsoNormalTable {
font-family: 'Arial', 'Helvetica', 'sans-serif' !important;
}
.custom-headline{
font-family: 'Times New Roman', 'serif' !important;
}
</style>
<![endif]-->
Please also have a look at: https://litmus.com/community/code/36-outlook-and-fallback-fonts