First, I love what you're doing here. I'd like to use it, but there is something stopping me: when I have lots of options, I need an easy way to compare them. I would so much rather compare a grid of options instead of having to look at them one at a time. I can only look at one while having to remember all others. I can't even down arrow through the fonts to speed up the one-at-a-time process, because the font menu cycles over the few fonts that are visible in the dropdown instead of descending the list.

So, just a thought: pre-render and save versions of each common character in each available font. ([a-z,A-Z,0-9] and watch for other common selections.) When a user says, "I want an 'R'", you display a grid of pre-rendered SVG icons of R in all available fonts (so you don't have to load all of the actual fonts at the same time). As SVG, they could be viewed at any scale. They choose the font by clicking the icon instead of the font name. Then they choose size, color, etc., to customize it, and that one is rendered live.

Good work.