ansaurus

Question

Trying to get Italic font working with CUFON and Avenir Font

Answer 1

A:

I noticed that you're using CUFON, which is a image-based replacement. It's much easier and semantically better to use CSS3 embedded fonts, which I outline in the following:

Assuming you're trying out embedded fonts, first you must make a @font-face declaration that specifies the existence of an oblique font, for example these are the statments on my website:

@font-face {
  font-family: DejaVu Sans;
  src: local(DejaVu Sans), url(/fonts/DejaVuSans.ttf);
}
@font-face {
  font-family: DejaVu Sans;
  font-weight: bold;
  src: local(DejaVu Sans Bold), url(/fonts/DejaVuSans-Bold.ttf);
}

As you can see, the second one notifies the browser that there is a bold version available, and that font will be invoked when using "DejaVu Sans" and "bold" font weight.

For your example, you can either do this:

@font-face {
  font-family: Avenir Light Oblique;
  src: local(Avenir Light Oblique), url(path-to-font-here);
}

OR this:

@font-face {
  font-family: Avenir Light;
  font-style: oblique;
  src: local(Avenir Light Oblique), url(path-to-font-here);
}

For the first example, use the font name "Avenir Light Oblique" to invoke the oblique font. For the second method, use just "Avenir Light", but then specify font-style as oblique.

Hope that helped!

Delan Azabani 2010-05-03 09:06:59

Is this cross-browser compatible? This needs to work in IE7 as well.

jeffkee 2010-05-03 17:33:30

It works in all browsers except Internet Explorer, who will hopefully add support in IE 9.

Delan Azabani 2010-05-04 02:25:14

OK so your solution is obsolete for me. I asked how to get CUFON working. I don't use your method exactly because it doesn't work in IE, and regardless of how many of us nerds complain, the general public uses IE more than other browsers, so for my business clients, it's important to have support. Let's be more practical, not ideological, in these responses. I'm trying to get business done, not change the world of web into Utopia... your response was completely useless for me.

jeffkee 2010-05-06 00:41:56

Unfortunately I have limited knowledge of CUFON, so that's the only answer I'm able to provide. When using CUFON, just keep this in mind: the replacement technique creates many usability and accessibility problems which outweigh CSS 3's problem of not being able to work in IE. With CUFON, everyone will have the problems, but when using CUFON, the only problem will be IE using another font. Balance those two?

Delan Azabani 2010-05-06 05:22:45

Answer 2

A:

Jeffkee, you made my day! :-) Totally agree to your statement ("... trying to get business done..."). Have had so many discussions on the same topic during the last weeks. Did you find a "Cufon solution" for the issue you mentioned in the beginning? Bye

Henrik 2010-09-16 13:06:28

ansaurus

tags:

views:

answers:

Trying to get Italic font working with CUFON and Avenir Font

related questions