CODEWITHSUNDEEP
cssfirefoxfont-face
Jen
Jen

Reputation: 458

Special Characters in 20px+ Screw up in Firefox 3.6

Hey everyone, I'm working on a site and any special characters ("’" "…") turn into garbage at any font size over 19px. I'm using fonts I defined with @font-face, and the garbage disappears when I use a fallback font. This is Firefox 3.6.13.

I've tried defining the fonts in the page with a font: declaration rather than a font-family: declaration (see here) but it doesn't work.

I can use the standard straight quote and skip the special characters, but have you seen a straight quote in a heading at 40px? Ugh.

Anybody seen this bug, and any suggestions to fix it server-side?

Upvotes: 0

Views: 286

Answers (2)

Jen
Jen

Reputation: 458

After some more research, I (sort of) figured out what's going on. Firefox 3+ will automatically "optimizeLegibility" for any fonts over 20px (look up CSS "text-rendering" property).

For whatever reason, the fonts I am using don't render correctly when Firefox applies this value. If I specifically declare:

body { text-rendering: optimizeSpeed; }

Suddenly the problem disappears. Obviously this might bother someone who likes the effect of "optimizeLegibility" (it's definitely a nice effect), but if you can't change font-faces and you're getting garbage in your headings, I hope this helps.

Upvotes: 1

Craig White
Craig White

Reputation: 13992

Perhaps you will simply have to use another font?

Upvotes: 1

Related Questions