Highlighted

Problem with a dynamic text field and a webfont

New Here ,
Apr 10, 2019

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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-family-983c4b8d548d

Regards,

JC

Views

355

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Problem with a dynamic text field and a webfont

New Here ,
Apr 10, 2019

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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-family-983c4b8d548d

Regards,

JC

Views

356

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 10, 2019 0
Adobe Community Professional ,
Apr 10, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2019 1
Adobe Community Professional ,
Apr 10, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2019 2