HTML and CSS Reference
The browser doesn't have a bold ver-
sion of Kaffeesatz, so it adjusts the
normal font to be thicker and wider.
Add another @font-face declaration.
Notice that it uses the same
font-family name, but it has a differ-
ent URL and specifies a font-weight :
The browser is now using the bold version of the Yanone Kaffeesatz
font for the bold text. This is more compact and more cleanly rendered
than the standard version of the font automatically adjusted to be bold.
The same approach also works for italics, but using font-style instead
of font-weight . Unfortunately Kaffeesatz doesn't have an italic variant,
so this example uses the thin variant:
font-family: "Yanone Kaffeesatz";
src: url(YanoneKaffeesatz-Thin.otf) format("opentype");
With a minor adjustment to the HTML you can see three different
fonts, all from the same family, in one paragraph: