WebFont loaded from Google Font API looks awful in Firefox 3.6 on Windows only
For a site we're developing we've been using Lato from Google's WebFonts API. It works perfectly in every browser (even IE), except for one very important case: Firefox 3.6 on Windows XP (haven't tested in Win 7 yet). The font loads and is displayed, but the characters look awful, like antialiasing completely malfunctioned.
My googling has found hits about problems with webfonts in FF4 due to a bug in the browser, but I can't find anything about 3.6. Is there something we can do to fix this?
The reason Google's font looks like that has to do with a setting in the font's GASP table. This table toggles 'grayscale' and 'gridfitting' for ranges of sizes. I looked at the font Google is sending to your site and for sizes 0-13 grayscale is turned on. 14-18 is set for gridfitting, which results in black and white rendering. Then 19+ is set for both grayscale and gridfitting. I bet if you changed the size of the text to 13px, it would suddenly turn antialiased.
As for Font Squirrel fonts, we set the GASP table to render grayscale+gridfitting for all sizes above 4px.
- I'm using AOS library to give animation but it is not working on some div
- Table Cellpadding and Border Color Issue
- Why `cursor: pointer` and `:hover` property is not being applied?
- Style Indeterminate Checkboxes in Angular Material
- CSS Is Not Importing into HTML
- How to force background image to stretch/compress to fit div, without keeping aspect ratio
- HTML CSS Layout breaks with parent of floated elements
- Shadow DOM styles encapsulation
- How does the "position: sticky;" property work?
- Fixing Border Radius in Safari?
- Puppeteer.page.waitForSelector timeouts, even though the element is present
- problems with my button background color and hover and active states
- In Qualtrics, what can I do to make my with javasectipt embedded HTML text exactly the same as the default text?
- Alternative glyphs Factor A font CSS
- Javascript: repeat smoothly automatic horizontal scrolling
- How do I auto scroll in Angular?
- Double border with different color
- Button click not showing/hiding content
- CSS – Blurring image with un-blurred text
- CSS overflow scrolling and hidden scrollbar (iOS)
- How to remove/replace cached css and js file from client Browser?
- draw diagonal lines in div background with CSS
- the transition-color aren't working correctly
- Apply :focus-visible when focusing element programatically
- Set the background color of the entire webpage (the browser's window)
- HTML/CSS Flip Card Works on Desktop but not Mobile
- Force div to have an even width and height?
- How to set min width on content but still never exceed parent container width
- 2 colors in one placeholder of input field
- How can I align my Bootstrap container to fit the full width of the webpage?