A pure CSS font - For all your sans-undertale needs

You should totally use our font

Why you ask? Pixelfont can create great improvements, such as

  • - Increased loading times
  • - Client side rendering
  • - No hassle with font files (what even are those anyway)
  • - Seriously, there is a reason I made this in a folder called "This should be illegal"

How does it work?

Essentially, box shadows. We made alot of classes, 1 for every character to be precies. Every class has it's own box-shadow, making it a letter. With some javascript we scan the page for which elements to pixelfy, and pixelfy them by changing it into div's upon div's with different box-shadows.
For example
<p class="pixelated small black">Hello</p>

will be changed into
<p class="pixelated small black"> <span class="word"> <div class="letter-container h"><div class="h letter"></div></div> <div class="letter-container e"><div class="e letter"></div></div> <div class="letter-container l"><div class="l letter"></div></div> <div class="letter-container l"><div class="l letter"></div></div> <div class="letter-container o"><div class="o letter"></div></div> </span> </p>

How do I use it?

It's really simple. Just give your element class pixelated, a color and a size.

Possible colors Possible Sizes
black xsmall
white small
red medium
green large
blue xlarge

Example code:
<p class="pixelated small black">Hello World!</p>


Hello World!

What if I don't want to play by your naming rules? >:(

You can manually trigger the transition with a built in javascript function. This function requires the ID and animation speed(in ms). Example:

<p id="pixelMe" class="small red">Pixelate me!</p>
renderPixelArtById("pixelMe", 100); </script>


Pixelate me!

Where can I find the monstrosity of code that you call CSS?

On my github page, with this site as example page, and a complementary template page!