Problem with a dynamic text field and a webfont

[luscfad]

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?

[Joseph Labrecque]

It is likely because you are not using a monospace font?

[JoãoCésar · Accepted solution]

Hi.

You can also align your text field to the left.

About the flashing, this is an issue regarding to webfonts in general, not only to Animate CC.

Web Font Optimization  |  Web Fundamentals  |  Google Developers

https://medium.com/@ngubanethabo.ambrose/prevent-text-font-flickering-caused-by-using-a-custom-font-...

Regards,

JC