Using the Vera typeface with CSS

As I mentioned yesterdaynew typeface, Vera, has been released that is suitable for open source projects. In order to use it a bit more fully I wrote a quick test page and compared the rendering of each of the fonts in my font viewer program with the fonts used by my web browser, Mozilla 1.3, to ensure that the right font was consistently applied. Below is a short list of each of the fonts and the appropriate CSS font selection properties that will request the desired font.

  • Bitstream Vera Sans.
    font-family:'Bitstream Vera Sans';
  • Bitstream Vera Sans Bold.
    font-family:'Bitstream Vera Sans';
    font-weight:bold;
  • Bitstream Vera Sans Oblique.
    font-family:'Bitstream Vera Sans';
    font-style:oblique;
  • Bitstream Vera Sans Mono.
    font-family:'Bitstream Vera Sans Mono';
  • Bitstream Vera Sans Bold Oblique.
    font-family:'Bitstream Vera Sans';
    font-weight:bold;
    font-style:oblique;
  • Bitstream Vera Sans Mono Bold.
    font-family:'Bitstream Vera Sans Mono';
    font-weight:bold;
  • Bitstream Vera Sans Mono Oblique.
    font-family:'Bitstream Vera Sans Mono';
    font-style:oblique;
  • Bitstream Vera Sans Mono Bold Oblique.
    font-family:'Bitstream Vera Sans Mono';
    font-weight:bold;
    font-style:oblique;
  • Bitstream Vera Serif.
    font-family:'Bitstream Vera Serif';
  • Bitstream Vera Serif Bold.
    font-family:'Bitstream Vera Serif';
    font-weight:bold;

I’ve uploaded the test file I used for the typeface. It includes some lorem ipsum text to help get a better feel for the typefaces.