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.
Related
I am trying to add support for dark mode to my email templates, however am having an issue when it comes to Outlook. For some reason Outlook is partially overriding the background of my button which is causing it to display incorrectly:
The HTML for the button is as follows:
<td align="center" style="word-break: break-word; font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px;">
Reset your password
</td>
The button has the following inline style (formatted for your convenince):
color: #fff;
border-color: #13c2c2;
border-style: solid;
border-width: 10px 18px;
background-color: #13c2c2 !important;
background-image: linear-gradient(#13c2c2, #13c2c2) !important;
display: inline-block;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
-webkit-text-size-adjust: none;
box-sizing: border-box;
Additionally, I've already added the following to the <head> section of my email.
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
Thanks!
The bad news is that we cannot specifically target Dark Mode via CSS in email via #media query or generated class name for Gmail or Outlook. Gmail replaces color values in the sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override it in the sheet.
Solution
Until Google and Microsoft offer a solution, the best approach forward is to accept this is a reality and design emails that work no matter what the background color the user chooses to view them. More users are adopting Dark Mode, so it's only going to become more popular going forward.
Good luck.
Image 1x1px background + color = bulletproof button color:
<a href="https://ilovecode.com" width:auto;font-family:Roboto, arial, sans-serif;font-size:16px;color:#ffffff;border-style:solid;border-color:#59BC2B;border-width:10px 20px;display:inline-block;background-color:#59BC2B;background-image:url(https://path-to-the-1px-image.png);text-align:center;text-decoration:none;">GO!
Outlook.com and Outlook (Windows/Mac/Android/iOS) will invert/adjust most colours, but for some reason they don't adjust border colours, which is why your <a> tag's borders are the original colour, but the background-color of the <a> has been adjusted for dark mode. Try using border-color: transparent;.
Which Outlook? (Outlook desktop for Windows, 2007-19? Outlook desktop for Mac? Outlook on Android? iOS? Outlook.com/365 webmail?)
You may be able to try this trick, courtesy of Rémi Parmentier (I say 'may' because I don't have the code for your button):
<a style="color:blue;">
<span class="dark-mode-red">…</span>
</a>
And this in your <head> section:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
#media (prefers-color-scheme: dark) {
.dark-mode-red {color:red !important}
}
</style>
Thus, remove background-image: linear-gradient(#13c2c2, #13c2c2) !important; from your inline section (anything inline will get translated), and attach that to the #media dark mode style.
This is a full working example (although Outlook Office 365 Windows shows black text):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
#media (prefers-color-scheme: dark) {
.darkbutton {
color:#ffffff !important;
background-image: linear-gradient(#13c2c2, #13c2c2) !important;}
}
</style>
</head>
<body>
<td align="center" style="word-break: break-word; font-family: Helvetica, Arial, sans-serif; font-size: 16px;">
Reset your password
</td>
</body>
</html>
Well, it's not entirely true that you cannot change the background-color to what is set for the border. You actually can change that to tackle this hellish issue in Outlook. Sometimes though, and this case is one of those 'sometimes'.
You use background-image already and that is indeed the way to go. Replace the linear-gradient by a 1x1 pixel .png file that exactly contains that border-colour and repeat that. That color will not be inverted - it's an image after all. For the sake of compatibility, you could try to apply background="file here" as an attribute. It will repeat infinitely, but it's exactly what we want. The color will, however, remain white, unless you make that entire button a separate image.
Take out the background-color element on your a tag. You already have the
background-image:linear-gradient(#13c2c2, #13c2c2)
and that's all you need.
I am rendering some HTML using WebView based on EFL WebKit in Tizen 2.4 and 3.0 SDK.
<div className="hexArea" id="hexArea1">
Content
</div>
and corresponding CSS:
.hexArea {
position: relative;
height: 95%;
padding: 3px;
white-space: pre;
text-overflow: clip;
overflow: auto;
border: 1px solid #0F0F0F;
color: #0F0F0F;
font-family: "Lucida Console", "Courier New", Courier, monospace;
}
While this works perfectly well on several platforms such as Desktop, Android WebView, iOS WebView, it does not show fixed-font on the Tizen App. I can't seem to set font for anything on the page.
I tried style="font-family: 'monospace'" on the div, I tried to make the CSS just font-family: monospace, but the html on the Tizen WebView just does not seem to honor font-family.
I am trying to display bytes in hex and decimal, and it looks horrible with normal font. Any ideas how to fix it?
EDIT: I even tried <pre> tag but shows in normal font.
Currently, Fixed font resources seem to be not provided in the Tizen SDK by default. But it's possible to display a fixed-font in app side using CSS #font-face or the Google Font API.
Use CSS #font-face with font resource.
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
I think you can add a fixed font resource in your app and load and display the font using CSS #font-face.
Use Google Font API.
https://developers.google.com/fonts/docs/getting_started
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto Mono">
<style>
.hexArea {
font-family: "Roboto Mono";
}
</style>
</head>
<body>
<div>normal font:1234567890</div>
<div class="hexArea">fixed-font:1234567890</div>
</body>
</html>
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.
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
I'm actually creating a newsletter. When i open the email into outlook, outlook web access, the layout is exactly the same as the one i built.
Yet when I open the same email in my windows phone 8 font size is not respected and the email has no longer the same layout.
Do you have any kind of suggestion ?
I have this css instruction in my tag. (-ms-text-size-adjust: none;)
body {
background-color: #f9fbf4;
margin: 0;
padding: 0;
-ms-text-size-adjust: none;
}
I also put this kind of css in the style span but it doesnt work
<span style='font-size: 8.5pt; font-family: Georgia,"sans-serif"; color: white; font-size-adjust: none;'>Hello</span>
This might have something to do with the viewport size on the device. You can try setting the initial scale to see if that resolves the issue.
<meta name="viewport" content="width=device-width; initial-scale=1.0;>