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 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 planning to use Google web fonts on my site.
My site has lots of pages, but only a few CSS files.
-=> Is there any way to add this tag in the CSS file (because I don't want to edit all the HTML files)?
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
or do I need to add the above line in every HTML page's head section?
Yep, #import the google font in - jsfiddle example
Put this at the top of your CSS file
#import url('http://fonts.googleapis.com/css?family=Droid+Sans');
Then, reference it like normal
h1 { font-family: 'Droid Sans', arial, serif; font-size:24pt;}
Add the tags, how? Please explain yourself better.
In the HTML you can do this…
<style type="text/css" media="screen">
h1 { font-family: 'Droid Sans', arial, serif; }
</style>
If that's what you're asking?
How do I make a textarea have the same font as everything else on the webpage?
Currently I have my code:
test.html:
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="testarea">
<textarea></textarea>
</div>
</body>
</html>
test.css:
body { font: 100%/120% Verdana, Arial, Helvetica, sans-serif;}
#testarea textarea { width: 30em;height: 7em;font: inherit;}
Font inherits in Mozilla, but IE7 keeps Courier inside the textarea.
UPD: Apparently inherit does not work in IE for textarea, so I'll go with AlbertoPL's method.
Simply create a textarea element and define your font element there.
textarea { font: 100%/120% Verdana, Arial, Helvetica, sans-serif;}
you can move it out of the body element.
You'll have to define the font twice (once in body and once in textarea) if you don't want to use *.