The @font-face CSS Rule

  • font-family: sans-serif; font-size: 16pt; font-style: normal; font-weight: normal
  • font-family: Tuffy; font-size: 16pt; font-style: normal; font-weight: normal
  • font-family: Tuffy; font-size: 16pt; font-style: oblique; font-weight: normal
  • font-family: Tuffy; font-size: 16pt; font-style: italic; font-weight: normal
  • font-family: Tuffy; font-size: 16pt; font-style: normal; font-weight: bold
  • font-family: Tuffy; font-size: 16pt; font-style: oblique; font-weight: bold
  • font-family: Tuffy; font-size: 16pt; font-style: italic; font-weight: bold

There are four @font-face rules, one for each font file. The extra font-style: oblique styles in the examples look like the italic styles, but are actually a slanted transformation of the glyphs from the normal upright type face referenced in the font-style: normal @font-face rules. In other font faces, particularly serif fonts, the true italic font style may have a different appearance from the oblique font style.

Some places to get fonts: