display text as square symbols instead of letters

Question

Is there a simple css way to display text with every letter replaced with a filled square?

My idea was to find a font-family that has squares for all letters, but I didn't find anything like that existing. Google is no friend as it gives hits of posted issues with boxes that appear when fonts fail in some way.

Letters should be displayed as squares, not replaced with squares. Also, I need to be able to control the square fill color with the usual html/css.

I'm fine to use font-face, but am trying to avoid the learning curve for creating my own font.

Update: here is an example:

div.innerHTML = "some arbitrary text".

Should be displayed like this:

"■■■■ ■■■■■■■■■ ■■■■".

Answer 1

@NoobEditor is right although. Many online font editors available (e.g.: http://fontark.net/farkwp/ ), you can create such font family in few minutes and can embed with your app.

Answer 2

Get a square font, define it in your we page style, asign it to an object, a div must work, put your text there. Voila.