Question

Is it possible to assign different fonts to different font-weights?

For example, If I have 2 fonts, “helvetica roman” and “helvetica bold” and I want a font-weight of 500 to always display “helvetica roman” and a font-weight of 700 to always display “helvetica bold”

I know this functionality is available through cufon, but would like to use it with straight CSS.

Thanks!

Answer 1

If you’re using font-weight style inline, then you can use (example on jsFiddle)

*[style~="font-weight:"][style~="500;"]
{
    /* Font 1 */
}
*[style~="font-weight:"][style~="700;"]
{
    /* Font 2 */
}

I’m not sure about browser compatibility (the above was tested on Firefox). And I recommend using classes instead. Also, this probably isn’t bullet proof.