webfonts
- Started
- Last post
- 10 Responses
- kalkal
Why do they look like such utter crap on windows? They're aliased to hell.
Google fonts seems to have this problem, any @font-face font seems to do this on windows really.
cufon looks nice but it's too heavy to use for a large body of text.
Is there a solution? (other than using standard fonts)
- kalkal0
Zoom in and you can see that it is actually trying to sub-pixel anti-alias this stuff but it does it HORRIBLY.
- stewart0
There's a crappy cpu-heavy solution.
http://allcreatives.net/2009/12/…
- kalkal0
Nice to know there is a solution for IE but this issue is persistent in chrome now, also by default, Firefox renders with cleartype now, whereas it used to render for a period of time with direct2D so this problem sort of affects all browsers now. Unless the fix also works in all browsers? I assume not though, if the guy is actually using this fix on his own site, it's not working in chrome, his headings are aliased.
- Nathan_Adams0
On Windows, you need to use webfonts that have been well hinted, otherwise you can get some of those odd rendering issues at smaller type sizes. I also find some times you need to experiment with the font size (for example, one font might look crap at 14px, but ok at 15px).
- Thanks, I'll look into alternative sizes. Any suggestions on fonts which are well hinted?kalkal
- All the one's on Typekit tagged Paragraph are hinted for body size: https://typekit.com/…Nathan_Adams
- stewart0
So, Google fonts look crap in Chrome?
Scala is hinted properly as far as i know. Doesn't look too bad in IE.
- FallowDeer0
This isnt a final fix, but give it a try
-webkit-text-stroke
- Had a similar problem just with chrome and this seems to fix it in the short termFallowDeer
- Nathan_Adams0
Is that -webkit-text-stroke to affect the weight of text? If so, that trick doesn't work so well in latest versions of Chrome/Safari. If the text is coming up too heavy in webkit browsers (particularly when reversed out), use:
-webkit-font-smoothing: antialiased;
(forces type rendering to use standard antialiasing, rather than sub-pixel antialiasing.)- < nice.non
- Tried this, doesnt workFallowDeer
- All depends on what version and operating system, like as I said, its just a temp walk around rather than a solutionFallowDeer
- albums0
have you tried font-weight:normal; ?
I was getting doubling of the letters to create the bold effect on mobile devices with a google font, this solved the issue.
- monNom0
For headings, Chrome can use:
text-shadow: 0 0 1px rgba(0,0,0,0.5);
to kind of fuzz out the edges similar to Apple anti-aliasing.