Wrong rendering of Google Fonts in Mozilla Firefox

Question

I found once someone who had same problem and I was able to fix this. Now I have same problem and after 2h of searching I can't find solution.

This problem appears on all websites using google fonts. In Internet Explorer everything look ok so looks like the problem is on the computer and not on website itself.

Here is screenshot what I see in my firefox:

Here is screenshot from Internet Explorer:

As you can see most of the letters have a "dot" on top and there is no "anti-aliasing" (This is tested when there is no zoom - CTRL 0) If I zoom in (CRTL +) than "dots disappear" and text start to look normal.

What I have tried so far:

1) My Computer > Properties > Advanced > Performance > Visual Effects > "smooth edges of screen fonts" > selected

2) Control Panel > Personalization > Window Color and Appearance > Fonts > Adjust ClearType text > Turn On ClearType

3) Firefox > Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available" > disabled

4) Firefox > about:config > gfx.content.azure.enabled > false (I don't have this)

5) Firefox > about:config > gfx.direct2d.disabled > true

6) Firefox > about:config > layers.acceleration.disabled > true

Answer 1

You never mentioned what particular type of webFont you are using. What I have found through testing is that FireFox renders woff and woff2 fonts poorly when clearType is on. You could simply ensure that you reference trueType fonts in your CSS @font-face rules, and that will solve the problem for pretty much all major browsers. However, trueType fonts are rather large so this comes at the expense of load times / size.

A more elegant solution would entail feeding trueType fonts to FireFox but woff or woff2 to most other browsers.

To elaborate :

Most solutions to browser webFont compatibility entail stacking the URL's for differeing font types with the most desired coming first, like this:

@font-face {
    font-family: 'myFontFamilyName';
    src:url('../fonts/font.woff2') format('woff2'), 
        url('../fonts/font.woff') format('woff'), 
        url('../fonts/font.ttf') format('truetype');         
}

Browsers dutifully parse through that list and load the first format they understand.

The problem here is that although Firefox can make use of woff2 or woff, it renders them very badly when clearType is on, which it almost always is. So what is desirable is that FireFox get a css block more like this:

@font-face {
    font-family: 'myFontFamilyName';
    src:url('../fonts/font.ttf') format('trueType');         
}

So the challenge becomes how to do it. I accomplished this using .less to pass in a code and type as variables, something like this:

<link href="myBaseURL.css?fontCode=<desiredCode>&fontType=<desiredType>" rel="stylesheet" type="text/css" />

And in the CSS rules:

@fontType: svg; /*default*/
@fontCode: svg; /*default*/

@font-face {
    font-family: 'myFontFamilyName';
    src:url('../fonts/font.@{fontCode}') format('@{fontType}'), 
        url('../fonts/font.woff2') format('woff2'), 
        url('../fonts/font.woff') format('woff'), 
        url('../fonts/font.ttf') format('truetype');         
}

Then you pass in the desired fontCode and fontType based on the browser - basically detect FireFox and pass 'ttf' and 'trueType':

<link href="myBaseURL.css?fontCode=ttf&fontType=trueType" rel="stylesheet" type="text/css" />

Which using .less would yield this output:

@fontType: svg; /*default*/
@fontCode: svg; /*default*/

@font-face {
    font-family: 'myFontFamilyName';
    src:url('../fonts/font.ttf') format('trueType'), 
        url('../fonts/font.woff2') format('woff2'), 
        url('../fonts/font.woff') format('woff'), 
        url('../fonts/font.ttf') format('truetype');         
}

Somewhat repetitive, but because FireFox will load the first reference it can render, the .ttf font will get loaded.