Can Outlook 2010 use a web font in an html email? - html

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.

Related

How to use outside fonts in CSS

I have downloaded a folder full of svg and otf-files. They contain a font that I would like to use in my html-document. Here's what the folder looks like:
First question:
Which of the files should I use? I understand that "process.svg" and "process-yellow.svg" probably have different colors, BUT, when we have one "process-yellow.svg" and one "process-yellow.otf", which one should I use?
Second question:
How do I use the font in my HTML document? So far I've tried this:
In the html16.html style-element:
<style type="text/css">
#font-face {
font-family:'Process';
src: url('/fonts/process.svg#process') format('svg');
}
p.text1 {
width: 140px;
border: 1px solid black;
word-break: keep-all;
font-family: 'Process';
}
</style>
In the html16.html body-element:
<body>
<b>word-break:keep-all</b>
<p class="text1">Tutorials Point originated from the idea that there exists-a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
But it doesn't do anything to the font. It just looks like it would look without me changing the font.
EDIT: It should be added that importing woff-fonts works for me, like I did here:
#font-face {
font-family:Process;
src: url(https://www.tutorialspoint.com/css/font/SansationLight.woff);
}
If web embedding is allowed. You can generate other font type files from here, which works for the older browsers.
#font-face {
font-family: 'Process';
src: url('/fonts/process.eot') format('embedded-opentype'); /* IE9 Compat Modes */
src: url('/fonts/process.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/process.woff') format('woff'), /* Modern Browsers */
url('/fonts/process.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/process.svg#process') format('svg'); /* Legacy iOS */
}
This should work. Please check with below syntax.
#font-face {
font-family: novalight;
src: url('/static/src/fonts/novalight.otf');
}
.proximanovalight {
font-family : novalight, sans-serif;
}
Try This - Import like so,
#import url('https://fonts.googleapis.com/css?family=El+Messiri');
Then use:
font-family: 'El Messiri', sans-serif;

Cross browser Semibold font issue

I am using font "Signika" for my web app. The design is provided in Adobe Illustrator files where they have used the font "Signika Semibold".
First method:
I applied font-family: Signika Semibold but it works as semi-bold only on Chrome. Firefox and IE display the text in normal font weight.
JS Fiddle
HTML
<p class="semi">
Abcd Efgh
</p>
CSS
.semi{
font-family:'Signika Semibold';
font-size:14px;
}
Second method:
I applied font-family: Signika and gave font-weight: 500 for semibold. However it appears as bold instead of Semibold on Chrome.
JS Fiddle
HTML
<p class="weight">
Abcd Efgh
</p>
CSS
.weight{
font-family:'Signika';
font-weight:500;
font-size:14px;
}
Is there a workaround for fixing this issue?
Some screenshots would be awesome. Fonts do tend to appear heavier in Webkit browsers because they use sub-pixel antialiasing for font smoothing. Try setting -webkit-font-smoothing: antialiased; and it should start looking similar to how it looks in other browsers.
Have a look at this page for some more details.
There is a caveat to using this though: Generally, you should let the browser handle this. You'll notice that the MDN page mentions this is a non-standard feature.
If you're interested in how these different smoothing techniques produce different outputs, check this out.
SOLUTION
Used google fonts with required styles:Normal(400), semi-bold(600), bold(700))
Link of Google Font
Imported the font by including this code in HEAD section of HTML
<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>
Then in CSS,
For Normal
font-weight:400;
For Semi-bold
font-weight:600;
For Bold
font-weight:700;
By using this method, fonts on all browsers look alike.
Actually, your second JSFiddle had:
font-weight: 600;
Instead of 500.
Here's your fiddle updated.
http://jsfiddle.net/gbj7b1jp/1/
Now it's not bold.
Semibold usaly is font-weight:400;
However You scan specify Your font properties when importing fonts with #font-face:
#font-face {
font-family: Signika;
src: url(SignikaLight.otf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: Signika;
src: url(SignikaRegular.otf);
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: Signika;
src: url(SignikaSemibold.otf);
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: Signika;
src: url(SignikaBold.otf);
font-style: normal;
font-weight: 600;
}
This is a known issue in CSS. Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work. You can have a look on this link(only runs in IE) and identify the best match of font style from the list is the easy hack to this problem.
http://www.cs.tut.fi/~jkorpela/listfonts.html

CSS - Include multiple fonts in one CSS file

How can I add more that one font in a CSS file? I have tried the following but it doesn't seem to work.
#font-face {
font-family: 'Inspira_Reg';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Bold';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Italic';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Medium';
src: url('http://myfonturl.com');
}
And then to use the font, I simply set the font-family property in the CSS IDs like so:
#titleSection {
margin: 25px 5px auto auto;
font-size: 11px;
text-align:left;
font-family: 'Inspira_Reg';
color: black;
}
But it doesn't seem to work. The font doesn't seem to get recognized, it just seems to use Arial or whatever the default is.
I am using the latest version of Google Chrome and the font types I am using are TTF files.
Thanks, Dan.
The #font-face rule allows custom fonts to be loaded on a webpage.
Once added to a stylesheet, the rule instructs the browser to download
the font from where it is hosted, then display it as specified in the
CSS.
For cross browser compatibility, It seems that font-face requires multiple definitions. For example, this is from a CSS-tricks article:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
An alternative to using this would be to use an import (which would need to be placed at the start of your css file)
Something like:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
which could then be used via:
font-family: 'Open Sans', sans-serif;
This could be used for multiple fonts, by importing them at the top of your CSS, and using the font-family declaration.
For many different fonts, and more information on using them, you could have a look here on google fonts
well every thing looks good except for the font url. you should give the local address of your font. let me give you an full example buddy:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule.</p>
</body>
</html>
so place your font the html folder and use the code :)

Font does not load using html

on my website my font does not seem to be loading. I added the abel font family to my code. Here is a snippet of what i have tried.
<p style="margin-left: 620px; margin-top: -355px;"
<span style="font-family: 'font-family: 'Abel', sans-serif; font-size: 16px;">Random</span>
</p>
I have tried multiple things including css and nothing seems to work. I know this is a simple concept but i would just like to know how to fix it. I am using bootstrap aswell if that seems like it may cause an issue please tell me.
thanks
You have to load the server path of your font by css:
Check this post to know how to do http://www.newvibe.ca/92weblessons
#font-face {
font-family: 'Bebas Neue';
src: url('http://www.example.com/css/font/BebasNeue.eot'); /* IE9 Compat Modes */
src: url('http://www.example.com/css/font/BebasNeue.eot?#iefix') format('embedded-
opentype'), /* IE6-IE8 */
url('http://www.example.com/css/font/BebasNeue.woff') format('woff'), /* Modern
Browsers */
url('http://www.example.com/css/font/BebasNeue.ttf') format('truetype'), /* Safari,
Android, iOS */
url('http://www.example.com/css/font/BebasNeue.svg#svgFontName') format('svg'); /*
Legacy iOS */
}
Hope this will help you ;)
Try:
<span style="font-family: 'Abel', sans-serif; font-size: 16px;">Random</span>
I'd put the style on the < p> tag not the span tag, I've had issues trying to do that in the past.
Also as an alternative might want to put your style in an external CSS file and just create a class that you assign to your p tag :)
external will make your life alot easier

CSS font stack substitution issues in Outlook when using Google Webfonts

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