Skip to main content
D
davidp59357265
Participant
March 11, 2017
Answered

Font rendering issue in Firefox

  • March 11, 2017
  • 1 reply
  • 709 views

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.

This topic has been closed for replies.
Correct answer ClayUUID

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

C
ClayUUIDCorrect answer
Legend
March 11, 2017

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.

Hello World!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices