Wonder if anyone can help - I am testing an HTML email in various clients, it has a arial black set as a font, and the customer wanted the the underline taking off the link. All fine and dandy in browsers when i use the standard inline css to do this - However when I test in the clients the underline shows, after a bit of investigation it appears its arial black thats the issue. Is there anyway at all to use arial black and turn the underline off ?
blah blah
Put 'Arial Black' in quotes and see if that helps, like so:
style="font-family: 'Arial Black', Arial, Helvetica, sans-serif;/* ... */"
With the CSS font-family property, it is best practice to put quotes around font names that contains spaces.
Some email clients will not allow quotes in the font-family declaration.
Some email clients will disregard the font-family declaration and use the font declaration.
try:
style="font: 14px Arial,Helvetica, sans-serif; font: 14px "Arial Black"Arial,Helvetica, sans-serif; font-size: 14px; font-family: Arial,Helvetica, sans-serif; font-family: "Arial Black"Arial,Helvetica, sans-serif;"
The main issue is the Arial Black font, of course.
Good luck!
In my understanding, the problem is that Arial Black is a two word font name. A lot of e-mail clients do not support font names with more than one word. It doesn't matter if you use "quotes" , 'single quotes', nothing. Just find a replacement font with a one word name.
See the email standards project for confirmation:
http://www.email-standards.org/clients/gmail/#font-family-quotes
This page applies to gmail, but I had the same problem in other email clients including hotmail and godaddy email.
Related
UPDATE.
I've tried all the suggestions. But still can't get Outlook to display bold!
UPDATE 2. See my solution below
I'm creating a HTML email newsletter. The <h1> is bold, but when I test in Outlook (2007, 2010, 2013 etc) the font doesn't appear to be bold. Either Outlook is applying a faux bold (fattening) to the regular weight, or ignoring the bold. Whereas all other email clients use the true bold weight of the typeface.
Is there anything I can do? Surely a heading <h1> should be bold by default, without having to write css or put a <strong> or <b> around it?
Here's my code (which gets inlined):
h1 {
font-family:Arial Bold, Arial, sans-serif;
font-weight:bold;
}
Perhaps I need to put Arial Bold in quote marks?
font-family:'Arial Bold', Arial, sans-serif;
Here are two images. Top is how it should look. Bottom is the Outlook.
You can use <strong> tag instead of css.
Unfortunately there's not a great, reliable way to do this with Arial Bold in the mix.
Arial Bold is not installed on every system, so a font stack of font-family:Arial Bold, Arial, sans-serif; will skip over Arial Bold and use Arial instead. Even if you download a copy of Arial Bold and send it in as a web font, Outlook doesn't support web fonts.
So on systems that don't have Arial Bold installed, we're stuck with regular Arial. We can faux bold Arial:
<h1 style="font-family: Arial Bold, Arial, sans-serif; font-weight: bold;">Headline Text</h1>
This might be ok, but having Arial Bold in the font stack is still a bit of a wild card. On systems that do have Arial Bold installed, we'll see Arial Bold rendered... and faux-bold'd.
I'm not sure what's best for your project, but if it were me, I'd remove Arial Bold from the font stack and just faux bold regular Arial. Every system has Arial, so it's more predictable.
<h1 style="font-family: Arial, sans-serif; font-weight: bold;">Headline Text</h1>
You can try this markup as well: <h1><b>CASE STUDY</b></h1>
As #Ted Goas points out, Arial Bold is not a web safe font. In the past it was not part of IOS either. My suggestion is to use Arial with a font-weight: 800;. It's not quite the same as Arial Bold, but it's a decent fallback.
https://jsfiddle.net/wallyglenn/aez4e3gd/
If it's a problem you only notice in Outlook and want to preserve the Arial Bold as a font for other clients, create an Outlook-only style sheet below your existing style sheet at the end of <<head>:
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
h1 {font-family: Arial, sans-serif !important; font-weight: 800;}
</style>
<![endif]-->
You can do this to fine-tune any issues you find with styles regarding Outlook.
Good luck.
The problem is with versions of Outlook that use Microsoft Word to display the email. I beleive that these versions of Outlook / Word are not sophisticated enough to use the true bold cut of the typeface. Rather they use a fake / faux bold – simply fattening the letters of the regular weight. This is why they appear different, 'lighter' and uglier than the true bold cut of typefaces.
The same with italic. Older versions of Outlook / Word simply slant the regular roman version of the font - they don't use the italic cut of the font (that some poor typographer has spent months or years designing).
Could someone clarify why the below font style settings is not working in chrome, but working in IE and FireFox.
My website has the same problem, it does not pick up the CSS font settings (where normal is mentioned), hence I tested with the CSS test environment from W3Schools and the behavior is same.
CSS Snippet:
Working only in IE/FireFox: font-family: Arial, Helvetica, sans-serif normal;
Working in All Browsers: font-family: Arial, Helvetica, sans-serif;
Try in Chrome and IE to see difference.
body {
font-family: "Times New Roman", serif;
}
p.serif {
font-family: Arial, Helvetica, sans-serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif normal;
}
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in Arial Without Normal.</p>
<p class="sansserif">This is a paragraph, shown in Arial With Normal</p>
Below are the questions:
Could you clarify why the behavior difference between these two browsers?
How to ensure my CSS font styles are picked by Chrome and IE/FireFox (Should I remove normal from all my CSS files or is there any better way to do it)?
Arguably invalid font-family declaration
If you open your browser's inspector (Ctrl+Shift+i in Chrome) you will see that the CSS rule
p.sansserif {
font-family: Arial, Helvetica, sans-serif normal;
}
is not applied.
Per the CSS specifications, an invalid rule is ignored, and whatever would have been applied (backwards up the cascade) is applied instead or more accurately, not overruled.
The result is "Times New Roman" in this case - as seen in the "Computed Styles".
To set the font-style (-variant, -weight, -stretch or line-height (whichever you were trying to set to normal)) of text, we can either use exactly that, or use the font shorthand.
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family...
(with caveats).
As for the difference between IE(and FF) and Chrome
Chrome recognises in the comma delimited assertion that sans-serif normal is not a font-family, whereas IE doesn't.
If you simplify the rule to:
p.sansserif {
font-family: sans-serif normal;
}
and view the result in IE, you'll see the <p> is in "Times New Roman" since, although IE accepts the declaration, it can't do anything sensible with it.
More from the specs:
...it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens.
Font family names that happen to be the same as a keyword value (‘inherit’, ‘serif’, ‘sans-serif’, ‘monospace’, ‘fantasy’, and ‘cursive’) must be quoted to prevent confusion with the keywords with the same names.
So it is recommended that a font family called sans-serif normal be quoted as "sans-serif normal".
And if a font family is using the same name as a keyword it must be quoted.
Both Chrome and IE will accept Comic Sans MS or Times New Roman etc. with or without quotes, and apply them correctly.
Chrome rejects the unquoted use of the keyword sans-serif where it finds it combined with normal, but will accept both if quoted, although it won't be able to apply that font unless it can find one with that name.
IE accepts sans-serif normal as a possibly unquoted font family name, and this is arguably correct, since the keyword is only part of the presumed family name, rather than the whole thing.
Chrome, arguably incorrectly, rejects what it presumes is a malformed assertion.
or p.font{
font-family: font;
align-text: center;
}
I am having issues with email templates:
Border bottom not showing
Font fallbacks on Windows not working
So: I run the HTML through an inline generator that puts everything inline
Border issue:
<tr class="bottom-border">
.bottom-border {
border-bottom: 1px solid #eff3f6;
}
Font issue:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);
body {
font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important;
}
The font issue wont work on Windows, it still seems to output Times New Roman, even though im not telling it to. On the MAC its fine it outputs Open Sans
Aha, I see what the issue is with the font.
You need to add the font styles to the table not the body.
<table style="font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important;">
Then is you have nested tables this will also need to be applied to those too.
I also need to see the output of the inline generator to see why the border isn't being applied.
Outlook HATES webfonts. It won't display them, and if it seems one at the beginning of the font stack, it will empty the entire stack and go instead with the default font. To counter this, I have a few steps below for you:
You are screwing up your style attribute with using the double quotes (")
around helvetica and on. It is closing the style attribute at at the
second double quote (right before helvetica) which removes your font
stack. It then also has potential for validation issues. You do not
need the quotes on the fonts, so I would either remove or just use
single quote (').
You should always inline your font on the tag that contains it (TD,
DIV, P, etc). This is where you should put your stack WITHOUT the
web font.
You then need to add a span tag inside the container and around your
text which will have your webfont declared there.
As far as border bottom:
Don't use a class. You need to inline it.
Ex: <td style="border-bottom: 1px solid #eff3f6;">
Don't apply styles to TR tags, use it on TDs for much more
comprehensive support of CSS.
Here is my problem, I need to set fonts like this:
font-family: 'Century Gothic', Helvetica, Dosis;
Dosis is font from Google Fonts library. I need that, Century Gothic is MS Font, installed with Office (until 2010), Helvetiva - you all know. So I need third choice.
When I put Dosis in first position it works of course. Second or third position gives me Arial.
I tried loading this font by #import in CSS and in header. Both doesn't work.
As you can see, it all looks just fine, but Rendered font is Arial (why?!). I was thinking about that: Dosis is not loaded at all. But why isn't?
PS. #import and of course are before that css lines with font-family.
Anybody?
//
I tried:
font-family: Helvetica, Dosis;
Gives me Arial.
font-family: 'Century Gothic', Dosis;
Worked! I've got Dosis.
Now I really don't understand how it works.
Dosis has nothing to do with this (Just to clear things out), It is Helvetica. In Google Chrome Helvetica is rendered with Arial which FYI is the default font for sans-serif for Google Chrome in Windows.
Src: http://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults/
But that has nothing much to do either.
All the unrecognized fonts will be rendered with the default Standard font which most of the time is Times New Roman. (Except, of course Helvetica)
Since Helvetica is metrically identical to Arial meaning each character's width in both Helvetica and Arial is exactly same, it is rendered as Arial which helps in displaying and printing text correctly.
All others are rendered to the Standard font, Times New Roman.
As you mentioned Century gothic font is a MS font and is NOT available on Gfonts.
Closest Gfont is Google font Muli
The second point is that you have to import that font.
Third this is how this works
font-family: 'Century Gothic', Dosis;
First the browser tries to load Century Gothic, if it fails it loads Dorsis.
So why are you getting Arial? It's the browsers default font Web browsers default fonts
Please include this in your css file
#font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
src: local('Dosis Regular'), local('Dosis-Regular'), url(http://fonts.gstatic.com/s/dosis/v4/xIAtSaglM8LZOYdGmG1JqQ.woff) format('woff');
}
body{
font-family: 'Dosis', sans-serif;
}
You can put more than one font name in font-family property to be sure, that one of them will be displayed on the screen. But if the browser find first font (in your case 'Century Gothic') it will miss the rest (Helvetica and Dosis).
So, if you prefer Dosis font, please change
font-family: 'Century Gothic', Helvetica, Dosis;
to this one:
font-family: Dosis, Helvetica, 'Century Gothic';
My text that is supposed to be Arial Black is not working on Firefox. It's just displayed as a regular text. So I used Arial font with the Strong tag. I can't make a difference between the way they look. Is there anything I should worry about?
Thank you
EDIT
In this particular case I can't use CSS to do it so that's how i did it:
<font face="Arial Black, Arial, sans-serif"> <strong>Want an undergraduate course with more opportunity for hands-on practice? </strong></font>
Thanks for all the answers and explanations, I believe the strong tag is not wrong here as this is the most important part in the whole message. The visual difference wasn't noticed by anybody, that's confirmation enough for me.
I posted in jsfiddle and it surprised me the strong tag didn't add the bold effect i was expecting! The b did. You can clearly see the difference there! Thanks for that suggestion!
With regard to the question title (as the question text seems to ask differently):
The <strong> tag carries a semantic meaning. Citing MDN on this
The HTML Strong Element () gives text strong importance, and is typically displayed in bold.
So in the first place you should use this tag so mark up content, that you want to emphasize and not to get text marked bold.
Most browsers, however, will implement that emphasizing as just bold printed text.
If you just want to have bold text, use the respective CSS for it!
font-weight: bold;
<strong> holds a certain semantic meaning (along the lines of "more important"), and as such should be avoided purely to style something. If you want to "bold" the text, just add font-weight: 700.
Or you know, fix the reason Arial Black isn't working :P It may be that you didn't add speech marks around Arial Black.
font-family: Arial;
is completely acceptable, but
font-family: Arial Black;
is not. Make sure you have
font-family: "Arial Black";
Yes, there is a considerable difference in using Arial Black vs. Arial with the strong element. I will answer in CSS terms, substituting the CSS setting font-weight: bolder for HTML strong markup. (It's really irrelevant here whether you call for bold face directly in CSS or indirectly with HTML markup that implies a certain default setting.)
It is not clear what you mean by “Arial Black is not working on Firefox”.
The most logical CSS code for the purpose would be:
font-family: Arial; font-weight: 900;
This asks for the boldest available font in the Arial font family; that’s Arial Black when available, or else Arial Bold. Firefox does not seem to support this quite consistently, but many browsers have even more serious problems with font heights. (E.g., Chrome shows weight 600 as bolder than 700.)
In practice it is safer to use the old kludgy way, which refers to a specific font (typeface) as if it were a font family:
font-family: Arial Black;
For example, on IE 8, this is the only way to get Arial Black, whereas IE 9 supports the logical way, too (in “Standards Mode”).
If you use set the font to Arial and font weight to bolder, you get Arial Bold. If you set font-family: Arial Black and font-weight: bolder, you get Arial Black, because there is no bolder font. And Arial Bold and Arial Black are very different.
It’s impossible to say what went wrong in your first attempts, as you did not post the actual code used.
I think you would receive the same effect, however I would recommend using CSS styling instead of using the strong tag.
.arial-black{
font-family: Arial;
font-weight: bold;
}
There is no visual difference between the <strong>, <b> and font-weight:700|bold;.
However <strong> is used by screen readers (for the blind and partially sighted) to put emphasis on the text... therefore using a "bold" font will not result in the same thing for screen readers.
If you don't want to "emphasis" the text for screen readers, then I would recommend you use the <b> tag instead.
<strong> tag does not support all browsers, as Arial and Arial black is concerned both are different in size or weight you can say.
So answer to your question is yes.
Using the font Arial Black in a web page only works for the users that actually have that font installed. (Of course, using Arial also only works on systems that have that font).
Arial Black is not just a bold version of Arial. Although similar, Arial Black has a different look than the bold version of Arial:
Arial, bold
Arial Black
You should use a fallback font for all fonts that you use, so that the browser knows what to use if that specific font isn't available, however it's tricky to use a font that is bold by default, as you can't specify Arial bold as fallback for Arial Black. You would have to make do with using Arial as fallback:
font-family: 'Arial Black', Arial, Helvetica, sans-serif;
You could use a #font-face rule to force Arial Black whenever the bold font-weight of Arial is used:
#font-face {
font-family: Arial;
/* You can add other common names using comma-separated local definitions here */
src: local('Arial Black');
font-weight: bold;
}
#font-face {
font-family: Arial;
src: local('Arial');
font-weight: normal;
}
Now, whenever Arial is set as the font for an element and the calculated font weight is bold (which is what user agents set for the string tag in their html.css definitions), Arial Black is used instead.
strong tag basically creates your text in bold. For your case it makes no difference. But it will create a difference if your font is different and you are using "strong"