CSS assigning fonts to font weights

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

You're getting things backwards, but not far off the mark. Use the various header-levels (h1, h2, etc) and assign CSS to those! They already imply weights, and each can be assigned a distinct font via CSS.

Answer 2

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.

Answer 3

This is not really how CSS works. You want to use classes or tags instead, preferably with semantic meaning. You don't assign styles based on stylistic information (like font weight); you assign them based on semantic information (like "does this have class Header?" or "is this marked as strong?")

.Header /* or h1, h2, h3, h4, h5, h6, or strong, or any combination of these */
{
    font-family: "Helvetica Bold";
}

.Normal /* or just body, and everything will inherit it unless overriden */
{
    font-family: "Helvetica Roman";
}