How do i control the font weight in CSS [duplicate]

This question already has an answer here: Google Webfont conflict with local font (1 answer) Closed 4 years ago.

So I am working on the landing page for one of my little products.

http://finaltouchapp.com/

The application is for OSX so my target group is going to be on mac. Many of them are going to have Helvetica Neue so I have created a font family and a font weight that looks开发者_如何学C like this.

font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:100;

The problem is that on some machines it will show the ultra light version like this.

https://img.skitch.com/20110808-kwyja7m8anmjsyc1xcqqk174x1.png

On my machine it shows the proper weight which is light

I then tried to be more specific with something like

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

But still no luck.

I am assuming it's because people have different weights in their Helvetica Neue folder but I am not sure how to deal with it.

One alternative is of course to use font-face but I would rather just have those who have the font show it and the rest use ordinary Helvetica.

Anyone know how to deal with it.

---

Using CSS3 you can include your own TTF font files and use that instead.

@font-face { 
   font-family: " your FontName ";  
   src: url( /location/of/font/FontFileName.eot ); /* IE */  
   src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */  
}

/* THEN use like you would any other font */  
.yourFontName {
   font-family:" your FontName ", verdana, helvetica, sans-serif;  
}

The code snippet above is from: http://randsco.com/index.php/2009/07/04/p680 which explains this in detail.