Aller font looks horrible
I use the Aller font on a site but it looks horrible. It looks really jagged, yet on other sites it looks like it should. Anybody know why this is? I've only changed the font-size and font-weight in CSS.
It's really annoying.
How it should look:
how It loos on my site:
Editado el 12/05/2011 a las 15:26 por reaper_unique
I think you have a font-weight: conflict. Try without font-weight: lighter; in /* headings */ and h2
Let us know if it works.
mumble ... see you changed the font to bebas ...
yeah while waiting for a reply, but even with Bebas, I get it on different PC's and laptops. Not as bad though, I'll try what you said with Aller.
Edit: so I changed it back to Aller(display) and it looks pretty ok but it's still a bit noticeable and I don't have any weird CSS construction, or at least not that I notice.
but I think I'll go with Bebas. It looks better.
Also, using that @font-face generator of fontsquirrel made it better, I think.
Editado 5 veces. Última edición el 12/05/2011 a las 16:15 por reaper_unique
I also use Font-Squirrel, and it's not the font, it's Font Squirrel and it looks that way for everyone. An alternative is to use Cufon, but Cufon also has cons too, nothing's perfect so just stick with Font Squirrel. Notice how on the page, they show a preview, HOWEVER, when they show the font "Aller" at the top, notice how it's jagged also. And the custom fonts on Font Squirrel, they're jagged to.
Take a look: http://i55.tinypic.com/2ppbp86.png
CSS Solution, use "text-shadow", makes the font look smoother. Not compatible in every browser, but in most. Use:
text-shadow: #fff 1px 0 1px;
text-shadow: #fff 1px 1px 0;
Thanks for the info, never noticed that. And indeed it's not the font because when I use it in photoshop it looks fine.
But to me this question is solved
It also depends on browser. Here's an example. (Opera in this case doesn't apply AA to the font)
UPDATE: and looking at Berrybellebee's pic, I must say Chrome doesn't apply AA either. AFAIK, Firefox 4 apply AA correctly
Editado 2 veces. Última edición el 27/05/2011 a las 05:36 por SashiX
True, however I noticed most browsers don't AA the fonts. And really? Firefox 4 doesn't AA fonts for me. I use Font Squirrel on my site, and the font looks rough, I add text-shadow (like I said above) to make it look smooth, but it still doesn't look as smooth as it does in for example Google Chrome.
Take a look:
Ah, aren't browsers wonderfull :p ?
Berry, strange thing, because I installed FF4 when it came out and I can say you with confidence that in my case FF4 was applying AA, well, it was a very heavy AA
All fonts were as if all of them were in bold and with AA
Strange. And, unlike in Safari, in FF I haven't found any option to change/enable/disable that "AA"
As for Chrome and after reviewing IE9, Opera, Chrome and FF... the only browser that apply AA is IE9, don't understand why are you saying "it still doesn't look as smooth as it does in for example Google Chrome."
You first Chrome screenshot looks identical to your second FF4 screenshot.
Editado el 27/05/2011 a las 16:45 por SashiX
When I said "it still doesn't look as smooth as it does in for example Google Chrome", I meant when you add text-shadow to the CSS, it makes the font look smooth in Chrome. But in Firefox it doesn't, it still looks rough.
Aahh, OK, understood, Berry
Huso horario CET. Ahora son las 15:11