Using CSS3 @font-face to “fake” multiple font weights

July 21
2009
in CSS

CSS2 spec­i­fies addi­tional font weights, beyond Normal and Bold. In par­tic­u­larly there are 9 font weights in total — 100, 200, 300, 400 (nor­mal), 500, 600 (bold), 700, 800 and 900. Unfortunately browsers still some­what lack sup­port for this fea­ture, but more impor­tantly fonts lack sup­port for this. Many fonts how­ever, still come with only nor­mal and bold weights. Moreover, based on a few tests, even pro­fes­sional fonts that come with mul­ti­ple weights (such as thin, light, reg­u­lar, bold, heavy, etc.) don’t actu­ally sup­port these weights in the same way as the CSS2 spec­i­fi­ca­tion dic­tates, in other words they can’t be used out of the box like that.

For exam­ple, I have the Arno Pro font (a nice serif font from Adobe). It comes in 4 weights — reg­u­lar, bold, light and semi­bold. Each is encap­su­lated in its own file with a dis­tinct name, e.g. ArnoPro-Bold, ArnoPro-Smdb, ArnoPro-Light, etc. I don’t know much about how fonts work but based on a bit of read­ing I’ve done, for a font like that I should be able to declare a style that uses “ArnoPro” font-family and based on the weight I assign to a par­tic­u­lar ele­ment it would use a dif­fer­ent ver­sion. For exam­ple, ArnoPro-Light for 200, ArnoPro-Regular for 400 or nor­mal, and so on. However, based on a few tests I’ve done that doesn’t seem to be the case. In fact “ArnoPro” font isn’t rec­og­nized at all, only if I spec­ify explic­itly “ArnoPro-Smbd” does it rec­og­nize the font. And of course when it’s done like that all but the reg­u­lar ver­sion are stuck with one weight, i.e. font-family:ArnoPro-Smbd; font-weight:normal looks exactly the same as font-family:ArnoPro-Smbd; font-weight:bold.

In short, the sit­u­a­tion is less than ideal. However, there may be a at least a par­tial fix.

Using @font-face, which was intro­duced in CSS3, you can sim­u­late the extra font-weights by assign­ing the spe­cific fonts to each weight. This is a kind of a hack, and one that will not work in all browsers. In fact, I only man­aged to get it to work in FF3.5. I think IE only sup­ports this for their pro­pri­etary font for­mat, which I didn’t used, and for some rea­son it didn’t work in Chrome 2 either (which I thought sup­ported @font-face), but I didn’t inves­ti­gate this fur­ther, at least not for now.

The way @font-face works is that what­ever font attrib­utes you spec­ify for a @font-face rule, they don’t deter­mine how the font looks but rather when it’s gonna get used. For exam­ple if you have the fol­low­ing two rules

@font-face {
	font-family: newfont;
	src: local(Arial);
	font-weight: 200;
}
@font-face {
	font-family: newfont;
	src: local(Calibri);
	font-weight: 300;
}

Then if you use the “new­font” font-family with weight 200 it’s going to use Arial, but if you use it with weight 300 it’s going to use Calibri. So we can take advan­tage of that, and since it uses @font-face we don’t even have to worry if the user’s com­puter has fonts or not.

For this test I used a Kaffeesatz, a nice look­ing open­type sans-serif font from Yanone Schriftgestaltung. The font comes with four weights, Thin, Light, Regular and Bold. I used the fol­low­ing styles to cre­ate 200 and 300 weights, in addi­tion to nor­mal and bold.

@font-face {
	font-family: Kaffeesatz;
	src: url(YanoneKaffeesatz-Thin.otf);
	font-weight: 200;
}
@font-face {
	font-family: Kaffeesatz;
	src: url(YanoneKaffeesatz-Light.otf);
	font-weight: 300;
}
@font-face {
	font-family: Kaffeesatz;
	src: url(YanoneKaffeesatz-Regular.otf);
	font-weight: normal;
}
@font-face {
	font-family: Kaffeesatz;
	src: url(YanoneKaffeesatz-Bold.otf);
	font-weight: bold;
}
h3, h4, h5, h6 {
	font-size:2em;
	margin:0;
	padding:0;
	font-family:Kaffeesatz;
	font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }

As you can see I defined one font fam­ily — Kaffeesatz, and for each weight imported a dif­fer­ent font file. After the @font-face rules are defined I can use the 200 and 300 font weights just as I would nor­mal and bold, and the HTML below

<h6>The quick brown fox Jumps over the lazy Dog. 1234567890</h6>
<br>
<h5>The quick brown fox Jumps over the lazy Dog. 1234567890</h5>
<br>
<h4>The quick brown fox Jumps over the lazy Dog. 1234567890</h4>
<br>
<h3>The quick brown fox Jumps over the lazy Dog. 1234567890</h3>

pro­duces the fol­low­ing text

fontweights

Pretty neat if I may say so myself.

This is def­i­nitely more has­sle than it should be, and of course requires you to find an open font that you can use with all the weights you need. However, as more browsers begin sup­port­ing @font-face, and as font sup­port in browsers grows in gen­eral, typog­ra­phy will become more impor­tant on the web and hope­fully many more fonts will start sup­port­ing mul­ti­ple weights.

21 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>