1

I know there is conditional CSS by browser but I'm interested to see if there is conditional CSS by OS. Here is my motivation:

I developed a website using custom fonts via CSS3. The font looks beautiful on all browsers running on Mac OSX but look horrendous on all browsers running on Windows. I know this is due to the fact that OSX and Windows renders fonts differently.

As a temporary solution to this problem, I want all users on Windows browsers to use an alternative CSS file, where the custom font will not be used-- and instead revert back to a system font like Helvetica.

Anyone have any ideas how to do this?

Or if not, is there a way to make fonts look better on Windows? I tried

-webkit-font-smoothing: antialiased;

with no avail.

jp89
  • 453
  • 1
  • 5
  • 8
  • Custom fonts should look fine on Windows too. Which browser/OS are you particularly concerned about? – Ben Jul 24 '12 at 02:54
  • @Ben: Chrome on Windows. It looks **slightly** better on Windows Safari, but not much (And no where near as good as on OSX). Here's screenshot comparisons of Windows Chroms vs. Mac Chrome: http://cl.ly/image/0a382v31210L (and on Windows, that WITH -webkit-font-smoothing: antialiased;) – jp89 Jul 24 '12 at 03:04
  • Does it get better if you set the font to a different _fixed_ px size? (I've had problems before with em size becoming decimal pixel values. e.g 13.3px) – Ben Jul 24 '12 at 04:00
  • @Ben: Everything is set to px and not em. I never was a fan of using ems. – jp89 Jul 24 '12 at 04:04
  • Which font are you using? can you post the relevant css that load the font face and sets the styles for the area in your screenshot? – Ben Jul 24 '12 at 04:18
  • @font-face { font-family: DIN; src: url('/DINPro-Regular.otf'); font-weight: 300; } *, body, h1, h2, h3, h4, h5, h6, { font-family: "DIN", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } – jp89 Jul 24 '12 at 04:26

1 Answers1

-1

This looks like a good option. It is a jquery based solution. Once you detect the os you can add the css like this: (got code from here)

$('head').append('<link rel="stylesheet" href="os-windows.css" type="text/css" />');
Community
  • 1
  • 1
Boyd
  • 1,169
  • 8
  • 14