CODEWITHSUNDEEP
htmlcssfonts
Torben
Torben

Reputation: 5494

If Font is not supported, reduce font-size

i have the following CSS code:

.massp_text_box p {
  font-size: 20px;
  font-family: "Eurostile-Bold",Helvetica,Arial,sans-serif;
  color:#dadbdc;
}

As I only have the font in .otf and .ttf I can not support IE. In that case IE takes Arial as the font. In that case the font-size should not be 20px - it should be 18px.

How can I tell my CSS code "If Eurostile-Bold is not supported, take font-size:18px."

Any idea? Thanks!

Upvotes: 0

Views: 523

Answers (2)

Mastrianni
Mastrianni

Reputation: 3920

I would suggest that you create an IE-only stylesheet so that you can set those values specifically for IE. Microsoft has implemented a solution for accomplishing this called "Conditional Comments". The way they work is conditional comments are only registered when a user is visiting your site with Internet Explorer, and all other web browsers will ignore the comment and any code nested inside of a conditional comment.

In order to use them in your case you'd need to do the following:

1] Create a new stylesheet called ie.css, and place it in the same directory as your original CSS file.

2] Place the same CSS code you normally would to target .massp_text_box p into the ie.css file, but change the font-size to 18px. I used your sample code, but feel free to change these styles to whatever you want, as IE will be the only browser that uses them:

.massp_text_box p {
  font-size: 18px;
  font-family: "Eurostile-Bold",Helvetica,Arial,sans-serif;
  color:#dadbdc;
}

3] Lastly, in your HTML code, you'll need to place the conditional comment nested in your <head> tag like you would a normal stylesheet, and be sure to change the href= so that it links to the correct location of the ie.css stylesheet.

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

*Note: This conditional comment targets all versions of IE, but you have the option to target only specific IE versions if you so desire. See the extra reading to learn how to do that, but for your immediate needs, the above code should suffice.

Extra Reading: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Upvotes: 0

albert
albert

Reputation: 8153

you could target ie with conditional comments and/or conditional compilation in this case, but you can also create the formats you need via http://fontsquirrel.com

Upvotes: 1

Related Questions