CSS very thin font? [closed]

Question

How do I create very thin fonts with CSS, like at http://www.google.com/landing/newgadgets/ ?

Right now I'm using this, but I'm on a mac and I don't think "Helvetica Neue" is supported on windows.

h1{   font-size:64px;   font-family:Helvetica Neue, Helvetica, Arial, sans-serif;   font-weight:100; } 

Any ideas for thin, crisp fonts?

Answer 1

Google is using their font API and CSS's @font-face

See the following reference in their code:

<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin" rel="stylesheet"> 

Below is the exact definition that "registers" said font:

@font-face {   font-family: 'Open Sans';   font-style: normal;   font-weight: 400;   src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'); } 

Then they simply apply that font to element/s:

h1, h2, h3, h4, blockquote, q, .maia-nav ul {    font-family: 'open sans',arial,sans-serif; } 

Note: @font-face fonts don't render crisply on downlevel browsers. If you need to support them try - http://cufon.shoqolate.com/

Answer 2

Just grab that font from Google's Web Fonts.

Select the fonts you want, select the styles (bold, italic, etc.) and Google will give you a <link /> element to include in your HTML.

That current font is called Open Sans:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 

Now you can use it:

font-family: 'Open Sans', sans-serif;