I am trying to place a piece of ASCII art on a webpage. The ASCII image will be the only element on the entire page, however, I would like to style it using CSS to match with the design of the rest of the site (it's an art project). Because it's ASCII I have used pre surrounding it in my HTML. I am able to adjust text-align to center the image without issue; I can also add keyframes to my pre class or cite another class to animate my text without the formatting being damaged. However, the second I try to change the font to the lighter Helvetica Neue the rest of my site utilizes, the shape of the ASCII completely distorts. I've even adjusted my image so it's a contained rectangle and not framed by massive pieces of whitespace; it still distorts. I have been going in circles with css white-space adjustments for like 2 hours to no avail. What am I doing wrong?
Here is my current css situation, bearing in mind the html is simply ASCII framed body then pre;
pre {
text-align: center;
}
.open {
font-family: Helvetica Neue;
font-weight: lighter;
white-space: pre;
}
the pre formatting is perfectly fine; the addition of my .open class is where sht goes awry. I can add stuff like keyframes and nothing weird happens though.