I'm producing a project in Adobe Animate and have changed my text boxes from static to dynamic text using Google web fonts because of the large file size the static text was producing. Using dynamic text has cut the file size in half and it renders fine in Chrome and IE. The problem I have is the way the text looks in Firefox, it seems that Firefox shifts the baseline of the text up compared to the other browsers. See the screen grabs below, the first grab is the Firefox rendering, the second one below is Chrome. As you can see the large number 1 has shifted up and also the smaller text has shifted, but is less noticeable.
y
Does anyone have any advice on this to get some consistency of text rendering across the different browsers. Any help on this issue will be most appreciated.
1 Correct answer
This is a known bug in Firefox's canvas text rendering.
The only way to get 100% consistent canvas text across all browsers is to bake the text directly into the background graphics. This will also provide the advantages of smaller file size, better looking text, and faster startup due to not having to download a remote font.
1
Reply
AdChoices