Is there a way to smooth font icons in Firefox?

Asked 18/1, 2015 at 11:2 Answered 28/1, 2015 at 22:44

I'm using icons. On Chrome and Opera they look fine. But if I try Firefox they look pretty blurry if the font-size of icons is lesser than 20px, while after 30px they look smooth. Is there a way to fix this?
For example the Firefox problem of images resizing resulting in blurry images can be fixed by rotating the image of a very small amount. Can something similar be applied to font icons?

To see how it looks, just go (using firefox) to any website with icons(like font awesome) and try resizing them to 20px and see how blurry they become.

Waterscape answered 18/1, 2015 at 11:2 Comment(6)

I'm actually unable to reproduce the problem. I'm comparing the FontAwesome website in Chrome and FF (where the default font size is 14px) and I can only notice any difference when I squint at the icons and yeah the football has 2 pixels that might be out of place. Is this the problem you are having or do you have a more defined example? – Smallage 22/1, 2015 at 12:6

Very strange - I get default ClearType rendering on Windows 7 same as gewh. I might imagine you'd get AA on OSX by default which can blur some of the fine detail. Not sure what to suggest really - have you changed the ClearType Tuning settings, or enabled any of the accessibility settings? Do you have another Win7 box to test it against? – Vaporish 22/1, 2015 at 12:25

Can you update the post with a screenshot of the problem please? Then we can compare it against our rendering. – Vaporish 22/1, 2015 at 12:29

Did you never saw a pixelated on borders icon? – Waterscape 22/1, 2015 at 13:15

This kind of thing is really hard to resolve in words. Post that screenshot and we can tell you if we're seeing the same thing. – Vaporish 22/1, 2015 at 13:55

BTW tried setting font-size to 21 px - blurryness gone :D – Waterscape 22/1, 2015 at 14:15

The problem is coming from the font rendering that browsers use. Different platforms use different methods. Browsers opt to use the OS method or their own implementation.

The reason it looks better in Chrome is because Chrome doesn't subscribe to ClearType on Windows. IE and Firefox both do use it (to check this Start -> Adjust ClearType Text and toggle it on and off to see the difference). But Firefox on Mac and Linux won't use it there because it is a Windows only technology.

Chrome has the upperhand on this particular problem because it doesn't use ClearType it uses DirectWrite on all three platforms. This means that anything should look the same in Chrome no matter what OS you're on.

Why does this matter? Because you're not in control of the user's computer. You cannot force ClearType off, you cannot alter the user's ClearType settings. A user might change their ClearType settings anyway ruining any fine detailing you might do using text-shadow to make it work.

You might get better luck using cufon for this but it's by no means a sure thing.

The solution I'd go for is using images for these icons. That way I'll know for sure that no matter what you're using to view the icons, they will be the same for everyone.

Smallage answered 22/1, 2015 at 12:42 Comment(6)

This. If you want to be 100% sure they'll be the same for everyone, images are the only way. Cufon will give you a very high level of compatibility but not quite 100%. Default rendering may or may not look as you expect is all you can really say. Usually fine, but you're always going to be relying on certain default os and browser settings and behaviors. – Vaporish 22/1, 2015 at 12:50

I'm toggling Cleartype on and off, the text on the page changes, but the icons remain as blurry as they were, no changes – Waterscape 22/1, 2015 at 13:13

It is actually happening though. Take a screenshot, zoom in. If there is orange and blue colouring - ClearType is on. – Smallage 22/1, 2015 at 13:16

Using sprites seems to be the only universal solution. – Waterscape 22/1, 2015 at 13:22

In which case the problem is likely that your PC, for whatever reason is NOT using ClearType in Firefox. For a universal solution, that reproduces with 100% accuracy, as you say - images are the only way. – Vaporish 22/1, 2015 at 13:47

check about:suport in firefox. Look for AzureContentBackend. In windows you want a Direct2d version. (cairo is likely the cause of your font issues.) Try updating your video drivers etc. Hopefully this project to switch to skia will help: bugzilla.mozilla.org/show_bug.cgi?id=772958 (PLEASE VOTE) – Tungstate 13/11, 2015 at 23:10

A good fix for OS X is to use the text-rendering and smoothing properties.

body {
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

This also works well when it comes to web fonts.

Williamswilliamsburg answered 26/1, 2015 at 19:29 Comment(2)

While this is correct for OSX smoothing, the problem in question is showing on Firefox for Windows 7 only. – Vaporish 29/1, 2015 at 15:54

@Vaporish Agreed. Useful and interesting information but better provided as a comment. – Nomination 11/4, 2016 at 20:50

I have found that occasionally the font-style will be overridden when using google fonts and the font will appear bold. This combo has worked well for me.

.element {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal !important;
}

Insult answered 28/1, 2015 at 22:44 Comment(0)

Recommended topics

Hot tags