Search code examples
cssfontsfontforge

How can I render a .ttf font without anti-aliasing, then export that font as a .ttf for the web?

To be clear, I'm not trying to trace a bitmap font. I'm trying to recreate Windows' UI in a browser, and older versions don't use anti-aliasing. I need to bake the pixels into the font so that I can get no anti-aliasing across browsers. For an example of what I mean, see XP.css' fonts: An image of aliased fonts in a browser

So, to clarify, how can I take a given vector .ttf font, render it with no anti-aliasing in the same way Windows used to pre-Vista, and export the result as a .ttf with the pixelation baked in?

I haven't tried much as I don't really know where to start, but looking at other questions on SOF, FontForge seems like a good choice? I've poked around it a bit but I can't really find anything simple.

Solution

  • I've solved this myself.

    1. Obtain a .ttf of the font you're trying to render as a bitmap.
    2. Open it in FontForge
    3. Go to Element > Bitmap Strikes Available
    4. Enter your desired font size in whichever DPI you want (or the pixel size in the given box)
    5. To change the font rendering, select either X, Win or Mac.
    6. Click OK.
    7. Go to File > Generate Fonts.
    8. Save the font as a .bdf.
    9. Re-open the font (now a .bdf) and re-export it as a .ttf.

    You're done!