CSS3 Embed Font Face

Want to get away from 'Web Safe' fonts for some attractive headers AND do it without using an image? Use CSS 3 and embed a font-face!

@font-face is not strictly speaking 'CSS3'; it was originally born in CSS 2 and although not appearing in CSS 2.1, CSS 3 is attempting to bring it into the standards.

In order to use a font, we first must call it using the '@font-face' attribute and this must be done for each individual font we wish to use. Although I'm sure you have a few, you can download some fonts to experiment with here, at dafont.com.

CSS 3 Embedded Font Face

Hello CSS Font Face!

The above header uses the SketchRockell font with the following CSS 3 applied to it.

  1. CSS 3 Font Embed (Example I)
  2. @font-face {
  3.   font-family: SketchRockwell;
  4.   src: url('SketchRockwell.ttf') format ('truetype');
  5. }
  6. .my_CSS3_class {
  7.   font-family: SketchRockwell;
  8.   font-size: 3.2em;
  9. }

CSS3 can render type using several font formats: "truetype" (ttf), "opentype" (otf), "embedded-opentype" (eot) and "scalable-vector-graphic" (svg,svgz).

Hello CSS Font Face!

We can also apply additional effects such as a Text Shadow.

  1. CSS 3 Font Embed (Example II)
  2. @font-face {
  3.   font-family: SketchRockwell;
  4.   src: url('SketchRockwell.ttf') format ('truetype');
  5. }
  6. .my_CSS3_class {
  7.   font-family: SketchRockwell;
  8.   font-size: 3.2em;
  9.   text-shadow: 3px 3px 7px #111;
  10. }
 

The Zen Elements CSS3 Series

Thank you for reading!
@zen