The fonts are being rendered crisply to a fault, such that the edges are all jagged. Being a minimalist site, I'm trying to get everything perfect.
How do I fix this? http://individual.utoronto.ca/andrewlouis
Font rendering is browser-specific and operating-specific.
There's very little you can do to control how the fonts are rendered, and what you see in your browser is not how other users will see it in theirs.
This article is a bit old now, but it does explain the differences very well between the various browsers and how they render text.
And here's a question over on Webdesign.stackoverflow that asks how to make fonts render the same across all browsers: https://webmasters.stackexchange.com/questions/9972/how-can-i-make-fonts-render-the-same-way-across-different-web-browsers
The answers given there might help you, but the basic answer is that there's not much you can do about it.
For much better / smoother text in Chrome and Safari, try the CSS:
-webkit-font-smoothing: antialiased;
It appears however that -moz-font-smoothing was once available to use, but is no longer available. Fonts do tend to be smoother in Firefox anyways it seems.
Try:
font-smooth css property. See docs: http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
Also here: http://www.cssportal.com/css-properties/font-smooth.htm
See Font Rendering Differences: Firefox vs. IE vs. Safari
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
Related
i have created a header on my website that uses custom font-faces and have applied a size with pixels (61). and for some unknown (to me) reason the font is rendered nearly twice as large in ie9 and tor than in chromium and firefox. there are no other css settings that appear to me to be relevant (e.g. no font-weight:bold or similar settings). other font-faces appear to render close to or exactly the same size between browsers.
i've exhausted my ideas on what is the cause of this.. if anyone knows, i'd appreciate some assistance. you can view the header here: http://www.infiniteeureka.com
- the cream words 'infinite eureka' are the ones in focus; the multi coloured smaller words render as desired in both browsers.
Firefox has known issues rendering web fonts. I don't really have time to research your problem, but they have Mozilla-specific CSS to deal with these bugs, font-feature-settings in Firefox. I'd start by reading here: https://developer.mozilla.org/en-US/docs/CSS/font-feature-settings?redirectlocale=en-US&redirectslug=CSS%2F-moz-font-feature-settings
I am using "Yanone Kaffeesatz", "Futura", and a couple other fonts on my site. They look great in Chrome Canary, but pretty bad in Firefox...jaggy and oddly bold. So "bold", in fact, that it's making some of the smaller text hard to read. They also display nicely in Safari.
Here's a screenshot:
http://i.stack.imgur.com/2yM7c.jpg
I have the font-weights set to "400" (I've also tried "normal") and have "-webkit-font-smoothing: antialiased". Both browsers are up-to-date. Nothing seems to help.
Any ideas on how to fix this?
From your screenshot, it seems that Firefox version simply doesn’t support Retina. Therefore, your problem has nothing to do with the fonts. I don’t know if newer Firefoxes already include support for Retina.
Good news! It appears that the problem was due to Firefox 17 not supporting retina displays.
I have since downloaded Firefox 18 (thanks Fitoschido!) and here is an updated view of the text: http://imgur.com/ZN9A49q
The text in Firefox still looks a bit thicker, but overall much better! :)
I'm having some trouble with font's on cross-browser compatibility. FireFox and Chrome look virtually the same, maybe a bit smoother on FireFox, but on IE9 it seems condensed and a bit bolder? I've used every CSS value for font to try to set a default for every browser but nothing works. Any ideas what IE9 is doing to distort the font? I do like the way it looks in IE9 but I want it to match between browsers.
It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.
Microsoft says,
Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations
However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.
The font rendering is dependent not only to the browser but also the operating system.
Please see the following two articles which are explaining the difference and what you can do with CSS to overcome it:
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
i heavily use Google Fonts and custom fonts, as Google Chrome has a bad habit of rendering them poorly, which is a shame because everything else works so well with Google Chrome, is there any way i can (preferably using css) render the fonts to an 'Apple Safari' standard?
Thanks,
This is an ever confounding question. (see: https://superuser.com/questions/354006/google-chrome-never-renders-fonts-properly-no-smoothing-etc. See also: http://productforums.google.com/forum/#!topic/chrome/oXILHkVG75M)
It's a Windows 7/Vista ClearType issue. AFAIK Safari, FF and IE render text differently or use their own text rendering routines. Basically, it used to be that you could add a small shadow to set an internal Chrome rendering flag, and the text would look decently better, but it still looks pretty bad. That no longer works. As far as I can tell it's a bug in Chrome that hasn't been fixed.
I'm still looking for a work-around myself, but I think we're pretty much out of luck
Have you had a look into -webkit-font-smoothing ? I regularly use Google Fonts and #font-face kits and have had success with some of the 'chunkier' fonts using the 'subpixel-antialiased' and 'antialiased':
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
Perhaps try each and see if either makes a difference to what you're seeing?
There's a post on MaxVoltar that gives a reasonable explanation:
http://maxvoltar.com/archive/-webkit-font-smoothing
So I'm front-end coding this flashy new start-up website and I am using a specific font. I am using #font-face, and the font shows in all browsers but some issues:
1) The font looks pixelated which makes it kinda ugly. This problem actually has happened to me before with other fonts so I will be happy if somebody recommends me how to get the font smooth.
2) In Opera and Safari the font renders normally (still pixelated) but in IE, Firefox and Chrome it renders bold, kinda bolder than normal. I tried putting font-weight but the font doesn't support any weight so it's normal. Any ideas on that problem ?
I really want this font and I can't understand how everybody is using font-face with all those rendering problems. I hope I am missing something.
Depends on what OS are you using since #font-face uses OS font rendering engine. On Windows XP just forget about getting it done right. Windows 7 does the job pretty much ok also in IE7/8.
One thing that can cause your fonts to look jagged can be the Cleartype options - turning it off fixes the edges since it won't do the extra anti-aliasing that is not needed since the embeded font is already anti-aliased.
One way to disable cleartype on the client side is to apply a IE specific filter: property (just use some simple property so it won't do anything except triggering the effect - like rotation by 0 degrees) to your headers in css - that causes IE to turn off cleartype to avoid conflicts between filter rendering and Cleartype rendering. But this will fix IE only.
There is also webkit specific -webkit-font-smoothing which works ok and might help you with chrome and css3 font-smooth (never used this one so can't tell you about results or supported browsers).
Most solid thing you could do, if you really want to keep your selected font, is to use Cufon or similar font replacer. From my experience it does the job with an extra script load.
Overall for #font-face there is no solid solution to get it look the same on all browsers and systems.