I use #font-face on Tumblr, with Base64 encoding done with Fontsquirrel web generator so it can work in Firefox, too, and it was working fine for a few months. However, lately, text is blurry, but no everywhere and I don't know what triggered this. I don't think it's latest Firefox update, because it worked fine for some time as I said.
This is how it looks:
and this is "live preview".
So as you can see font is okay on some places but blurry in others.
Any ideas how to fix this?
I think it might be your font. Here's a screenshot from IE11 on Windows 7:
You can see a coloured highlighting effect around the text in different places, consistent with your Firefox screenshot. I think that's caused by bad font hinting for ClearType.
If you normally use Chrome on Windows, it might look "okay", because Chrome uses GDI+, an old, ugly font-rendering method. Firefox and modern IE use ClearType, which typically looks much better.
Disclaimer: I'm not an expert on typography, so I may be wrong.
Related
I found an open font I liked (Crete Round) and designed some screens in Photoshop with it. When it came time to set up the CSS, I tried using both Google Fonts and fontsquirrel.com's downloadable "kit" (a zip file with four different types of fonts and a ready-made stylesheet), but both gave me strange results on Mac.
Photoshop — What I want it to look like:
Yuck — Chrome (and Safari) on Mac using an #font-face kit from fontsquirrel.com:
Chrome (and Safari) on Mac using Google Fonts (basically identical):
GOOD —Chrome on Windows (fontsquirrel):
GOOD — Hack. I found out that with any opacity (not text color alpha) less than 1.0, Chrome gave me good results (but Safari was still bad.)
Chrome on Mac using fontsquirrel, with opacity:0.999;:
Does anyone have any ideas on what is going on here, or what I might be doing wrong?
I don't think you are doing anything wrong. I also don't think there is a way around it, other than to use images instead of text where the style is absolutely crucial.
I found THIS LINK which discusses rendering engines on different operating systems (also taking different browsers into consideration).
I hope this helps!
try
html { -webkit-font-smoothing: antialiased; }
I have developed a site on my MAC. The footer looks good in IE, Firefox, Safari, Chrome but when I look on to a PC it appears that the font is rendering differently and pushing information into the social icons I have placed.
I am using Verdana.
The site is: foodworkscolorado.org/donate
Ideas?
Fonts are going to render differently on any system you test it on. That is life on the web... as it should be. Websites aren't supposed to look identical... they are supposed to display in a variety of formats and ways.
Since you are using a web-safe font, I suspect the issue has to do with the difference between Microsoft's "ClearType" rendering and the anti-aliasing method on a Mac.
The best you can do is test using a service such as http://www.browsershots.org and be aware of the differences.
You may be tempted to use images for your text... don't do this.
I'm trying to get #font-face looking perfect in IE, but am short of a solution.
I've checked out this:
http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/
which didn't work on my Windows7 IE.
Anyone has a better solution?
I've sort of come to a conclusion that I feel confortable with.
For text that absolutely need to be perfect across browsers with the anti-aliasing, I would use Cufon/JavaScript solution. #font-face just doesn't compare in terms of rendering across browsers.
For text that does not need that kind of perfection and were using webfont Arial/Verdana etc. to begin with, I would sacrifice extra download of the font to get a nicer font right across the site.
So the answer to the question is no... it is not possible to force the browser in being able/unable to do anti-aliasing by front-end CSS methods.
I don't like Microsoft's font rendering.
I've created a site for a client and the last unticked box on my debugging list is the biggest. (it's not 'live' yet btw so please ignore any other bugs - http://baked-beans.tv/bb)
I'm using font-family to import a non standard web font. It renders fine on Mac, but it looks like sick old man on its last legs on PC.
The biggest irony is that the font is actually ok to read in internet explorer 8. This is the first time I've EVER seen IE beat other browsers in anything. But anyway, the font doesn't look good in FF, Chrome, or Opera, on a PC.
So my solution is to serve different fonts to PC users. There are a lot of css hacks for different browsers, but not for different OS. the php OS detections are really really complex. I'm just looking for something simple like if(PC) do this; else do that;
Any advice would be immensely helpful
Just one other thing... Just wondering if there is a way I could prevent Windows from anti-aliasing type on the Internet? The reason why it looks so bad is because it's trying to anti-alias it, maybe if it left the poor font alone it wouldn't look so bad.
The CSS Browser Selector can target different OS's. :)
No, you can't "kill" anti-aliasing.
But, you could use http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/ for detection.
From what I saw only the headlines are crap so you could as well use http://cufon.shoqolate.com/generate/ for those and make your life easier.
My favorite article on this topic is here:
http://getsatisfaction.com/typekit/topics/typekit_fonts_rendering_horribly_on_windows_based_systems
There is a lot of good discussion including TypeKit developers on the reasoning behind that, and it has a link to an interesting article about using JavaScript to detect whether font smoothing is in use (you definitely can't do it with CSS alone).
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
Good luck.
I'm not sure if this has anything to do with the recent Safari update, but I'm beginning to notice this a lot. There is a drastic difference in the way each browser is rendering fonts.
for instance, I took screenshots of what I am seeing here on stackoverflow...
http://twitpic.com/q43eh
I have verified that this is a trend via my co-workers machines.
has anyone noticed this or have any thoughts on non-hack solutions?
Font rendering isn't specified anywhere in the standards and therefore may (and will) vary between browsers and platforms.
In particular, Safari on Windows renders fonts like OS X does which tends to look weird to Windows users as Windows has quite a different take on how to render fonts than OS X.
You can definitely notice this, especially if you use Expression Web SuperPreview. This is just a general problem of the web, just like folks can hit Ctrl-+ and make your text bigger. Try not to use many absolute coordinates in CSS and the layout engine will ensure it's still readable
I first noticed this in OSX in October 2010. It is especially noticeable with Helvetica Neue. I suspect that an OSX update broke font anti-aliasing in font sizes above 12 pixels. I've posted an Apple Support message here.