I am trying to make something that uses a pixelated font, but I can't seem to get the pixels to stay crisp. When using the pixelated font, it simply adds some kind of anti-aliasing, even though I explicitly want to have it use the crisp pixels.
@import url(https://db.onlinewebfonts.com/c/d14098fec1a21bb32ccb0ee2ab07bb09?family=Pixelated+Display);
body {
font-family: "Pixelated Display";
font-size: 12pt;
font-smooth: never; /* doesn't work outside macOS */
-webkit-font-smoothing: none; /* doesn't work outside macOS */
image-rendering: crisp-edges; /* doesn't affect fonts */
}Lorem ipsum dolor sit amet, CONSECTETUR ADIPISCING ELIT.Above, I included a demo that uses a random pixelated font from the internet (source). However, when taking a screenshot of the result, you can see the text is not crisp like I want, but instead it seems to be smeared out over multiple pixels. To see this more easily, just take a screenshot of the text, then paste it into any image editor, and zoom in. This will result in the following:
However, what I want is the pixelated font to be... pixelated. If I have to use a specific font-size for that, I'm all for it, but so far I haven't been able to find any resources to make this text become crisp, staying pixelated like it should. As you can see in the css of the snippet, the image-rendering and font-smooth styles do not seem to affect the text at all (at least, not on all operating systems).
A live demo on the website I'm trying to change is this page, but due to CSP of the site I cannot import the same font onto here. As you can see at the top of the image (which is text that's embedded into the image), the top line is much more crisp than the rest of the image, which is text that's placed on top of the image.