Font-Stretch about cufon HOT 12 CLOSED

Seeing as font-stretch is unimplemented by many browsers (such as Firefox) this could turn out to be a bit troublesome.

http://www.w3.org/TR/css3-fonts/#font-width-the-font-stretch-property
https://developer.mozilla.org/En/CSS/Font-stretch

"font-stretch was defined in CSS 2, but dropped in CSS 2.1 due lack of implementation experience. It's newly drafted in CSS 3."

What are you trying to accomplish with font-stretch? Do you have many variants of the same font and you'd like to be able to select a narrower/wider variant with font-stretch, or do you only have one font and you'd like to "stretch" it? Perhaps it's easier to explain it like this:

Do you want:

font-stretch: condensed;

Or do you want:

font-stretch: 80%; /* note: this goes against the specs */

from cufon.

Ok, reporter wanted both. There's no CSS equivalent for case 2 though.

I'm not really sure what to do.. stretching a font is very likely to make it look funny.

from cufon.

I thought it was vector based, and thus wouldn't matter. Is it not?

from cufon.

For reference, typeface.js uses font-stretch (but lacks so many of Cufon's cool features). You might be interested in taking a look for some 'inspiration' on how it is implemented: http://typeface.neocracy.org/examples.html

from cufon.

It's not that it would be difficult, I'm just wondering whether it has any real use cases (like I said, most fonts are probably going to end up looking funny).. it might not even suit your purposes.

I'm just worried that it'd end up being one of those "nice to have" features that no one uses.

from cufon.

I truly think designers and font aficionados alike (read Cufon users) would love to have this level of precision over their fonts and would put it to good use if available. Look how many obsess over such minute details as kerning, letter-spacing, and word-spacing =)

I'm not sure how it would look funny; I think it looks great on the example page I linked.

Ultimately, I think it's a must-have feature!

from cufon.

Implemented fake font-stretch in commit ebed1c7. Server's been updated as well.

Unfortunately you can't define font-stretch in CSS because no browser seems to honor it. So, it works like this:

Cufon.replace('h1', {
    fontStretch: 'ultra-condensed'
});

See the API wiki page for more details.

Do you think there's need for the "real" font-stretch? You can already do it by using:

Cufon.replace('h1', {
    fontFamily: 'MyFont-Condensed'
});

Where MyFont-Condensed is the name the generator usually spits out for condensed fonts. Personally I think it isn't needed.

from cufon.

Is there an easy way to convert a regular font into a stretched/condensed one? If so, you may be right. I know of none, though.

from cufon.

It works wonderfully, thank you so much!!

from cufon.

Say you have two fonts:

MyFont Condensed
MyFont Regular

In this case they share the same family name:

MyFont
- Condensed
- Regular

Currently there's no way to tell Cufón which variant to use. The selection process is only based on font-weight and font-style. With "real" font-stretch it would work like this:

Cufon.replace('h1', {
    fontFamily: 'MyFont',
    fontStretch: 'condensed'
});

Or like this when browsers start to support it some day (currently no browser supports it):

<h1 style="font-stretch: condensed">Lorem ipsum</h1>

..

Cufon.replace('h1', {
    fontFamily: 'MyFont'
});

Compared to how it is now:

Cufon.replace('h1', {
    fontFamily: 'MyFont-Condensed'
});

Which assumes that the font has been generated with a distinct name for each variant. I think it's enough, "real" as in by-the-specs font-stretch would have relatively little use compared to the pain of implementing it.

from cufon.

Ah, I see what you mean.

Agreed, I think it would be not worth it. The way you've done it is perfect. It's far easier to use =)

from cufon.

Ok, we'll leave by-the-specs font-stretch unimplemented for now. Issue closed.

from cufon.