?
Solved

font-family css doesn't work in IE

Posted on 2009-02-09
5
Medium Priority
?
1,817 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

0
Comment
Question by:willsavage
5 Comments
 
LVL 7

Assisted Solution

by:Brad Dobyns, CSM
Brad Dobyns, CSM earned 800 total points
ID: 23593011
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
 
LVL 7

Assisted Solution

by:Brad Dobyns, CSM
Brad Dobyns, CSM earned 800 total points
ID: 23593050
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
 
LVL 3

Assisted Solution

by:blatantwaste
blatantwaste earned 400 total points
ID: 23594220
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
 
LVL 9

Accepted Solution

by:
knonie earned 800 total points
ID: 23594442
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
 

Author Closing Comment

by:willsavage
ID: 31544662
Thanks for the advise. I realise now that I was testing with IE running on a mac parallel hence no fonts!
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month17 days, 10 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question