Change PRE style but preserve whitespace distance

I'm displaying some content using the PRE tag, because it's vital to preserve the whitespace as is. However, when I'm开发者_JAVA技巧 trying to change the PRE font-family, the whitespace indentation falls apart.

To be more specific, I'm building a site with song chords and their equivalent lyrics, so I need each chord to be exactly above a certain word or letter. When I style the PRE font-family, the chords are losing their relative to the letters position, even though all text is styled the same way.

Any suggestions?

As the other posters said, you need a monospace font. You can use CSS3 custom fonts if you want to use your own monospace font. The easiest way to fix your problem, though, is to let the viewer's browser decide which font to use. To make sure all viewers see your pre content in a monospace font, use the following.

pre { font-family: monospace; }

I think it's due to different widths for each letter/number with your font-family. However you should be able to use a monospace font?

yup, you need monospace fonts. here are list of some fonts that is available
http://www.urbanfonts.com/fonts/monospaced-fonts.htm (Google)