Problem with a dynamic text field and a webfont

I've got a dynamic text field that I need to use to display a javascript-generated current time (24H format, hh:mm:ss) - with a custom .woff webfont. I've got the font thing working by modifying the Animate-generated code, but when I display the page in a browser, the time moves because of the different size letters.

Here's a video displaying the problem:

animate clock problem - YouTube

What do I need to change, either in the code or in Animate to get this right?

Also - another issue: in browsers other than Firefox (Chrome, Safari), the text field briefly flashes a generic serif-like font. What I do I need to do to get rid of it?