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.
Related
I'm having a problem with a Wordpress based site I'm building on: In Chrome, on Windows 7, the body text on the sites' homepage is set to display as a Google Font. However the last line of the text is displaying as the default sans-serif font.
I have thought about asking about this on Wordpress.org but as the problem is confined to one browser on one OS (albeit the most commonly used browser on the most commonly used OS, natch) thought better to ask here. Have been looking all day and not seen anyone else have the same problem.
It's the latest version of Chrome and there is no problem in IE, Firefox, Opera etc. No problems (as yet...) on any other platforms at all.
There don't appear to be any problems with any other Google Fonts used in the site.
The site is currently hosted at http://best.videofeet.com
Upon inspection of the source there is no apparent reason why it would render like this.
I'm stumped.
Here's a link to an image of the problem (From VirtualBox on Mac - the only means I have available to me to replicate the bug as described by the client): http://imgur.com/XdJlCbc
OK, I'll take a stab at answering this now I've had a tinker. It looks like Josefin Sans does not have a glyph for ellipsis (…), so Chrome is swapping out that line. There are other people experiencing this with other Google fonts:
https://code.google.com/p/googlefontdirectory/issues/detail?id=204
http://wordpress.org/support/topic/a-problem-with-ellipsis-the-google-font-story
The lack of ellipsis can be tested here
Either swap the ellipsis for three periods and risk the wrath of typophiles, or change the font I'm afraid.
Before and after image showing the paragraph tag with the ellipsis removed in developer tools here:
http://i.imgur.com/RmQwlaa.jpg
I'm working on a project with a designer and he insisted on using some specific font for titles and various elements in the page. So we're using a font kit to embed with #font-face.
It's working perfectly on PC (Firefox, IE 7 and 8, Chrome, Safari) but on Mac OS (Safari and Firefox) the fonts are not vertically aligned the same way. After looking on the Web, I didn't find any solution for this except "there always been differences between browsers and platforms, live with it".
I know that fonts are never rendered exactly the same across platforms, but this time it's not something like the font looks more bold or something like that. The font looks as if it's baseline is completely different between Windows and Mac OS X. On Mac OS, the font, at a size of 16px is 3px higher than on PC.
So I'm looking for a backup solution : is there a way to create a CSS specifically for Mac OS users? I do not want to target only Safari because Safari PC is ok, and Firefox Mac is not ok.
Or if you have a solution to fix the baseline difference that does not require a specific CSS file, I'd be happy to hear it.
Thanks!
I'm afraid that browser/os sniffing is your only option. CSS itself has no knowledge of OS nor do i have ever heard of a css hack that targets osx specifically.
This is the easiest way for me to detect OSX and add the OSX class to the document body so you can override css styles for OSX specifically.
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', 'OSX');
}
Same as #ChrisR answer this is the easiest way for me to detect MAC and add the MAC class to the document body so you can override css styles for MAC specifically.
Additionally this keeps the current Body Class and just ADDS Mac on to it
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', document.body.className +' MAC');
}
If setting an explicit line-height doesn't fix the problem, you can serve different stylesheets to each browser using your backend and detecting the OS in your application (via the user agent). You can also do something in JS doing the same thing, but there will likely be a FOUC while JS loads the relevant styles.
There's an easier way. http://rafael.adm.br/css_browser_selector/
It detects the browser and os and allows you to specify classes specific to it.
If you want close-to-perfect and painless, you're going to have to use the common fonts or fonts from an online service such as Google's free font library or one of the for-pay font libraries. These fonts have been designed and tested to work on the web.
Experimenting and including fonts for the user's browser to download and try to display correctly is fine, but won't be perfect and won't be painless. Also, be very careful with licensing restrictions - make sure the fonts your designer wants to use are properly licensed for use on the client's website.
If you have to do browser sniffing and serve multiple stylesheets, at this point I'd say your design is broken and needs to be revised. Show https://fonts.google.com to your designer and see if he likes any of those - they work cross-platform in all modern browsers and some are very slick. EDIT: Oh, and they're free to use without worries of licensing.
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.
Please check this screenshot!
alt text http://img267.imageshack.us/img267/1391/difference.png
This is the same page in Linux FF (on the left) and Windows FF (on the right, also it's displayed in the same way in IEs). I love how it looks in Linux FF and want to have the same look in Windows. However after playing with all CSS properties I know of, I didn't manage to change its look in Windows. Do you by chance know any solution for this issue?
Just in case: as a webdesigner you can't control pixel per pixel how your site will display on your user's browsers. Print and PDF are great for that purpose, not the web :)
Is Cleartype activated on Windows? This changes the display a lot and it's the user decision to activate or not this feature: if he doesn't like antialiasing you'd piss him off by forcing the rendering we can see on the left!
You can also change your stack of fonts in font-family and add other fonts than Arial.
You don't get to decide how the user's fonts look. The exact choice of font and whether it is anti-aliased is a client-side setting. Some (terrible luddites, IMO) prefer the pixellated look. In any case, Linux is likely to be using a lookalike fallback font (eg. ‘Sans’) rather than Arial itself, so it's never going to look exactly the same.
To turn anti-aliasing on in Windows for most fonts (in all applications, not just web browsers), you need to enable ClearType. Without ClearType, Windows's anti-aliasing is the old broken ‘font smoothing’ option, which for most fonts is so poor that Windows prefers not to use it. ClearType rendering isn't quite the same as the anti-aliasing Linux will be using; usually it only anti-aliases in the horizontal direction. So again it won't quite look the same, but it's generally considered pretty good at least for the Latin alphabet.
If you're really desperate to push it from the server side, you could use a #font-face rule to embed a font that has the GASP table hacked to always use anti-aliasing (using a ttfgasp.exe or a font editor). However doing this to Arial (or indeed most fonts without an open licence) would not be technically legal.
You can easily get the same look (or at least similar) by activating font smoothing in Windows. You can not, however, activate it using CSS.
Font smoothing is on by default in newer versions of Windows, so a lot of visitors will see it as you see it on your Linux system.
This is a user setting, and that is as it should be. Each user should be able to choose the smoothing setting that works best for him/her on his/her monitor.
If you absolutely want the text to look like on your Linux system for every user, your only option is to make it an image.
Different versions of Windows and Linux, and even different settings of their font rendering systems, yield different results in font rendering; in the first case antialiasing with subpixel optimizations for LCDs is clearly activated, while in the second case not even antialiasing is enabled.
To get nicer looking font rendering on Windows you should enable ClearType. In any case, it's all a client-side settings, and AFAIK you can't do anything for them from HTML - and you mustn't, if the user don't like antialiasing you shouldn't mess with his settings.
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.