CODEWITHSUNDEEP
cssfontsfont-face
Jakob Jingleheimer
Jakob Jingleheimer

Reputation: 31590

CSS: define font-weight by name

I'm wondering if there would be a way to define an @font-face's weight with a string rather than just a number:

@font-face {
    font-family: 'My Font';
    src: url('../fonts/MyFont/light.eot');
    …
    font-weight: 'light', 300;
    font-style: normal;
}
@font-face {
    font-family: 'My Font';
    src: url('../fonts/MyFont/thin.eot');
    …
    font-weight: 'thin', 200;
    font-style: normal;
}

I'm thinking it would be easier for someone breaking out a design into code if the weights matched (eg in Photoshop the font's weight will be light, not 300).

After reading the W3 spec, it sounds like they do intend you to match the names to a number, but that seems asinine, so I assume I'm missing something.

Upvotes: 0

Views: 2035

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

It was a design decision in CSS to use numbers from 100 to 900 rather than names. The basic reason behind this is that the use of names among font manufacturers is not consistent.

You cannot define any symbolic names in CSS. This, too, is an intentional design decision: CSS is a style sheet language, not a programming language.

In practice, most fonts that you encounter in the wild, as fonts commonly available in people’s computers or as free fonts that you can legally use as downloadable fonts, have only two weights, 400 and 700, which have predefined symbolic names. So the issue is practically not very relevant. E.g., when using the minority of Google fonts that have other weights, Google informs you about the numeric weight to be used. (And this is really just a convention in this case; you could use any number, as long as you are consistent – it’s the actual typeface that matters.)

Upvotes: 2

BoltClock
BoltClock

Reputation: 724452

The CSS2.1 spec which you link to only defines a specific set of keywords corresponding to specific numerical values. It doesn't say anything about allowing authors to define keywords for numerical values, whether in a current or future spec.

Along with numerical values, the only keywords you can specify with the font-weight descriptor in @font-face rules are normal and bold (whereas bolder and lighter are relative values and so can't be specified). Even if it allowed you to specify custom keywords, the font-weight property would have to be re-specced to allow those custom keywords and browsers would have to recognize those custom keywords, which they don't.

Upvotes: 2

Jason
Jason

Reputation: 3360

There are four strings you can use to define font-weight: normal, bold, bolder, and lighter, the second two being relative to the weight of the parent. It's all described in the spec that you linked to.

If you want to make your own and use a preprocessor, you could create variables for your weights and have as many as you want.

Sass

variables.scss.css

$verythin: 100;
$thin: 200;
$medium: 300;
$thick: 500;
$unnecessarilybold: 600;

main.scss.css

@font-face {
    font-family: 'My Font';
    src: url('../fonts/MyFont/thin.eot');
    …
    font-weight: $thin;
    font-style: normal;
}

Upvotes: 2

Related Questions