Blocking font download

Question

For some reason, certain fonts look terrible on my computer—some lines are double-thick, splotches of 'ink', etc. They're hardly readable, and certainly not showing up as intended. Here's an example of a font as designed:

and as displayed on my screen:

(sorry for not having a better example at hand).

On one hand it would be nice to diagnose the problem itself. (Vista machine, problem happens in Firefox and Chrome but not in IE, etc.) but I think a more practical stopgap solution would be to block the download of the webfonts. Is there a way to do this?

I don't really care at what point this happens: stopping certain @-rules in CSS, disallowing the display of custom fonts, blocking it on a TCP or HTTP level. I don't want to do a DNS block on fonts.googleapis.com and themes.googleusercontent.com since that would stop unrelated good stuff as well.

Answer 1

You could block it on a http-level if you have a proxy server. Then you should be able to tell it to block the Content-Type that is associated with the font. Now I don't know the content-type, but it should be easy enough to find using Fiddler.

On another slightly related note. I have one font that behaves like that on my computer. It's caused by a bug in the font and Clear Type in Windows. If I turn of clear type the font looks good. Or as good a font looks without clear type. So perhaps you could try that first?

I've checked and you might be able to block the fonts using Fiddler. By changing the custom rules you might be able to do it. It could be useful just to see if it would work. Try adding this code to the CustomRules.js in the OnBeforeResponse function.

if(oSession.oResponse.headers.ExistsAndContains("Content-Type", "font/woff")) {
            oSession.oRequest.FailSession(404, "Blocked", "Fiddler blocked font file");
}