detecting font-family specified in CSS?

[Már]

Hi.... is there a "passive" (or "auto-detect") option that allows us
to tell Cufon.replace() to read the CSS -specified `font-family` value
for each of the selected elements and:

1) use the appropriate Cufon font if present
2) otherwise do nothing.

This would make it possible to run Cufon against, say, all h1, h2 and
h3 elements on a page, but only replace those that the CSS author has
styled with a `font-family` that Cufon recognizes- thus allowing a
much clearer separation between Javascript and CSS.

If not, would it be possible to add such an option?

-- Már

[Simo Kinnunen]

Hi Már,

No, unfortunately not. Cufón relies on computed CSS values, which
different browsers return differently. For example, the computed value
of font-family in the following CSS rule:

h1 {
font-family: "My Special Font", Arial, sans-serif;
}

returns:

"My Special Font" in WebKit-based browsers (including Safari, Chrome)
"My Special Font",Arial,sans-serif in Gecko-based browsers
"My Special Font", Arial, sans-serif in Internet Explorer

but..

Arial in Opera. Even Opera's currentStyle returns Arial.

So, the only choice would be to manually parse all style sheets, which
is something I'd rather not do because it can get insanely complicated
(and therefore slow). For example..

h1 {
font-family: "My Special Font", sans-serif;
}

#home h1 {
font-family: Arial;
}

Not only would you have to parse the style sheet, you'd have to build
a CSS engine. Don't even mention !important, @media rules etc.

Detecting whether @font-family was used and whether it is even
supported (and if it is, does it support the font format) isn't easy
either.

Simo

[Olivier Sambourg]

Hi,
 

Detecting whether @font-family was used and whether it is even
supported (and if it is, does it support the font format) isn't easy
either.

I think you mean @font-face?
Maybe the easiest way would be to simply check the browser version against a compatibility chart (like this one: http://webfonts.info/wiki/index.php?title=%40font-face_browser_support), then dynamically update the CSS styles if needed (no @font-face in the CSS files to begin with).

Font registration in Cufon could then take several options:
- an (optional) TTF or OTF file URL (for Webkit/Opera/FF)
- an (optional) EOT file URL (for IE)
- the usual JSON version (as a JS file URL)
The JSON version would then only be loaded if necessary. If either TTF / OTF / EOT @font-face is supported and the font file is specified, the CSS style of the elements which need to be styled is updated (with the correct src url and format) and (hopefully) the browser's rendering engine does the rest...

Cufon, your one stop solution for stylish web pages ;)

Might not be feasible though... (what about flickering, etc.)

Olivier

[Már]

> returns:
> "My Special Font" in WebKit-based browsers (including Safari, Chrome)
> "My Special Font",Arial,sans-serif in Gecko-based browsers
> "My Special Font", Arial, sans-serif in Internet Explorer
>
> but..
> Arial in Opera. Even Opera's currentStyle returns Arial.

Hmm... ...or are there further complications?
"Works in every modern browser except Opera" sounds quite acceptable
to me. :-)

> So, the only choice would be to manually parse all style sheets, which  
> is something I'd rather not do because it can get insanely complicated  

Ack! There lies madness.


-- Már

[Simo Kinnunen]

Hi Már,

It doesn't sound quite acceptable to me. I'm a Mac user, but I also
have a PC and Opera happens to be my browser of choice. I consider
Opera a major browser and as such cufón should work properly in it.

Simo

[Már]

> have a PC and Opera happens to be my browser of choice. I consider  

Using such a feature would be highly valuable to some developers, but
completely optional. The safer (more x-browser compatible) method
would still be available for those who prefer completely cross-browser
solution.

The beauty of Cufón is that it fails silently and gracefully - leaving
plain browser text that is accessible, readable to all users.

...
Having discussed this hypothetical feature with my colleagues at work,
they thought that this sort of option would make Cufón much more
appealing to them - even if it was only supported in ~95% of browsers.

I might have a stab at implementing this feature myself. I started
this thread mainly to see whether someone had done it already, or if
it was completely unfeasible.


-- Már

[Már]

P.S.
I completely forgot to mention how I think Cufón (as it is!) is
absolutely mind-blowingly great.
You've done an amazing job Simo!
Thanks!


-- Már

[Olivier Sambourg]

Hi,

No opinion on this?

I'll forget it then ;)

(Or maybe I wasn't clear enough?)

Olivier

Le 7 mai 09 à 18:57, Olivier Sambourg a écrit :

[Simo Kinnunen]

Hi Olivier,

Well, it's the road we'll eventually have to take as @font-face support becomes mainstream, but there are several things to consider:

Delays - at least Opera displays regular text while the font is loading

Antialiasing - Differences between operating systems, browsers (@font-face with a more exotic font is usually pretty much unreadable in IE6 because there's no or very little antialiasing)

Trouble - Having to create / keep 3 fonts up to date

Foundries - Some foundries are OK with EOT, but TTF is another issue.. not that they're exactly happy with the JSON format either, but it's not possible to restrict a TTF to a particular domain

It would definitely be interesting to see what we could come up with, but it's going to require a good plan.

Simo

[Már]

Hi Simo.

I revisited this font-family auto-detection idea, and found that
implementing it seems to be dead simple.
Simply insert the following line of code at line #581 in the source
code (http://github.com/sorccu/cufon/blob/
1c6fa76e7b50c1a70a9bbdd2d42810e0061632da/js/cufon.js#L581), and you're
good to go!

if (options.autoDetect) { delete options.fontFamily; }

Thereafter, it's possible to do

Cufon.replace('h1, h2, h3', { autoDetect: true });

...and have Cufón figure out which elements to replace and which not.
(Granted that no replacements will take place in the current versions
of Opera. Graceful degradation, etc.)


I hope you'll consider adding this feature to the official Cufón code
base.

Respectfully,

-- Már

[Simo Kinnunen]

Hi Már,

If only it worked in Opera.. Do you think you could create a GitHub
Issue for this (http://github.com/sorccu/cufon/issues)?

By the way I finally wrote some API documentation: http://wiki.github.com/sorccu/cufon/api

Simo

[Már]

Done: http://github.com/sorccu/cufon/issues/#issue/24

-- Már