font-family css doesn't work in IE

Hi there,

Can you please explain why the below code is now working in IE?

It is displaying a default font instead of Arial Rounded.

How can I use Arial rounded reliably in my website for all browsers?

Thanks...

Will
h1 {
font-family: 'arial rounded MT bold';
font-size:16px;
color:#CC66CC;
padding-left:25px;
}

Open in new window

willsavageAsked:
Who is Participating?
 
knonieCommented:
It's working perfect in IE7 and Fx3.

If your PC contains that font, it will display Arial Rounded on the webpage, instead of Times New Roman, which is usually default in Windows.

Perhaps, due to its small display size and face Bold, you're thinking it as default font.
Try removing that font-family line from CSS and see if your page shows any difference. It should do.

Attached is a screenshot of my output, where you can see the comparison of Arial rounded and Default font in Firefox 3.

Remarks:
Keep in mind that "H" tags in HTML have BOLD face by default, and if you want to show your text as Normal face, you need to set it like:
font-weight: normal;

Suppose if some viewer of your site doesn't have Arial Rounded font in his PC, he won't be able to see your design properly, so it's always a good practice to include some other font names that are almost similar to that.

In this case, you should write: font-family: "Arial rounded MT bold", Arial, Helvetica, "Sans Serif";

:-)
<html>
<head>
<style>
h1 {
font-family: 'arial rounded MT bold';
font-size:16px;
color:#CC66CC;
padding-left:25px;
}
h2{
 
font-size:16px;
color:#CC66CC;
padding-left:25px;
}
</style>
</head>
 
<body>
<h1>This is H1</h1>
<h2>This is H2 with no font specified (displaying default font)</h2>
</body>
</html>

Open in new window

h1-test.jpg
0
 
Brad Dobyns, CSMScrumMasterCommented:
The reason you cannot use this font only is because the user has to have the same font on their PC or MAC. that is why when you use font-family you put more than one font ex. Arial, Helvetica, Times-New Roman, etc. This is cover all your bases when using a font that MOSt people have install under their FONTS directory.

Thanks,
Brad
0
 
Brad Dobyns, CSMScrumMasterCommented:
Also, it may only see the Arial part of the font-family which is why you separate fonts with a comma. Be sure the font isn't called something like "ArialRoundedMT  Bold" or something like that.
0
 
blatantwasteCommented:
To add on to bdobyns first comment, when you define your font family you should always end it with a "default" font. For the group he posted it would look like this:

font-family: arial, helvetica, "Times New Roman", sans-serif;
0
 
willsavageAuthor Commented:
Thanks for the advise. I realise now that I was testing with IE running on a mac parallel hence no fonts!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.