As much as I love Chrome, I hate how horribly it renders @fonts.

 

There have been several cases of this in past and each has been fixed but now I'm experiencing it again - the jagged edges on text (no AA). I've tried a few of the usual fixes:

• Moving SVG up the @font-face url hierarchy.
• Making a webkit query to prioritise SVG.
• Disabling ClearType.
• Using webkit-text-stroke: 1px;
• Using text-shadow: 0 1px 0 rgba(0,0,0,0.01);

And none have worked (the stroke works but looks awful whereas the others don't seem to do anything).

I've scoured the internet looking for a fix but haven't managed to find anything.

Any ideas? :/

I find fonts in general quite jarring in my designs compared to what I put up on Fireworks or Photoshop. I don't think there's anti aliasing support on the web.

I find that they never really come out as perfectly smooth as in Photoshop but other browsers seem to render my fonts perfectly fine... here's an example.

 

In Firefox.

 

 

In Chrome.

 

 

(Click each image to view the difference properly).

Edited April 22, 201313 yr by Alluziion

I use Chrome these days when developing, preferring it to Firefox. I have had a couple of issues with Firefox rendering fonts (probably more likely a Chrome issue as I'm designing with that in mind). I can't remember how I resolved the inconsistencies other than changing the font itself (some of Google Web Fonts, despite being free, aren't so great for the screen). Sometimes tinkering with the text-rendering property resolved it in the past.

 

One of the fonts I was using looked fine across all browsers but some Windows users said they had problems with the font rendering in Chrome. It was one of those 'thin' fonts. In the end, I removed it and temporarily went for Helvetica - yes, I went there I'll have a look at my 'notes' (I sometimes use evernote for snippets, etc... so might have a solution hidden in my scrapbook).

pff.. helvetica, better use comic sans 4li4s