CSS assigning fonts to font weights

4
votes

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!

3
cssfonts
There is an attribute selector. Maybe it's possible to achieve it... I don't know how though. w3.org/TR/CSS2/selector.html#attribute-selectors – BrunoLM
tying one presentational attribute to another seems unnecessarily complex. Your HTML should include enough meta-information (classes, ids, meaningful structure) that you can target something other than the font-weight (font-weight itself shouldn't be included in the HTML, rather it should be abstracted behind classes, ids, or header-levels). – STW

3 Answers

3
votes

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.

0
votes

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.

0
votes

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";
}