Pub de toto@k22

Forum

 

13 posts

Aller font looks horrible

12/05/2011 à 15:11

Hello,

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:
http://www.fontsquirrel.com/fonts/Aller

how It loos on my site:
image:

Édité le 12/05/2011 à 15:26 par reaper_unique


12/05/2011 à 15:39

I think you have a font-weight: conflict. Try without font-weight: lighter; in /* headings */ and h2
Let us know if it works.


12/05/2011 à 15:58

mumble ... see you changed the font to bebas ...


12/05/2011 à 16:06

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.

Édité 5 fois. Dernière édition le 12/05/2011 à 16:15 par reaper_unique


25/05/2011 à 06:28

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;
OR
text-shadow: #fff 1px 1px 0;


25/05/2011 à 08:10

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


26/05/2011 à 02:58

No problem.


27/05/2011 à 05:31

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


Édité 2 fois. Dernière édition le 27/05/2011 à 05:36 par SashiX


27/05/2011 à 05:50

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:
http://i52.tinypic.com/2ennn7b.png


27/05/2011 à 11:45

Ah, aren't browsers wonderfull :p ?


27/05/2011 à 16:43

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.

@Reaper: yeah

Édité le 27/05/2011 à 16:45 par SashiX


27/05/2011 à 18:08

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.


27/05/2011 à 21:41

Aahh, OK, understood, Berry



Fuseau horaire : CEST. Il est actuellement 10:12


 
Données personnelles  -  Contact