We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

font-family css doesn't work in IE

willsavage
willsavage asked
on
Medium Priority
1,871 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

Brad Dobyns, CSMScrumMaster
Commented:
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Brad Dobyns, CSMScrumMaster
Commented:
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.
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;
Commented:
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

Author

Commented:
Thanks for the advise. I realise now that I was testing with IE running on a mac parallel hence no fonts!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.