CSS3 @font-face With Bold and Italic Support

css3-font-face-bold-italic-support.css

/* normal case */
@font-face {
    font-family: "DejaVu Sans";
    src: url(‘path-to-font-directory/DejaVuSans.eot’);
    src: local(‘☺’), url("path-to-font-directory/DejaVuSans.ttf") format("truetype");
}

/* bold */
@font-face {
    font-family: "DejaVu Sans";
    src: url(‘path-to-font-directory/DejaVuSans-Bold.eot’);
    src: local(‘☺’), url("path-to-font-directory/DejaVuSans-Bold.ttf") format("truetype");
    font-weight: bold;
}

/* italic (oblique) */
@font-face {
    font-family: "DejaVu Sans";
    src: url(‘path-to-font-directory/DejaVuSans-Oblique.eot’);
    src: local(‘☺’), url("path-to-font-directory/DejaVuSans-Oblique.ttf") format("truetype");
    font-style: italic, oblique;
}

/* bold and italic (oblique) */
@font-face {
    font-family: "DejaVu Sans";
    src: url(‘path-to-font-directory/DejaVuSans-BoldOblique.eot’);
    src: local(‘☺’), url("path-to-font-directory/DejaVuSans-BoldOblique.ttf") format("truetype");
    font-weight: bold;
    font-style: italic, oblique;
}

css3-font-face-example-usage.css

h3 { font: bold 18px/24px "DejaVu Sans"; }

css3-font-face-no-bold.css

@font-face {
    font-family: "DejaVu Sans";
    src: url(‘path-to-font-directory/DejaVuSans.eot’);
    src: local(‘☺’), url("path-to-font-directory/DejaVuSans.ttf") format("truetype");
}

generic-css3-font-face-syntax.css

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [<format>][,<source> [<format>]]*;
  [font-weight: <weight>];
  [font-style: <style>];
}